Có nhiều cách để các bạn giới thiệu đến mọi người các bài đăng mới nhất trên Blog của mình. Tôi xin chia sẻ đến với các bạn một trong những tiện ích giới thiệu bài đăng mới nhất được tự động trình diễn trông khá đẹp và tự động cập nhật khi bạn đăng bài mới.
Đầu tiên, bạn đăng nhập vào blog > chọn Thiết kế > chọn chỉnh sửa HTML, sau đó bấm đồng thời 2 phím Ctrl+F để mở hộp tìm kiếm và gõ vào dòng ]]></b:skin>
Sau đó, dán đoạn code phía dưới vào trước dòng lệnh ]]><b/:skin> sau đó bấm Lưu mẫu.
.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;}
Các bạn có thể tùy chỉnh lại chữ màu xanh trên cho thích hợp với mẫu blog của mình vá sau đó lưu lại.
Sau khi lưu xong, bạn chọn thiết kế > Chọn thêm tiện ích > Thêm HTML/Javacrip rồi dán code phía dưới vào
Sau đó, dán đoạn code phía dưới vào trước dòng lệnh ]]><b/:skin> sau đó bấm Lưu mẫu.
.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;}
Các bạn có thể tùy chỉnh lại chữ màu xanh trên cho thích hợp với mẫu blog của mình vá sau đó lưu lại.
Sau khi lưu xong, bạn chọn thiết kế > Chọn thêm tiện ích > Thêm HTML/Javacrip rồi dán code phía dưới vào
<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://vovantung.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>
Chúc các bạn thành công!!!
0 nhận xét:
Đăng nhận xét
Đây là Blog cộng đồng, có thể trao đổi và học hỏi vì vậy mọi nhận xét các bạn nên dùng những từ dễ nghe, không nên dùng những lời tục tiểu thiếu văn hóa.Cám ơn các bạn.