Bài viết ngẫu nhiên có ảnh thmbnail cho blogspot

Trước kia mình cũng nhìn thấy style này bên mothuthuat nhưng sau khi ngừng hoạt động thủ thuật này cũng ít người biêt đến ! Trông khá đẹp mắt thích hợp với rất nhiều giao diện khác nhau : tin tức, shop,thời trang,diễn đàn...

Hôm nay Viettin24h chia sẻ lại đến các bạn thủ thuật hay này

Ảnh minh họa:

☼ Cách tiến hành:


1- Đăng nhập vào Blogger

2- Vào Phần tử trang (Bố Cục)

3- Chọn Thêm Tiện ích

4- Tạo 1 widet HTML/Javarscip và dán đoạn code sau vào: 

<style type="text/css">
* {margin:0;padding:0;}
#random-posts {
width:300px;
}
#random-posts h3 {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLJtbpVRa5UNF3NSlFGuyXGPkiHhmlJ2U1TVcVFVsl-qWf1GgYIQR6-AlZUVeGFGlLHAKEe5Xyp402HEruT1H9zTX3byLkIsT3Rsp2MVNBZiYIuh901GElNxG4HdMDGU7yAkDx6KLw8BdN/h120/img-bg-rd1-namkna-blogspot-com.png) no-repeat top left; 
padding:3px 5px 14px 5px;
font-size:13px;
color:#fff;
}
img#rd-thumb {
float:left;
width: 40px; 
height:40px; 
margin-right:5px; 
border:1px solid #ccc;
padding:2px;
}

img#rd-thumb0 {
float:left;
width: 80px; 
height:80px; 
margin-right:5px; 
border:1px solid #ccc;
padding:2px;
}

ul, li {list-style:none;}
#random-posts li {
height:50px !important;
padding:5px 3px 0 5px;

}
li#li-rd a, li#li-rd-chan a, li#li-rd-le a {text-decoration:none;}
li#li-rd a:hover, li#li-rd-chan a:hover, li#li-rd-le a:hover {text-decoration:underline;}
li#li-rd {border:1px solid #ddd; background:#f6f6f6;height:90px !important;font-weight:bold;}
li#li-rd-chan {background:#f6f6f6;}

div#info h1 {font-size:20px;}
div#footer {padding-left:135px;}
</style>

<div id="random-posts"><h3>Random Posts</h3>
<div id='rd-posts-loading'>
<img align='absmiddle' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEih3bQ3cjTf8e1wIJc15DmlkkWorIqCMo-yY6mNSE1Ss0tXHJSf3XnUXz55bPr-VPvgxcIQmfXWGzSiK3c4igjUlhAaopf3OTKVpHiEW_ngr-9HH3vbO526_pCuIsM3R_KBR5aYIdP34Bj8/s1600/loading-related-namkna-blogspot-com.gif'/>
</div>
</div>

<script type="text/javascript">
var maxEntries = 7;
nocmtext = "No Comment";
cmtext = "Comments";
</script>
<script src="https://script-viettin24h.googlecode.com/svn/branches/rd-post-thumb.js" type="text/javascript"></script>
<script src="http://viettin24h.com/feeds/posts/default/-/Blogspot-tips?alt=json-in-script&callback=getRandomPosts&max-results=999999" type="text/javascript"></script>

Trong đó:
Thay Blogspot-tips thành tên nhãn bạn muốn hiển thị.
Thay http://viettin24h.com/ thành URL địa chỏ blog của bạn vào. Chúc các bạn thành công !

5- Bấm Lưu Mẫu (save template) lại.

Chúc thành công!