HIỂN THỊ CÁC BÀI VIẾT TRONG CÙNG MỘT NHÃN (KIỂU 6)

Với thủ thuật này, các bài viết trong cùng một nhãn sẽ hiển thị 2 bài một lúc được chia thành 2 cột trong khung tiện ích và được tự động thay đổi theo một khoảng thời gian nhất định. 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 đề, ngày tháng xuất bản, số lượng comments và vài dòng tóm tắt.

Mời các bạn xem thử (bấm vào XEM THỬ phía dưới để trải nghiệm nha)

XEM THỬ  

Đầu tiên bạn đăng nhập vào Blog > chọn thiết kế > chọn Chỉnh sửa HTML, bấm cặp phím Ctrl+F để mở hộp tìm kiếm và gõ vào đó dòng lệnh  ]]></b:skin>  và dán tất cả code phía dưới trên dòng lệnh ]]></b:skin> và bấm Lưu mẫu.

#NewsTicker_horizontal{
border:solid 1px #ccc;
width:600px;
height:200px;
}
#NewsTicker_horizontal h1{
padding:6px;
margin:0;
background:#616D7E;
color:#fff;
font-size:11px;
font-weight:bold;
}
#NewsHorizontal {
width: 600px;
height: 200px;
display: block;
overflow: hidden;
position: relative;
}
#TickerHorizontal {
width: 600px;
height: 140px;
display: block;
list-style: none;
margin: 0;
padding: 0;
}
#TickerHorizontal li {
width: 280px;
border-right:1px solid #ccc;
text-align: left;
font-size: 12px;
margin: 0;
padding: 6px 10px;
float: left;
height: 162px;
display: inline;
}
#TickerHorizontal li a {
margin-bottom:2px;
display: block;
color: #000000;
font-size: 12px;
font-weight:bold;
text-decoration:none;
}
#TickerHorizontal li a:hover {
color: #666;
text-decoration:underline;
}
#TickerHorizontal li .NewsImg{
float:left;
border:1px solid #ccc;
padding:2px;
margin-right:5px;
margin-top:2px;
}
#TickerHorizontal li .NewsFooter{
display: block;
color: #000;
font-size: 10px;
margin: 0px 0px 0px 70px;
}

Ở code trên, các bạn có thể thay đổi các số màu đỏ và màu tìm để phù hợp cho Blog của mình (Width: chiều rộng tiện ích, Height: chiều cao tiện ích, còn số màu tím 280px là độ rộng của mỗi cột). Lưu ý: nếu thay đổi chiều cao và chiều rộng của tiện ích các bạn phải thay đổi đồng thời chiều rộng của mỗi cột thì nó mới tương xứng nha.

Tiếp theo, bạn thêm tiện ích HTML/Javacript rồi dán đoạn code phía dưới vào.

<script language="JavaScript">
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUJXlkRLJCPXITwB0dBGvCeM9znCUEjamyJetJu2RMdSWdjy9_1wYuTZ_SzIaq7l4eMFPqu1P3ditJg5kQ-k_7N9HvcrCF4EGk1T_dvrhSG0xm653sxKcc7jQ64rLJSAHKjPIL1avICnfN/";
showRandomImg = true;
imgwidth = 42; //độ rộng ảnh thumb
imgheight = 40; //chiều cao của ảnh thumb
aBold = true;
text = "nhận xét";
showPostDate = true; //nếu muốn hiển thị ngày đăng thay FALSE thành TRUE
summaryPost = 300; // số kí tự nội dung bài viết
icon = " » ";
numposts = 15; //số bài viết hiển thị
label = "TRANG TRÍ BLOG"; //thay thành tên nhãn trên blog của bạn
home_page = "http://www.dunghennessy.blogspot.com/"; //thay thành địa chỉ blog của bạn
</script>

<script language="javascript" type="text/javascript" src="http://dl.dropbox.com/u/66348944/mootools.1.11.js"></script>

 

<div id="NewsTicker_horizontal">
<h1>TRANG TRÍ BLOG</h1>
<div id="NewsHorizontal">
<script src="http://dl.dropbox.com/u/66348944/Horizontal_re-label.js" language="javascript">
</script>
</div></div>
<script src="http://dl.dropbox.com/u/66348944/Ticker_Horizontal.js" type="text/javascript"></script>

Bây giờ, bạn có thể thay đổi các giá trị như: địa chỉ blog, tên nhãn, số bài viết hiển thị, tiêu đề tiện ích theo ý thích của mình (có ghi chú trên code).

Ngoài ra, với thủ thuật này bạn cũng có thể tạo KHUNG TRÌNH DIỄN CÁC BÀI ĐĂNG MỚI NHẤT CHO TOÀN BLOG bằng cách thay chữ label (màu xanh) thành chữ post và thay chữ TRANG TRÍ BLOG (màu xanh) thành chữ CÁC BÀI ĐĂNG MỚI (hoặc chữ nào mà bạn thích) bấm Lưu lại là xong.

Lưu ý: Ở code thứ hai, các bạn phải điền thật chính xác tên nhãn và đường link địa chỉ blog của mình thì nó mới hiển thị, nếu không nó sẽ bị lỗi ra một khung trắng (không hiển thị).

Nguồn: Trai đất mũi

Người đăng: dunghennessy vào lúc 06:43