▀▄▀▄▀▄▀▄▀▄▀▄ Các bài đăng mới ▀▄▀▄▀▄▀▄▀▄▀
    Kenh sctv1 Kenh sctv1 Kenh sctv1
    Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1
    Kenh sctv1 Kenh sctv5 Kenh HTV2 Kenh SCTV16




Xem truyền hình trực tuyến (Click here)

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)









Đầ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] = "http://lh5.ggpht.com/_BTztXRwC9ik/TGj60EKEdrI/AAAAAAAAC1w/JKGAdpKYyk8/images.jpg";
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

14 nhận xét:

quốc thắng đỗ nói...

Anh ơi cho em hỏi cho thành 3 bài hiển thị thay cho 2 bài dc không ?

dungheineken nói...

Không, cái này chỉ hiển thị 2 bài mà thôi

hoen nói...

Bạn ơi... cái khung hồi trưa còn hiển thị được mà h ko biết vì sao nó trắng nhách hà

dungheineken nói...

Tôi đã upload lại file .js rồi đó, bạn copy code thứ 2 thay thế code đã hư lúc trước và bấm lưu lại là xong.
Cám ơn bạn đã báo lỗi để tôi kịp thời chỉnh sửa lại

Nym Sakura nói...

Thủ thuật rất hay , nhưng vô cùng đáng tiếc là minhg không tài nào up 3 file js lên host riêng được , làm vậy thủ thuật không hoạt động nữa ? Mong hồi âm của bạn .

dungheineken nói...

Bạn up lên host nào???
Bạn nên up lên Dropbox là tốt nhất

Nym Sakura nói...

Cảm ơn bạn đã trả lời , nhưng mình chỉ tin tưởng vào code.google.com . Mong chờ một thủ thuật mới với ảnh hoặc bài viết nằm ngang , tích hợp nút bấm để trượt sang ( bạn xem gamethu.net , box ảnh bên dưới ) từ bạn . Thân

dungheineken nói...

Ok, để mình nghiên cứu thử xem
Cám ơn bạn đã ghé tham quan và ủng hộ dunghennessy

Nym Sakura nói...

Vẫn dõi theo blog của bạn

Nym Sakura nói...

Có dịp mời bạn ghé chơi nhà mình . Thân

dungheineken nói...

Bạn cho mình địa chỉ blog của bạn đi, mình sẽ vào thăm..
Cám ơn bạn đã ủng hộ dunghennessy

Nam Tranganh nói...

Thu thuat rat hay
hoc de thi

Trong Lanh nói...

a dũng có thể chỉ e làm trang chủ nhưng chia thành các khung giống trang chủ của a vậy. Mỗi khung chỉ một bài và một tấm hình hơi to. E tìm hoài mà ko thấy

Dung PHAM HOANG nói...

À..cái này là do giao diện sẳn có của Blogspot mà anh tải trên mạng về mà thôi, không có can thiệp gì vào mã nguồn nó cả em à....nên không thể hướng dẫn cho em được, mong em thông cảm

Đăng nhận xét

 
Powered by by: Blogger