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 1     DEMO 2


Ảnh minh họa:

☼ Cách thêm Bài viết mới 2 cột với thumbnail có mô tả cho nhãn blogger:

1- Đăng nhập vào Blog

2- Vào Bố cục (layout)

3- Chọn Thêm Tiện ích (Add widget) - Thêm một HTML/Javarscip và dán đoạn code bên dưới vào:

<style>/*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/AVvXsEh2DOOxeDYnKP_EWk0giI4GCw0ySWn5omJm3uwLnHX9a8QK2I9_tazkh4gNzfDWaQ6nTizdSl39rIJKTLhPXs_XcY0HnPE0CCEng1bY9QonKfEMgK4fhGzJUmNfX9f89DJ-n73ZM1osn3Qm/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;}</style>
<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; 
postcount = 400; 
sumTitle = 40; 
colortitle = "#555";
tcolortitle = "#ff6c00"; 
cmcolor = "#6b1f01"; 
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/AVvXsEhTgILDCo0LkGsfUUOj_lWKfC5GdGBr-g-G6z2JHhmYcWPrlGyZOgMBnvLk1fBcAUEEOzfby1aS1sjadmeV0apqszuFCJuYcTcZlRhzugHX6jSmj00EYQMcU1cgr20FEApDxE7W4W6mg3M4/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>

» Tùy chỉnh hoạt động!

• 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)
• 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.
• Nếu bạn muốn hiển thị cho toàn bộ bài viết thuộc các nhãn khác nhau chứ không riêng gì một nhãn như DEMO 3 thì chỉ cần thay file:
  

  http://dl.dropbox.com/u/70549761/Recent/namkna-blogspot-com/tooltip-rc-post-2cot.js

  thành:
  

  https://dl.dropboxusercontent.com/u/66256041/Recent-posts/namkna.blogspot.com/tooltip-rc-post-2cot-all-label.js

4- Bấm Lưu tiện ích lại (save template) lại.
Chúc thành công!

Theo: Fandung