Tạo Recent posts dạng ảnh 3 cột cho Blog

Thiết kế Blog giá rẻ Tiện ích này giúp chúng ta xếp ngăn lắp,đẹp mắt và nhìn chuyên nghiệp hơn cho blog của mình !!! Rất thích hợp với những trang bán hàng, trưng bày sản phẩm.

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.quangvietmkt.blogspot.com/";
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/AVvXsEgCnJQgWv7DTeRl0yTuAHMPg3vOUzcQCjuS5mLzzhEPHI40FJxdWPcVreNZdAtNd09jho1MXl1fC29KJokunO2jDvg39DCA_auAvjT6WDoID-0V24krA_KuZlwA256-V7cy0VWaa9MomcY/";
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.viettin24h.com/"; 


label = "Thùng loa"; 


numposts = 6; 


sumTitle = 24; 


colortitle = "#333"; 


imgr = new Array(); 


imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCnJQgWv7DTeRl0yTuAHMPg3vOUzcQCjuS5mLzzhEPHI40FJxdWPcVreNZdAtNd09jho1MXl1fC29KJokunO2jDvg39DCA_auAvjT6WDoID-0V24krA_KuZlwA256-V7cy0VWaa9MomcY/"; 


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.viettin24h.com/"; : đị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

Nhấn Thích , G +1 và chia sẻ tới bạn bè: Nếu bài viết giúp ích cho bạn!

Cám ơn các bạn đã ghé thăm ủng hộ
Nguồn : chúng tôi sưu tầm từ nhiều nguồn

Thiết kế web chuyên nghiệp giá rẻ

Chúng tôi tuyên thiết kế web chuyên nghiệp đẳng cấp giá rẻ với 5 năm kinh nghiệm trong lĩnh vực thiết kế website nếu các bạn có nhu cầu có thể liên hệ Hotline: 0962 66 57 57 || Email: cmay.tt@gmail.com || website: cmay.vn