Tin mới đăng:

Recent posts 2 cột với hiệu ứng Tooltip

Một thủ thuật khá hay được mothuthuat.com phát triển đó là tạo tiện ích "Recent posts" với 2 cột cùng hiệu ứng Tooltip. Để chia sẽ đến các Blogger có thể biết và thêm tiện ích này cho blog của mình, hôm nay mình xin chia sẽ lại thủ thuật này. Ở đây mình không sử dụng Link css mà chèn hẳn code vào Template để tránh tình trạng Host bị die. Điều này cũng có thể giúp tiện ích này load nhanh hơn khi sử dụng host không ổn định hay bị lỗi.
Hình ảnh minh họa:
1. Đăng nhập vào tài khoản Blogger
2. Vào phần Thiết kế (hay bố cục)
3. Chọn chỉnh sửa HTML
4. Chèn code bên dưới vào trước thẻ ]]></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://data.fandung.com/blog/demo/tooltip-recentposts/img-bg-rd.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 và trở về phần tử trang
6. Tạo 1 HTML/Javascript và thêm vào code bên dưới
<script src="http://data-traidatmui.appspot.com/scripts/System_Tooltip.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";
home_page = "http://www.xuandoanh.com";
</script>
<div id="rc-posts-2-col"><h3>Recent Posts with tooltip</h3><div id="rc-posts-loading"><img align='absmiddle' src='http://lh6.ggpht.com/_btztxrwc9ik/tsw3lpdf6yi/aaaaaaaage0/lkhkccqnwvw/loading-related.gif'/></div>
<script src="http://data-traidatmui.appspot.com/scripts/tooltip-rc-post-2cot.js" type="text/javascript"></script>
</div>
Bạn hãy thay tên nhãn (Thủ thuật) và địa chỉ (http://www.xuandoanh.com) thành tên nhãn và địa chỉ blog của bạn.
7. Sau khi chỉnh sửa xong bạn Save tiện ích lại.
                         Chúc bạn thành công
Theo mothuthuat.com
Recent posts 2 cột với hiệu ứng Tooltip Recent posts 2 cột với hiệu ứng Tooltip
9/10 356 bình chọn

Chia sẻ:

Xin chào! Mình là Bùi Xuân Doanh. Mình muốn được chia sẻ cùng các bạn những gì mình biết.

Theo dõi tôi trên Facebook Or Youtube


2 bình luận | Viết bình luận

Hoàng Quốc Vương
01:41 27 tháng 8, 2016
Minhf làm như bạn mà nó không hiển thị bạn có thể giúp mình đc ko ạ
Hoàng Quốc Vương
01:46 27 tháng 8, 2016
Minhf làm như bạn mà nó không hiển thị bạn có thể giúp mình đc ko ạ

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 »

Quản trị

    Admin Bùi Xuân Doanh

    Click để Chat với Admin! Click để Chat với Admin!

    Email: buixuandoanh@gmail.com

    Hotline: 0983.379.818

Tư vấn Kỹ thuật