24 tháng 6, 2012

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



Bài viết ngẫu nhiên có ảnh thmbnail cho blogspot - Random post with thumbnail

Random post with thumbnail


Style này mình đã thấy bên muthuthuat lâu rồi nhưng từ khi mothuthuat ngừng hoạt động thì style này cũng thất truyền luôn.
Thủ thuật này được phát triển bởi fandung nhìn khá đẹp mắt, để thủ thuật này tiếp tục đến với mọi người hôm nay namkna sẽ giới thiệu lại thủ thuật này cho mọi người.
Các bạn có thể xem Demo để thấy rõ hơn.


Ảnh minh họa:
Bài viết ngẫu nhiên có ảnh thmbnail cho blogspot - Random post with thumbnail
Cách tiến hành:
   1- Đăng nhập vào Blog
   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/AVvXsEjzrFfti7jKCimpXr17-EN_IWVylxWSwFEVbcmlEgtZAYh_NBWK9wTqeBORmIB8Fclj6Ivt7zfYQ9BfGDDoJ9_mB1wgfxxXSOHvz0tyhHjlBJHbeP4jkwD6qo2HPCA6KknHRFYZka93DXYG/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/AVvXsEjL-btXie6rARXcF8pyQ45JTIvKAjAmH0hv4RLp_Te67reLgh99lG5MZaQJBBETYh2zncHOFVP8SOvtVL7iE6UhqzYQkqadbLwleVy9aCSunSS05U_VLUH43t2hPJ3XMf_OIGRD0nZXxse1/s1600/loading-related-namkna-blogspot-com.gif'/>
</div>
</div>

<script type="text/javascript">
var maxEntries = 7;
nocmtext = "No Comment";
cmtext = "Comments";
</script>
<script src="http://dl.dropbox.com/u/70549761/Ramdon-post/namkna-blogspot-com/rd-post-thumb.js" type="text/javascript"></script>
<script src="http://namkna.blogspot.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://namkna.blogspot.com/ thành URL địa chỏ blog của bạn vào.
Lưu ý: 
  • Thủ thuật lấy dữ liệu bài ngẫu nhiên từ feed do vậy blog bạn phải cài đặt feed. Nếu chưa đăng ký feed thì xem bài này/
  • Bạn nên downloaf file rd-post-thumb.js về và upload lên host riêng để đảm bảo sự ổn định và dùng lâu dài. nếu chưa có host thì bạn có thể dùng các hot free như google codedropbox:
   5-  Bấm Lưu Mẫu  (save template) lại. 
Chúc thành công! 
Theo:mothuthuat!
Chủ đề:

0 nhận xét:

Đăng nhận xét

Support : Guide | Blogspot Tips | Television | IDM | Software Free | Site Map | Back Link | Contact | ↑ back to top
Ghi rõ nguồn kynangblog.blogspot.com khi phát hành lại thông tin từ trang này
Copyright © 2011. KỸ NĂNG BLOG - All Rights Reserved
Design by KyNangBlog Edit Ky nang blog
Xem tốt nhất ở độ phân giải 1024 x 768 pixel
Six million kynangblog template byKyNangBlog
Blogger Gadgets