Slider bài viết mới giống yahoo.com cho blogger

Tweet

[tintuc]
Hôm nay mình hướng dẫn một dạng slider bài viết mới nhất (Slider Recent Posts ) hiển thị ngoài trang chủ cho blogger. Dạng slider này tương đối giống của yahoo.




Ảnh Demo

Cách làm:


Bước 1: Đăng nhập Blogger => Mẫu => Chỉnh sửa HTML => Nhấn Ctrl+F (nội tuyến) tìm ]]></b:skin> và paste đoạn code sau vào trước ]]></b:skin>

.mod{background:#EFF1F7; /*màu tiện ích*/border:1px solid #eee; /*đường viền tiện ích*/margin-bottom:10px;margin-top:-10px;width:648px; /*độ rộng tiện ích*/padding:0px;}.glv{height:330px; /*chiều cao tiện ích*/overflow:hidden;}.bd{position:relative;padding:4px 4px 4px 6px;}.gl2-ct .ct{margin-left:0px;position:relative;}
.vpv{padding:0px;width:336px; /*d? r?ng c?u ph?n bên trái c?a ti?n ích*/display:none;position:absolute;color:#000;border-right:0px solid #5C5858;}.gl-title a {color:#2c6be5; /*màu text c?a tiêu d? bài vi?t bên trái*/font-size:13px;font-weight:bold;}.gl-title a:hover {color:#ff0033;}.glv .on{display:block;}.vimg{width:325px; /*d? r?ng c?a ?nh bên trái*/height:230px; /*chi?u cao c?a ?nh bên trái*/border:1px solid #fff;padding:2px;}.glv ul.vpv-ft li{list-style-type:none;}.vpv-ft{width:300px; /*d? r?ng ph?n bên ph?i*/position:absolute;top:0px;right:0px;margin-top:5px;text-align:left;}.vpv-ft a{color:#000099; /*màu tiêu d? bên ph?i*/font-size:12px;font-family:arial;text-decoration: none;}.vpv-ft a:hover{color:#ff0033;}.vpv-ft li{list-style-type:none;min-height:65px;cursor:pointer;border-bottom:0px solid #5C5858;position:relative;text-align:left;}
.vpv-ft li.last{border-bottom:0;padding-bottom:5px;}.vpv-ft li.first{border-top:0px solid #5C5858;padding-bottom:5px;}.vpv-ft li.on{background:#AFC7C7;}
.vpv-ft img{float:left;width:80px; /*d? r?ng c?a ?nh bên ph?i*/height:60px; /*chi?u cao c?a ?nh bên ph?i*/margin:3px 4px 0px 2px;padding:0px;}.vpv-ft a{font-family:verdana;}.glv .vpv-ft .on .imgpointer{display:block;}.glv .vpv-ft .imgpointer{display:none;height:14px;width:6px;position:absolute;left:-10px;>
top:7px;}




Bước 2:

Đăng nhập vào blogger với tài khoản của bạn. 
Nhấn Bố cục bảng điều khiển
Sau đó, bạn chọn thêm tiện ích >> HTML / Javascript

<script language="JavaScript">imgr = new Array();imgr[0] = "http://sites.google.com/site/fdblogsite/Home/nothumbnail.gif";showRandomImg = false;fntsize = 12;acolor = "";aBold = false;text = "comments";showPostDate = true;summaryPost = 80; //số ký tự hiển thị bên tráisummaryFontsize = 12;summaryColor = "";numposts =6;label = "Template%20Blogspot"; /*nhãn bài viết*/home_page = "http://www.share123.vn"; /*thay thành địa chỉ blog của bạn*/</script><div id="gl2" class="mod glv"><div class="bd"><div id="gl2-vd"></div><div class="gl2-ct"><div id="gl2-ct1" class="ct on"><script type="text/javascript" src="https://nguyenhuytap.googlecode.com/files/sider-bai-viet-moi-1-share123.vn.txt"></script></div><script type="text/javascript" src="https://nguyenhuytap.googlecode.com/files/slider-recentposts_2_share123.vn.txt"></script></div></div></div><script type="text/javascript" src="https://nguyenhuytap.googlecode.com/files/recentposts_3_share123.vn.txt"></script><script type="text/javascript" src="https://nguyenhuytap.googlecode.com/files/recentposts_4_share123.vn.txt"></script><script type="text/javascript" src="https://nguyenhuytap.googlecode.com/files/recentposts_5_share123.vn.txt"></script><script type="text/javascript" src="https://nguyenhuytap.googlecode.com/files/recentposts_6_share123.vn.txt"></script><script type="text/javascript">(function() { new YAHOO.sea.fp.TodayVSet('gl2-ct1', true); })();(function(){YAHOO.util.Event.addListener(window,'load',function(){window.setTimeout(function(){},500);});})();</script>





Lưu ý: Khi các bạn áp dụng thủ thuật này thì nên down các file .txt về và up lên host của các bạn đề phòng die link.


Hãy like và G+1 nếu thấy bài viết có ích cho bạn. Chúc các bạn thành công
[/tintuc]