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

Điểm 4.6/5 dựa vào 87 đánh giá

(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

Loading...

14 nhận xét

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

    Trả lờiXóa
  2. 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

    Trả lờiXóa
  3. 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/

    Trả lờiXóa
  4. phần tiêu đề bên phải ko liên kết với link hả admin? Tiếc ghê

    Trả lờiXóa
  5. @ 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.

    Trả lờiXóa
  6. buồn cái, xài nhiều JS quá, ảnh hưởng tốc độ load ghê hồn,

    Trả lờiXóa
    Trả lời
    1. Đú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.

      Xóa
  7. 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

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

      Xóa
  8. Vậy giờ phải làm sao, Nhờ TDM chỉ giùm

    Trả lờiXóa
    Trả lời
    1. Bạn thêm code css .gl-title {word-wrap:break-word;} thử nhé

      Xóa
  9. chèn vào ở phần nào trong temp hả TDM?

    Trả lờiXóa
    Trả lời
    1. Thêm vào phần code css bước 3 ở trên đó bạn

      Xóa