Tiện ích Recent Posts 3 cột cho Blog

Tiện ích này rất thích hợp cho các trang giới thiệu phần mềm, ebook, quảng cáo sản phẩm,…làm cho Blog của bạn trông ngăn nắp và chuyên nghiệp hơn.

Demo
trong demo mình đưa code vào trong bài đăng
(các bạn đưa code vào bài đăng hoặc vào một tiện ích đều được)

Thực hiện: (đưa vào tiện ích)

1. Vào Thiết kế > Phần tử trang

2. Tạo một widget HTML/JavaScript và dán code bên dưới vào :

Kiểu 1

<style type="text/css">

#itechplus-rc-3cot {width:298px;}
table#itechplus-rc-3cot {border:1px solid #ccc;}
#rc-3cot {padding:0 8px;width:30%;}
#rc-3cot p{padding:0;margin:0 0 5px 0;}
#rc-3cot img {margin:8px 0 2px; height:55px; width:75px; border:1px solid #ccc; padding:1px;}
#rc-3cot a:link {font:normal 12px arial;}
#itechplus-rc-3cot h2 {
background:url(#) no-repeat top left;
padding:5px 0 14px 15px;
font:bold 13px Verdana;
margin:0px;
color:#fff;
}
</style>
<script type="text/javascript">
home_page = "http://www.dvt.com.vn/";
label = "Ảnh chụp bằng ĐTDĐ";
numposts = 9;
sumTitle = 18;
colortitle = "#333";
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1jG8iZF929ZSBQ_AbT1GBe-FMRz5BIJjKJE6pik2xY3mD_faQz59ln2PkIsFh-_GcXpjsSYvBitWIeuAa1r1QQteg5twLDd2y9kr2qWFguaZIjpSwMPISaFqd53Sr6wzpoC3hW-v4VHo/";
showRandomImg = true;
</script>
<div id="itechplus-rc-3cot">
<script src=" https://dl.dropbox.com/u/74775294/Filejs/itechplus-rc-3cot.js " type="text/javascript"></script>
<p style="float:right;margin:0;padding:3px"><a href="http://www.dvt.com.vn/search/label/%E1%BA%A2nh%20ch%E1%BB%A5p%20b%E1%BA%B1ng%20%C4%90TD%C4%90?&max-results=6">Xem thêm&#187;</a></p>
</div>

Kiểu 2

<style type="text/css"> 

#itechplus-rc-3cot {width:610px;} 

table#itechplus-rc-3cot {border:1px solid #ccc;} 

#rc-3cot {padding:0 8px;width:30%;} 

#rc-3cot p{padding:0;margin:0 0 5px 0;} 

#rc-3cot img {margin:8px 0 2px; height:160px; width:160px; border:1px solid #ccc; padding:1px;} 

#rc-3cot a:link {font:normal 12px arial;} 

#itechplus-rc-3cot h2 { 

background:#999999; 

padding:5px 0 14px 15px; 

font:bold 13px Verdana; 

margin:0px; 

color:#fff; 

} 

</style> 

<script type="text/javascript"> 

home_page = "http://www.dvt.com.vn/"; 

label = "Thùng loa"; 

numposts = 6; 

sumTitle = 24; 

colortitle = "#333"; 

imgr = new Array(); 

imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1jG8iZF929ZSBQ_AbT1GBe-FMRz5BIJjKJE6pik2xY3mD_faQz59ln2PkIsFh-_GcXpjsSYvBitWIeuAa1r1QQteg5twLDd2y9kr2qWFguaZIjpSwMPISaFqd53Sr6wzpoC3hW-v4VHo/"; 

showRandomImg = true; 

</script> 

<div id="itechplus-rc-3cot">

<h2>

Thùng loa<div style="float: right; margin: 0; padding: 3px;">

<a href="http://www.dvt.com.vn/search/label/Th%C3%B9ng%20loa?&amp;max-results=6"><span style="color: white;"> Xem thêm »</span></a></div>

</h2>

</div>

<script src="https://dl.dropbox.com/u/74775294/Filejs/itechplus-rc-3cot.js" type="text/javascript"></script>

Trong đoạn code trên :

• width:610px; : chiều rộng của widget
• height:160px; width: 160 px; : chiều rộng và chiều cao của ảnh đại diện
• home_page = "http://www.dvt.com.vn"; : địa chỉ blog của bạn
• label = " Thùng loa "; : tên trương mục muốn hiển thị
• numposts = 6; : số bài viết sẽ hiển thị
• sumTitle = 24; : số ký tự dòng tiêu đề bài đăng
• colortitle = "#333"; : màu tiêu đề bài đăng
• background:#999999;  : màu của thanh tiêu đề nhãn
• imgr[0] = “…”; : hình đại diện cho bài viết không có ảnh

Các bạn thay đổi cho phù hợp (có thể thử code và điều chỉnh tại đây).