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

(Traidatmui.com) – 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://data-traidatmui.appspot.com/scripts/ya_glv_post.js"></script>
</div>
<script type="text/javascript" src="http://data-traidatmui.appspot.com/scripts/ya_ct_post.js"></script>
</div></div></div>

<script type="text/javascript" src="http://data-traidatmui.appspot.com/scripts/ya_jquery_03.js"></script>
<script type="text/javascript" src="http://data-traidatmui.appspot.com/scripts/ya_jquery.min.js"></script>
<script type="text/javascript" src="http://data-traidatmui.appspot.com/scripts/ya_jquery_02.js"></script>
<script type="text/javascript" src="http://data-traidatmui.appspot.com/scripts/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://data-traidatmui.appspot.com/scripts/ya_glv_post.js
Thành http://data-traidatmui.appspot.com/scripts/ya_glv_label.js

Và tiếp theo thay http://data-traidatmui.appspot.com/scripts/ya_ct_post.js

Thành http://data-traidatmui.appspot.com/scripts/ya_ct_label.js


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

Xem khác cùng chủ đề

14 nhận xét | Viết lời bình

11/18/2010 04:12:00 CH Trả lời

thank dai đất mũi nhiều nha, bạn pro lắm

11/27/2010 05:33:00 SA Trả lời

N xai lun. Thanks.

9/03/2011 02:25:00 SA Trả lời

wwa, cám ơn đất mũi nhé, mình xài ngon ơ luôn. http://myexpressing.blogspot.com/.Admin hướng dẫn kỹ ra phết. Thủ thuật dạng này thấy bên fandung có hướng dẫn nhưng làm mấy lần cứ hỏng đi hỏng lại. May mà độ rộng admin đưa ra chuẩn tuyệt đối với cái giao diện bên mình. Híc. Thank

11/15/2011 08:41:00 SA Trả lời

ngon,bài viết rất tuyệt,mình đã làm thử và thành công,các bác có thể vô đây xem http://123oap.com/

12/04/2011 01:03:00 SA Trả lời

phần tiêu đề bên phải ko liên kết với link hả admin? Tiếc ghê

Admin
12/04/2011 07:08:00 CH Trả lời

@ Dương Duyên Văn: Đúng rồi bạn, tiêu đề bài viết bên phải khi click vào thì sẽ hiển thị phần ảnh thumb và tóm tắt bên trái thôi không link.

5/20/2012 08:05:00 CH Trả lời

buồn cái, xài nhiều JS quá, ảnh hưởng tốc độ load ghê hồn,

Admin
5/21/2012 01:35:00 SA Trả lời

Đúng là nhược điểm của tiện ích này quá nhiều JS, nên trở nên có phần chậm chạp. Mình sẽ cố gắng khắc phục việc này trong thời gian tới.

5/23/2012 08:07:00 SA Trả lời

cho mình hỏi tiện ích này bị lỗi ở chỗ nếu tiêu đề bài viết bị ở phần bên trái quá dài nó sẽ ko tự động chuyển xuống hàng dưới mà kéo dài hơn độ rộng cho phép của phần bên phải nên phần bên phải bị lệch qua phần bên trái! Tức nó khác với demo của TDM

Admin
5/23/2012 08:13:00 SA Trả lời

Có thể trong temp thiếu thuộc tính ngắt dòng word-wrap:break-word; này đó bạn.

5/23/2012 08:19:00 SA Trả lời

Vậy giờ phải làm sao, Nhờ TDM chỉ giùm

Admin
5/23/2012 08:31:00 SA Trả lời

Bạn thêm code css .gl-title {word-wrap:break-word;} thử nhé

5/23/2012 08:51:00 SA Trả lời

chèn vào ở phần nào trong temp hả TDM?

Admin
5/23/2012 08:56:00 SA Trả lời

Thêm vào phần code css bước 3 ở trên đó bạn

Bạn nhập từ: cungly Bạn nhập từ: lleu Bạn nhập từ: kkrong Bạn nhập từ: cuoilon Bạn nhập từ: roile Bạn nhập từ: hehehe Bạn nhập từ: byebye Bạn nhập từ: idontknow Bạn nhập từ: votay more »

Giải pháp bán hàng online Số 1 Việt Nam
Lên đầu trang Xuống cuối trang