thủ thuật trình diễn bài viết mới có anh thu nhỏ

Thủ thuật này sẽ giúp cho các bài viết của bạn tự động cập nhật và 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.

Hình ảnh minh họa

lick vào ảnh để xem ảnh lớn hơn

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>

lick vào ảnh để xem ảnh lớn hơn

coppy đoạn code này nhé

.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ưu mẫu) 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

lick vào ảnh để xem ảnh lớn hơn

coppy code này nhé

<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://0915333211.blogspot.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 (nếu không rành về code thì bạn cứ để nguyên mà xai nhé)


*lưu ý các bạn : để áp dụng thủ thuật này thì các bài viết của bạn phải được đặt tên " nhãn "
như vậy thì các điều khiển mới tìm thấy bài viết mới mà hiển thị.


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

nguồn: traidatmui