Hiển thị bài viết trong cùng một nhãn (Kiễu 1)

Với thủ thuật này, số lượng các bài viết trong cùng một nhãn sẽ hiển thị (do bạn quyết định) thành 2 cột trong khung tiện ích. Mỗi bài viết sẽ hiển thị một hình đại diện nhỏ đi kèm với tiêu đề, khi bạn rê chuột vào một tiêu đề bất kỳ thì sẽ xuất hiện thêm một bảng nhỏ ghi ngày tháng xuất bản, số lượng comments và vài dòng tóm tắt của bài viết.

Ảnh minh họa

>>>Bắt đầu thủ thuật.

Bước 1: Đăng nhập vào blog

Bước 2: Đi tới danh sách bài đăng (Nếu bạn đang quản lý từ 2 trang trở lên)

Bước 3: Chọn  Mẫu

Bước 4: Chỉnh sửa HTML => Tiếp tục (đồng thời bấm cặp phím Ctrl+F và gõ lệnh ]]></b:skin>

)

Bước 5: Chèn đoạn code dưới đây vào trước dòng lệnh ]]></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;}

Bạn điều chỉnh lại độ rộng cho phù hợp với blog của bạn rồi bấm LƯU lại. 

Sau đó vào thiết kế chọn thêm tiện ích => thêm HTML/Javacript, rồi dán đoạn code dưới đây vào

<script src="http://dl.dropbox.com/u/66348944/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 = "Thuthuatnangcao"; /* nhãn bài viết */
home_page = "http://www.dungheineken.blogspot.com/"; /* địa chỉ blog của bạn*/
</script>
<div id="rc-posts-2-col"><h3>Thủ Thuật Nâng Cao</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://dl.dropbox.com/u/66348944/tooltip-rc-post-2cot.js" type="text/javascript"></script>
</div>

Cuối cùng bấm Lưu lại là xong.

Chúc bạn thành công!!!