Hướng dẫn tạo slider những bài viết mới cho blogspot

Bài viết này sẽ hướng dẫn tạo slider những bài viết mới cho blogspot (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>
<pre> .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;}  
 </pre>

Bước 2:

1. Đăng nhập vào blogger với tài khoản của bạn. 
2. Nhấn Bố cục bảng điều khiển 
3. 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
<pre>

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

</pre>
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.