Hôm nay 0nline24h sẽ giới thiệu đến các bạn tiện ích recent post dạng 2 cột sử dụng hiệu ứng mô tả toolip nhìn rất đẹp. và tốc độ cũng khá nhanh.Đặc điểm của tiện ích này là hiệu ứng mô tả sẽ xuất hiện khi bạn dê chuột vào tiêu đề của bài viết.
Bạn cũng có thể xem Demo bài viết này:
☼ Cách tiến hành:
1- Đăng nhập vào Blog
2- Vào thiết kế
3- Chọn Chỉnh sửa HTML
4- Dán đoạn code sau vào trước thẻ đóng ]]></b:skin>..
/*Tooltip*/
#osdhtmltooltip{
border: #999 1px solid;
padding: 4px;
font-size: 10pt;
z-index: 100;
left: -300px;
visibility: hidden;
width: 350px;
font-family: Arial;
position: absolute;
background-color: #fcfee4;
text-align: left;
}
#osdhtmltooltip img{
float: left;
padding: 3px;
border: solid 1px #FFF;
margin: 2px;
}
#osdhtmltooltip h3{
color: #000;
padding: 2px;
margin: 0px;
font-weight: bold;
text-transform: none;
text-decoration: none;
}
#osdhtmltooltip span{
color: #999;
font-style: italic;
}
#osdhtmltooltip div{
color: #000;
}
#osdhtmlpointer{
z-index: 101;
left: -300px;
visibility: hidden;
position: absolute;
}
#rc-posts-2-col {
width:320px;
}
#rc-posts-2-col h3 {
background:url(http://demo-0nline24h.googlecode.com/files/img-bg-rd-0nline24h.png) no-repeat top left;
padding:3px 5px 14px 5px;
font-size:13px;
margin:0px;
color:#fff;
}
table#rc-2cot {border-top:1px solid #ccc;border-bottom:1px solid #ccc; border-left:1px solid #ccc;}
#rc-tr1 {background:#f3f3f3;}
#rc-tr0 {background:#fff;}
#rc-td {padding:2px; color:#ff0000; border-right:1px solid #ccc;width:160px;}
#rc-td img {float:left; margin-right:2px; height:50px; width:50px; border:1px solid #ccc; padding:1px;}
#rc-td a {color:#ff0000;text-decoration:none;}
#rc-td a:hover {text-decoration:underline;}
5- save template lại.
6- Vào Phần Tử trang - Chọn Thêm Tiện ích - Thêm một HTML/Javarscip và dán đoạn code bên dưới vào:
<script src="http://demo-0nline24h.googlecode.com/files/System_Tooltip0nline24h.js" type="text/javascript"></script>
<script type="text/javascript">
numposts = 12 ; //số bài viết hiển thị trong tiện ích
postcount = 400 ; //số kí tự của đọan nội dung tóm tắt bài viết
sumTitle = 40 ; // số kí tự của tiêu đề bài viết
colortitle = "#555";
tcolortitle = " #ff6c00 "; // màu của tiêu đề bài viết ở phần mô tả
cmcolor = " #6b1f01 "; // màu của phần thông tin bài viết (gồm : ngày đăng và số nhận xét)
nocmtext = "No Comment";
cmtext = "Comments";
posttext = "Posted in";
label = "Thủ Thuật Blog";
home_page = "http://0nline24h.blogspot.com/";
</script>
<div id="rc-posts-2-col"><h3>Thủ thuật Blogger 0nline24h</h3><div id="rc-posts-loading"><img align='absmiddle' src='http://demo-0nline24h.googlecode.com/files/loading-related-0nline24h.gif'/></div>
<script src="http://0nline24h.googlecode.com/files/tooltip-rc-post-2cot-0nline24h.js" type="text/javascript"></script>
</div>
Trong đó:
- label = " Thủ Thuật Blog "; Là tên nhãn bạn muốn hiển thị trong tiện ích, Thay chữ Blogspot-tips thành tên nhãn của bạn.
home_page = " http://0nline24h.blogspot.com/ "; Là tên URL địa chỉ blog của bạn. - numposts = 12; Số bài viết hiển thị trong tiện ích. Lưu ý số này phải nhỏ hơn hoặc bằng số bài viết thực tế có trong nhãn của bạn.
postcount = 400; Số kí tự của đọan nội dung tóm tắt bài viết
sumTitle = 40; số kí tự của tiêu đề bài viết
tcolortitle = "#ff6c00"; màu của tiêu đề bài viết ở phần mô tả
cmcolor = "#6b1f01"; màu của phần thông tin bài viết (gồm : ngày đăng và số nhận xét)
7- save template lại.
Chúc các bạn thành công!
Theo : 0nline24h
Xuất thân là Quản Trị Kinh Doanh. Yêu thích Marketing Online và trở thành Blogger với gần 1000 bài viết về nhiều lĩnh vực. Blog cá nhân http://toilaquantri.com