Tạo Recent Posts 3 cột với style thumbnail đẹp

Tiếp nối bài viết Tạo Recent Posts với style tin tức đẹp theo nhãn (label) cho Blogspot mình giới thiệu thêm mẫu Recent Posts với style 3 cột kết hợp với thumbnail đẹp mắt.

Tạo Recent Posts 3 cột với style thumbnail đẹp

Để tạo mẫu Recent Posts, các bạn vui lòng thực hiên các bước sau:
Bước 1: Các bạn vào Bố cục→Thêm tiệc ích HTML→Thêm đoạn code sau:

<style type="text/css">
#vanvietblog-rc-3cot {width:350px;}
table#vanvietblog-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:50px; width:50px; border:1px solid #ccc; padding:1px;}
#rc-3cot a:link {font:normal 12px arial;}
#vanvietblog-rc-3cot h2 {background:#098047;
padding:5px 0 14px 15px;
font:bold 15px Arial;
margin:0px;
color:#fff;
text-align: center;
}
</style>
<script type="text/javascript">
home_page = "http://vanvietblog.blogspot.com/";
label = "Blogger";
numposts = 9;
sumTitle = 24;
colortitle = "#333";
imgr = new Array();
imgr[0] = "URL_ảnh";
showRandomImg = true;
</script>
<div id="vanvietblog-rc-3cot">
<h2>Blogger</h2>
<script src="https://www.googledrive.com/host/0B1EJGJ56bNPuSVh3anQyOFhEU28" type="text/javascript"></script>
<p style="float:right;margin:0;padding:3px">Xem thêm về<a href="http://vanvietblog.blogspot.com/search/label/Blogger?&max-results=20"> Blogger»</a></p>
</div>

Lưu ý: 
+ home_page = "http://vanvietblog.blogspot.com/"; Thay http://vanvietblog.blogspot.com/ thành URL Blog của bạn.
+  label = "Blogger"; Thay Blogger thành Label bạn muốn hiển thị
+ numposts = 9; số bài viết hiển thị
+ sumTitle = 24; Kí tự của tiêu đề bài viết
+ #vanvietblog-rc-3cot {width:350px;} thay 350px thành độ rộng mà bạn muốn, nhờ đó mà bạn có thể đặt widget này bất cứ nơi nào trên Blog của mình.
+ imgr[0] = "URL_ảnh"; Thêm Url ảnh mặc định đối với bài viết không có ảnh
+ Điều quan trọng: bạn hãy tải file này về up lên host riêng để sử dụng nhé! 
"https://www.googledrive.com/host/0B1EJGJ56bNPuSVh3anQyOFhEU28"
+ <p style="float:right;margin:0;padding:3px">Xem thêm về<a href="http://vanvietblog.blogspot.com/search/label/Blogger?&max-results=20"> Blogger»</a></p> Ở đoạn này, bạn thay Blogger thành nhãn hiển thị của widget để người đọc có thể xem thêm các bài viết từ nhãn đó.
+ Các bạn có thể tùy chỉnh giao diện cho bắt mắt hơn nhé

Code edit by Văn Việt Blog's-ItechPlus