Recent post dạng Slide đẹp mắt bằng Jquery cho blog

2 thg 12, 2013
(Viettin365.com) Tiếp đến với thủ thuật Recent post hôm nay mình giới thiệu đến các bạn cách tạo tiện ích Recent post với hiệu ứng chạy slider rất đẹp mắt . Thủ thuật này dùng nhiều file .JS nên sẽ ảnh hưởng đến tốc đọ load trang nhưng nó lại có ưu điểm rất lớn mà nhiều trang tin tức hiện nay vẫn hay dùng là trình diễn đẹp mắt bài viết mới và chạy slider làm người xem có cảm giác thân thiện .
Ảnh minh họa :

Bắt đầu thủ thuật 
1. Đăng nhập blogger
2. Chọn mẫu => Chỉnh sửa HTML
3. Dán code dưới sau thẻ <head>            
<script language="javascript" type="text/javascript" src="https://script-viettin24h.googlecode.com/svn/tags/Jquery.min.1.5.1.js"></script>
<script language="javascript" type="text/javascript" src="https://script-viettin24h.googlecode.com/svn/branches/jquery.easing.1.3.js"></script>
<script language="javascript" type="text/javascript" src="https://script-viettin24h.googlecode.com/svn/branches/script.js"></script>
4. Chèn code dưới sau thẻ ]]></b:skin>
                      
.main-slider{width:414px; /*độ rộng của phần bên trái*/
height:300px; /*chiều cao của phần bên trái*/
border-right:#ccc solid 1px;}
.lof-slidecontent { width:710px; /*độ rộng của cả tiện ích*/
height:300px; /*chiều cao của cả tiện ích*/
background:#eee;position:relative; overflow:hidden; border:#ccc solid 3px;}
.preload{ height:100%; width:100%; position:absolute; top:0; left:0; z-index:100000; text-align:center; background:#FFF}
.preload div{ height:100%;width:100%; background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMgbBRm_DcPZZDAi0BwXqnXPELKGVz6WKdg_lWeGJOM36G6Gd9h1AhLtMjMR8g8rKQl5QT1AGpzGklLv2BBA-uidx8fE1tLWlVHKJkXwta_17GI1ngO2IApRZCdq8ss0pph_HhHW8RD0w/s16/load-indicator.gif) no-repeat scroll 50% 50%;}
.sliders-wrapper{position:relative; height:100%; z-index:3px; overflow:hidden; }
ul.sliders-wrap-inner{overflow:hidden; background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMgbBRm_DcPZZDAi0BwXqnXPELKGVz6WKdg_lWeGJOM36G6Gd9h1AhLtMjMR8g8rKQl5QT1AGpzGklLv2BBA-uidx8fE1tLWlVHKJkXwta_17GI1ngO2IApRZCdq8ss0pph_HhHW8RD0w/s16/load-indicator.gif) no-repeat scroll 50% 50%; padding:0px; margin:0; position:absolute; overflow:hidden;}
ul.sliders-wrap-inner li{overflow:hidden;float:left; padding:0px;margin:0px; position:relative;}
ul.sliders-wrap-inner li img{ padding:0px;
width:414px; /*độ rộng của ảnh bên trái*/
height:300px; /*chiều cao của ảnh bên trái*/
}
.slider-description a{ color:#000; }
.slider-description{
font-size:12px;
z-index:100px;
position:absolute;
bottom:0px;
left:0px;
width:400px; /*độ rộng của phần mô tả hay phần tóm tắt nội dung*/
background:#000;
height:100px; /*chiều cao của phần mô tả hay phần tóm tắt nội dung*/
padding:0px 8px 5px 8px;
color:#fff;
opacity:0.8;
line-height:1.5em;
}
ul.navigator-wrap-inner h2,.slider-description h2{background:none; }
.slider-description h2{line-height:1.1em;margin: 5px 0 5px 0;}
.slider-description h2 a{font-size: 14px;margin: 0; padding: 0; color:#fff}
.navigator-content {position:absolute;right:0;top:0px;z-index:9;height:300px;color:#FFF
}
ul.navigator-wrap-inner h2{line-height:1.3em;padding:0 0 0 8px;font-size:14px;margin-left:85px;color:#fff;}
.navigator-wrapper{ z-index:10;
height:180px; /*chiều cao của list bài viết bên phải*/
width:310px; /*độ rộng của list bài viết bên phải*/
overflow:hidden;
color:#FFF;
}
ul.navigator-wrap-inner{ top:0; padding:0; margin:0; position:absolute; width:100%; }
ul.navigator-wrap-inner li{ cursor:hand; cursor:pointer; list-style:none; padding:0; margin:0px; overflow:hidden; display:block; text-align:center;}
ul.navigator-wrap-inner li.active{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwiqTLx7dxWfHUYNFDme_5ABE1LqXULwUeSLXOdTZ26sjUkKMpwN-jptceDHxBxwVIBOILabPoBypHiF0lLVWHhJBCyjKZgGYeqFvhHOguh-yRndbWuDPdB7X9cgH1OrbPCVJdJmj_wP4/s38/arrow-bg.png) no-repeat scroll left center; color:#FFF
}
ul.navigator-wrap-inner li.active div{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRqCdxbNDXXzUH_PM3NWH91BqzDaxTAH4FRzYdswJXQbK3n3uCanERkX4_2pZoHKmD2EZf02G2QfuyFpHRGp6G98okwHFcvhbS1A-gQEBaT4HdRPTN-RgFHavCOpZZLwwelb1b0MnNU3M/s100/grad-bg.gif);
color:#FFF;}
ul.navigator-wrap-inner li > div{
background:#333;
color:#FFF;
height:100%;
position:relative;
margin-left:15px;
padding-left:15px;
border-top:1px solid #E1E1E1;
text-align:left
}
.navigator-wrap-inner img{
height:75px; /*chiều cao của ảnh thumb ở list bài viết bên phải*/
width:75px; /*độ rộng của ảnh thumb ở list bài viết bên phải*/
margin:8px 8px 8px 0px;
float:left;
padding:2px;
border:#C5C5C5 solid 1px;
}
.button-next,
.button-previous{
display:block;
width:40px;
color:#FFF;
cursor:pointer;
position:absolute;
height:100%;
z-index:40;
top:0;
text-indent:-999px;
}
.button-next {
right:0px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGsmR4ecdNlq5u5g0pJUT_9mIMJy_JORSqtZ5Ox_ERf6QLzHGTieM2Byv4aW3w2AxOdEDpdP9r0RAkntiJvTfYki5t2koj2oPFWeZrf0qgs0Mdh4wy_DqBStBEjX69gu_A0pPMtaccDEE/s38/next.png) no-repeat right center;
}
.button-previous {
left:0px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_MM0JL9PTVC-XSJ5O6swuhQYZQDVDRbNTjyTb8sqbMjULHCoFdfsjFAh8RQq4CTrweORNaFxL2GLS_uZ_yCgVzfP1C96qgvFEpEMmFSvDHm4hJg4W3z31Z7a56r-I6cLQ60s4LMTyZAI/s38/previous.png) no-repeat left center;
}
.button-control {
background:#333;
position:absolute;
top:10px;
right:48%;
height: 20px;
width: 20px;
cursor:hand; cursor:pointer;
}
.button-control span { display:block; width:100%; height:100%;}
.action-start span {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1dfwngEsTAOfnUG1XYqSiXPQ431TUNsq4H9qMCOPg51QJbuH-G-AOXn1hL_4lH93Zuhon2NUAYTgtJCHM4BY9B8E6ZfIDCLijjip0ZTqhWFO1qeQavp3H6a_STPJJlbbFD6DIjGsBWic/s16/play.png) no-repeat center center;
}
.action-stop span {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKVcwkhsAGn2I12-pXTOEOw9TpT1XDeTnrz1N9RpFaFrscj-0XgfsCxLM4X5v1HolvaHUQldBx9_CblX1vJ_5PpRfplvviv9K662Voha7XW8W3bO0TItkkhOR_LvhM-Kn9__TWkfyTaMM/s16/pause.png) no-repeat center center;
}
5. Lưu lại
6. Chọn bố cục và thêm tiện ích HTML / Javescript => Dán code bên dưới vào               
<script type="text/javascript">
$(document).ready( function(){ 
var buttons = { previous:$('#jslidernews .button-previous') ,
next:$('#jslidernews .button-next') };
$('#jslidernews').lofJSidernews( { interval:5000,
easing:'easeOutBounce', // tên hiệu ứng
duration:1200,
auto:true,
mainWidth:414, //độ rộng của phần trình diễn bên trái
mainHeight:300, //chiều cao của phần trình diễn bên trái
navigatorHeight : 100, //chiều cao của list bài viết bên phải
navigatorWidth : 310, //độ rộng của list bài viết bên phải
maxItemDisplay:3,
buttons:buttons}); 
});
summaryposts = 30; //số ký tự của nội dung phần mô tả
numposts = 15; //số bài viết hiển thị
label = "Advanced blogger"; //thay thành tên nhãn của blog bạn
home_page = "http://www.viettin365.com/"; //thay thành địa chỉ blog của bạn
</script>

<div id="jslidernews" class="lof-slidecontent">
<script src="https://script-viettin24h.googlecode.com/svn/branches/jqslidernews.js" type="text/javascript">
</script></div>
7. Lưu lại 
Chú ý : Nếu bạn muốn trình diễn này cho một nhãn nhất định thì thay
https://script-viettin24h.googlecode.com/svn/branches/jqslidernews.js
thành
https://script-viettin24h.googlecode.com/svn/trunk/Viettin365-1.1.js
sau đó sửa 
Advanced blogger : thành tên nhãn muốn hiển thị.
Chúc các bạn thành công !
Tags: ,
Chia sẻ:
Chia sẻ

Comments[ 0 ]


Đăng nhận xét

BÀI VIẾT NGẪU NHIÊN