Thứ Bảy, 13 tháng 12, 2014

Bài đăng phổ biến hay còn gọi là Recent Posts thì hầu như Blogspot nào cũng có, nhưng đôi khi những template blogspot lại có Recent Posts mặc định thấy không vừa mắt cho lắm. Muốn thay đổi mà không biết làm cách nào, vì lẽ đó nên hôm nay Hồng Designer chia sẻ Bài viết phỏ biến 3 cột có thumbnail cho Blogspot đẹp.
Bài viết phỏ biến 3 cột có thumbnail cho Blogspot

Bài viết phổ biến 3 cột có thumbnail cho Blogspot

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>

Trong đó các bạn cần phải chỉnh sửa những mục sau cho phù hợp. 

  • 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é, chúc các bạn thành công.

0 nhận xét:

Đăng nhận xét