Tạo tiện ích bài viết ngẫu nhiên theo nhãn cho blogspot
Ưu điểm của tiện ích này là chấp nhận ảnh của bên thứ 3 có nghĩa là ảnh đại diện sao chép link từ nguồn không phải là blogspot hay picasa thì nó vẫn lấy được ảnh thumbnail cho tiện ích.
Cách tiến hành:
1- Đăng nhập vào Blog2- 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:
* {margin:0;padding:0;}
#random-posts {
width:300px;
}
#random-posts h3 {
background:url(https://4.bp.blogspot.com/-KHAtb_JzkQk/UaWpwsottqI/AAAAAAAAatU/0kQWXlwrb-I/s1600/img-bg-rd1-Dautocrazy-Blog-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://2.bp.blogspot.com/-Mfs4edjPEDU/UaWp58_dAJI/AAAAAAAAatc/dzRZEReHLvI/s1600/loading-related-Dautocrazy-Blog-com.gif'/>
</div>
</div>
<script type="text/javascript">
var maxEntries = 7;
nocmtext = "No Comment";
cmtext = "Comments";
</script>
<script type='text/javascript'>
//<![CDATA[
function getRandomPosts(json) {
var numPosts = json.feed.openSearch$totalResults.$t;
var indexPosts = new Array();
var img = new Array();
for (var i = 0; i < numPosts; ++i) {
indexPosts[i] = i;
}
indexPosts.sort(function() {return 0.5 - Math.random()});
if (maxEntries > numPosts) {
maxEntries = numPosts;
}
var container = document.getElementById('random-posts');
var ul = document.createElement('ul');
for (i = 0; i < maxEntries; ++i) {
var entry = json.feed.entry[indexPosts[i]];
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
pcm = entry.link[k].title.split(" ")[0];
break;
}
}
postdate = entry.published.$t;
var month = [1,2,3,4,5,6,7,8,9,10,11,12];
var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
var day = postdate.split("-")[2].substring(0,2);
var m = postdate.split("-")[1];
var y = postdate.split("-")[0];
for(var u2=0;u2<month.length;u2++){
if(parseInt(m)==month[u2]) {
m = month2[u2] ; break;
}
}
if (pcm==0) {var comment = " (" +nocmtext+ ") ";}
else {var comment = " (" + pcm + " " +cmtext+ ") ";}
var comment0 = "<br/>" +comment + "<br/><font style='font-weight:normal;font-size:11px; color:#888;'>posted in : "+day+ "-" + m + "-" + y + "</font>";
var s = entry.content.$t;
var a=s.indexOf("<img");
var b=s.indexOf("src=\"",a);
var c=s.indexOf("\"",b+5);
var d=s.substr(b+5,c-b-5);
var li = document.createElement('li');
if (i==0) { li.id = 'li-rd'; }
if ((i%2==0)&&(i!=0)) {li.id = 'li-rd-chan';}
if (i%2==1) {li.id = 'li-rd-le';}
var img = document.createElement('img');
if (i==0) { img.id = 'rd-thumb0'; }
else { img.id = 'rd-thumb'; }
if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!=""))
{img.src = d;}
else
{ img.src="http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png";}
var em = document.createElement('i');
if (i==0) { em.innerHTML = comment0; }
else { em.innerHTML = comment; }
var a = document.createElement('a');
a.title = entry.title.$t;
for (var j = 0; j < entry.link.length; ++j) {
if (entry.link[j].rel == 'alternate') {
a.href = entry.link[j].href;
break;
}
}
a.appendChild(document.createTextNode(entry.title.$t));
li.appendChild(img);
li.appendChild(a);
li.appendChild(em);
ul.appendChild(li);
}
container.appendChild(ul);
document.getElementById("rd-posts-loading").style.display = "none";
}
//]]>
</script>
<script src="http://kartriderdautocrazy01.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://kartriderdautocrazy01.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.
- 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.
Thành:
Nguồn:Fandung
Không có nhận xét nào :
Đăng nhận xét
Bạn có thể sử dụng biểu cảm yahoo