Tiện ích bài mới nhất (recent post) giống vn.yahoo.com

Ngày Thứ Hai, 12 tháng 9, 2011 Blog của Báo Mới Hà Nội chia sẻ với bạn đọc bài viết Tiện ích bài mới nhất (recent post) giống vn.yahoo.com
Chúc bạn xem tin tức vui vẻ !!

Theo yêu cầu của FRIENDS-PC, bạn yêu cầu làm recent post giống như trang vn.yahoo.com nhưng thời gian qua bận nhiều việc nên chưa đáp ứng yêu cầu của bạn được. Hôm nay mình đã test thành công và xin chia sẽ các bạn việc thực hiện thủ thuật này. Thủ thuật này sẽ giúp cho các bài viết của bạn tự động trình diễn trông khá bắt mắt. Mình sẽ hướng dẫn các bạn từng bước để đưa tiện ích này vào blog của mình. Thủ thuật này sử dụng hơi khá nhiều file script do đó nếu bạn không rành về script thì nên giữ nguyên chúng để tránh bị lỗi, tiện ích sẽ không hoạt động như ý muốn. Bạn có thể xem demo để thấy rõ hiệu ứng của recent post này.

Hình ảnh minh họa

1. Đầu tiên đăng nhập Blogspot
2. Vào bố cục chọn chỉnh sửa HTML
3. Chèn code css sau vào trước thẻ ]]></b:skin>

.mod{
background:#eee; /*màu nền của tiện ích*/
border:3px solid #6D7B8D; /*đường viền của tiện ích*/
margin-bottom:0px;
width:550px; /*độ rộng của tiện ích*/
padding:0px;}
.glv{height:330px; /*chiều cao của 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:316px; /*độ rộng cảu phần bên trái của tiện ích*/
display:none;
position:absolute;
color:#000;
border-right:1px solid #5C5858;
}
.gl-title a {color:#0000ff; /*màu text của tiêu đề 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:305px; /*độ rộng của ảnh bên trái*/
height:200px; /*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:40%; /*độ 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 đề bên phải*/
font-size:11px;
font-family:arial;
text-decoration: none;}
.vpv-ft a:hover{color:#ff0033;}
.vpv-ft li{
list-style-type:none;
min-height:40px;
cursor:pointer;
border-bottom:1px solid #5C5858;
position:relative;
text-align:left;}

.vpv-ft li.last{
border-bottom:0;
padding-bottom:5px;}
.vpv-ft li.first{
border-top:1px solid #5C5858;
padding-bottom:5px;}
.vpv-ft li.on{
background:#AFC7C7;
}

.vpv-ft img{
float:left;
width:34px; /*độ rộng của ảnh bên phải*/
height:30px; /*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;}

4. Save template lại và trở về phần tử trang
5. Thêm tiện ích HTML/Javascript và chèn vào nó code bên dưới

<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 = 150; //số ký tự hiển thị của bài viết tóm tắt bên trái
summaryFontsize = 12;
summaryColor = "";

numposts =6;
label = "Advanced blogger"; /*nhãn bài viết*/
home_page = "http://www.traidatmui.com/"; /*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="http://traidatmui-tips.googlecode.com/files/ya_glv_post.js"></script>
</div>
<script type="text/javascript" src="http://traidatmui-tips.googlecode.com/files/ya_ct_post.js"></script>
</div></div></div>

<script type="text/javascript" src="http://traidatmui-tips.googlecode.com/files/ya_jquery_03.js"></script>
<script type="text/javascript" src="http://traidatmui-tips.googlecode.com/files/ya_jquery.min.js"></script>
<script type="text/javascript" src="http://traidatmui-tips.googlecode.com/files/ya_jquery_02.js"></script>
<script type="text/javascript" src="http://traidatmui-tips.googlecode.com/files/ya_jquery_01.js"></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>

6. Sau khi chỉnh sửa xong bạn save tiện ích lại

Ở trên là mình cho tiện ích hiển thị cho toàn bộ bài viết trên blog nếu muốn hiển thị theo từng nhãn bạn có thể thay đổi như bên dưới

Thay http://traidatmui-tips.googlecode.com/files/ya_glv_post.js
Thành http://traidatmui-tips.googlecode.com/files/ya_glv_label.js

Và tiếp theo thay http://traidatmui-tips.googlecode.com/files/ya_ct_post.js

Thành http://traidatmui-tips.googlecode.com/files/ya_ct_label.js

Chúc bạn thành công


Nguồn: TRAIDATMUI.com