Bài viết mới 2 cột với thumbnail có mô tả cho nhãn blogger

Bài viết mới 2 cột với thumbnail có mô tả cho nhãn blogger

[Namkna BlOg] - Hôm nay namkna 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.

Các bạn có thể xem Demo để thấy rõ hơn.

Demo for Post

Bạn cũng có thể xem Demo cuối bài viết này:
Ảnh minh họa:

☼ 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLics-mUE8SrLJ01SdbKWNWk36DingGJVqW38H-oMpd-eniZkDwFtkImCoPzEfdSuDSjQc3cXVRBObTuK1ayFMzR4b71OKkb3axK8Ev-NaEXhyphenhyphenKVTNgx3_VKgit2FaJpCybgGba0sax0sI/s1600/img-bg-rd-namkna-blogspot-com.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-  Bấm Lưu Mẫu  (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://dl.dropbox.com/u/70549761/File-phu/namkna-blogspot-com/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 = "Blogspot-tips";
home_page = "http://namkna.blogspot.com/";
</script>
<div id="rc-posts-2-col"><h3>Thủ thuật Blogspot</h3><div id="rc-posts-loading"><img align='absmiddle' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjL-btXie6rARXcF8pyQ45JTIvKAjAmH0hv4RLp_Te67reLgh99lG5MZaQJBBETYh2zncHOFVP8SOvtVL7iE6UhqzYQkqadbLwleVy9aCSunSS05U_VLUH43t2hPJ3XMf_OIGRD0nZXxse1/s1600/loading-related-namkna-blogspot-com.gif'/></div>
<script src="http://dl.dropbox.com/u/70549761/Recent/namkna-blogspot-com/tooltip-rc-post-2cot.js" type="text/javascript"></script>
</div>

Trong đó:

• label = "Blogspot-tips"; 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://namkna.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-  Bấm Lưu Mẫu  (save template) lại.

Chúc thành công!

Theo: Fandung

Chủ đề: