Hướng dẫn tạo slider bài viết mới đẹp và chuyên nghiệp cho blogger

Lần trước mình đã hướng dẫn Thủ thuật tạo Slideshow bài viết mới nhất ngoài trang chủ Blogspot khá đẹp và chuyên nghiệp, 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 (Tham khảo cách tạo 1 widget HTML/Javascript ở vị trí bất kỳ cho blogspot)

Nhập mã code dưới đây trong hộp HMTL / 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ái

summaryFontsize = 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>

</div></div></div>

(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.

Nguồn : chúng tôi sưu tầm từ nhiều nguồn

Thiết kế web chuyên nghiệp giá rẻ

Chúng tôi tuyên thiết kế web chuyên nghiệp đẳng cấp giá rẻ với 5 năm kinh nghiệm trong lĩnh vực thiết kế website nếu các bạn có nhu cầu có thể liên hệ Hotline: 0962 66 57 57 || Email: cmay.tt@gmail.com || website: cmay.vn