HIỂN THỊ TIÊU ĐỀ CÁC BÀI TRONG NHÃN (KIỂU 1)

Blogger có cung cấp sẳn cho các bạn tiện ích tạo "nhãn" cho các bài viết, nếu các bạn chưa biết cách tạo nhãn thì xem BÀI NÀY.

Với thủ thuật dưới đây, tiêu đề các bài trong cùng một nhãn sẽ hiển thị thành 3 cột, cột đầu tiêu sẽ hiển thị bài viết mới nhất có hình kèm theo, cột thứ 2 sẽ hiển thị 2 bài viết kế tiếp và cột còn lại sẽ hiển thị tiêu đề các bài viết còn lại trong một nhãn (cột này bạn có thể tuỳ chỉnh số lượng tiêu đề bài viết). Cuối cùng có chữ  "READ MORE" Các bạn bấm vào XEM THỬ phía dưới để trải nghiệm trước.

XEM THỬ  

Để làm được thủ thuật này, bạn đăng nhập vào blog > Chọn thiết kế > Thêm tiện ích HTML/Javacript, copy code phía dưới dán vào

<h2>Thủ thuật Win 7</h2>
<style type="text/css">
*{ padding: 0;
margin: 0;
font-family: Arial;
font-size: 12px;
}

#index_news{
width: 525px;
margin: 5px;
}

#main_content{
width: 525px;
float: left;
overflow: hidden;
}

#main_content .top_news{
width: 525px;
margin-bottom: 10px;
}
#main_content .top1_news{
width: 234px; /*Độ rộng cột đầu tiên*/
float: left;
margin-top: 8px;
}
#main_content .top1_news .top1_news_image img{
border: 1px solid #CCC;
padding: 1px;
width:230px; /*độ rộng của ảnh ở cột đầu tiên*/
height:155px; /*Chiều cao của ảnh ở cột đầu tiên*/
}
#main_content .top1_news .top1_news_title{
padding: 8px 0;
text-align: justify;
}
#main_content .top1_news .top1_news_title a{
font-size: 16px;
color: #002392; /*Màu tiêu đề của bài viết có nội dung tóm tắt*/
text-decoration: none;
}
#main_content .top1_news .top1_news_title a:hover{
text-decoration: underline;
color: #0066ff; /*Màu tiêu đề của bài viết có nội dung tóm tắt khi rê chuột*/
}
#main_content .top1_news p{
text-align: justify;
}
#main_content .top1_news p a{
padding-left: 4px;
}
#main_content .top1_news p img, #main_content .top2_news img{
vertical-align: bottom;
}
#main_content .top2_news{
width: 95px; /*Độ rộng cột thứ 2*/
float: left;
margin-left: 8px;
margin-top: 12px;
padding-right: 6px;
}
#main_content .top2_news .top2_news_image{
background: url(http://farm3.static.flickr.com/2509/3847739522_6980c393a3_o.gif) no-repeat;
width: 90px; /*độ rộng của ảnh ở cột 2*/
height: 65px; /*chiều cao của ảnh ở cột 2*/
padding: 4px;
}
.top2_news_image img {
width:90px; /*độ rộng của ảnh ở cột 2*/
height:65px; /*chiều cao của ảnh ở cột 2*/
}

#main_content .top2_news h2{
padding-top: 2px;
}
#main_content .top2_news h2 a{
color: #000033;
text-decoration: none;
}
#main_content .top2_news h2 a:hover{
text-decoration: underline;
color: #ff0000;}

#main_content .top2_news .dot3x1{
background: url(http://farm4.static.flickr.com/3574/3847739556_d334d7aa61_o.gif) repeat-x center
center;
margin: 10px 0;
height: 1px;
font-size: 1px;
}
#main_content .topo_news{
width: 174px; /*Độ rộng cột thứ 3*/
float: right;
background: url(http://farm4.static.flickr.com/3508/3846949497_b0f76c94df_o.gif) no-repeat;
padding: 5px 1px 0 1px;

}
#main_content .topo_news .topo_news_title{
background: url(http://farm3.static.flickr.com/2598/3846949449_4c4b03d2fa_o.gif) no-repeat;
width: 160px;
height: 22px;
color: #FFF;
padding: 4px 0 0 14px;
font-weight: bold;
font-size: 11px;
}
#main_content .topo_news ul li{
background: url(http://farm3.static.flickr.com/2532/3847739582_8f41366c2f_o.gif) no-repeat 8px 10px;
padding: 2px 2px 2px 20px;
list-style: none;
}
#main_content .topo_news ul li a{
color: #002392;
font-weight: bold;
font-size: 11px;
line-height: 1.5em;
text-decoration:none;
}
#main_content .topo_news ul li a:hover {
color: #ff0033;
text-decoration: underline;}
</style>

<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://sites.google.com/site/fdblogsite/Home/nothumbnail.gif";
imgnew = "http://farm4.static.flickr.com/3438/3847739416_077831a5c5_o.gif";

showRandomImg = true;

aBold = false;
summaryPost = 147; // Số kí tự hiển thị cho phần tóm tắt bài viết
numposts = 10; // số bài viết sẽ hiển thị (Gồm tất cả bài viết ở 3 cột)
topoTitle = "Bài viết khác";
label = "WIN 7"; // Nhãn bài viết hiển thị (nếu hiển thị tất cả bài viết thì không cần gõ nhãn)
home_page = "http://www.dungheineken.blogspot.com/"; //thay đổi thành địa chỉ URL blog của bạn

</script>
<script src="http://dl.dropbox.com/u/66348944/Z_recent_label.js" type="text/javascript"></script>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://dungheineken.blogspot.com/search/label/WIN 7" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUFrqI4Prjzwf25bKzOLKreNeNi_Ydryang3zdypprsB0-Guxsex1q00gr7KJ76h_Tb8Z0YseF60Vq2dbyYAE1rlkY9ly3YYQSHbKEnh7jYo5eerB_8FrbDHTB-YwDMW-9EJ5IdlCQMu4/s1600/coollogo_com-273538502.png" /></a></div>

Bây giờ bạn thay hãy thay đổi tiêu đề nhãn, địa chỉ nhãn, địa chỉ Blog của mình, kích thước (có chú thích trong code)...để phù hợp với blog mình và Lưu lại là xong
Chúc các bạn thành công

Nguồn: Trai đất mũi