Như chúng ta đã biết trong các template blogspot có sẵn thì đa số là có đầy đủ những tiện ích cần thiết như bài viết liên quan, chia sẻ mạng xã hội, phân trang cho blog nhưng ít khi có tiện ích bài viết ngẫu nhiên cho blogspot. Hôm nay webbee.vn sẽ hướng dẫn tạo bài viết ngẫu nhiên cho blogspot cho các bạn mới làm quen với blogspot.
Khi Cài tiện ích bài viết ngẫu nhiên trên blog không chỉ những giúp người truy cập có thể đọc được những bài viết mà bạn đã viết trước đó mà còn giúp độc giả sẽ ở lại trang website của bạn lâu hơn.
Hướng Dẫn Tạo Bài Viết Ngẫu Nhiên Cho Blogspot
Thế nhưng tiện ích này load hơi nặng nên các bạn lưu ý đặt ở vị trí cho thích hợp trên blog của bạn để tránh làm chậm trang blog của bạn.
Cách làm:
Sau khi đăng nhập bạn có thể vào phần Bố cục và thêm một tiện ích HTML/Javasript. Sau đó paste đoạn code này vào trong tiện ích đó trong blog của bạn:
<!– Bai viet ngau nhien – up by share123.vn –>
<style type=”text/css”>
*{margin:0;padding:0;}
#random-posts{border-left:1px #ccc solid;border-bottom:1px #ccc solid;
border-right:1px #ccc solid;background:#fff;margin:0 0 10px;padding:0;}
ul,li{list-style:none;}
#random-posts li{height:65px!important;font-weight:700;border-bottom:1px solid #dedede;padding:5px 3px 0 5px;}
#random-posts hover img{-webkit-transform:rotate(-360deg);-moz-transform:rotate(-360deg);-o-transform:rotate(-360deg);}
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-bottom:1px solid #dedede;height:65px!important;font-weight:700;}
li#li-rd-chan{background:#fff;}
div#info h1{font-size:20px;}
div#footer{padding-left:135px;}
img#rd-thumb,img#rd-thumb0{background:#fff;margin-right:8px;
float:left;height:50px;width:50px;margin-top:0;border:1px solid #ddd;border-radius:50px;
-webkit-transition:all .5s ease-out;-moz-transition:all .5s ease;-o-transition:all .5s ease;padding:3px;}
</style>
<div id=”random-posts”>
<div id=’rd-posts-loading’>
<img align=’absmiddle’ src=’http://2.bp.blogspot.com/
-Mfs4edjPEDU/UaWp58_dAJI/AAAAAAAAatc/dzRZEReHLvI/s1600/loading-related-Dautocrazy-Blog-com.gif’/>
</div>
</div>
<script type=”text/javascript”>
var maxEntries = 5;nocmtext = “0 comment”;
cmtext = “Comment”;
</script>
<script type=’text/javascript’>
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:0px;
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=”https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0_ZMrC01KAvpt47lBr6Wk1C2niASH4vjTVWTmuKWyWtzVAshZdRbZ4KxqLyoU38Vs3PNdu0sxmVtQSr7c350LdnuPAgTlUfoNRoDmAgFFyRZAlvPIZTeiHSauNpVcCRrXcxuMXew-Uo0/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=”/feeds/posts/default?alt=json-in-script&callback=getRandomPosts&max-results=9999″
type=”text/javascript”></script>
Các bạn lưu ý đến java sau:
<script src=”/feeds/posts/default?alt=json-in-script&callback=getRandomPosts&max-results=9999″ type=”text/javascript”></script>
Để hiển thị bài mới nhất thì để nguyên như trên, còn muốn chỉ hiển thị nhãn thì thay đoạn java trên bằng đoạn java dưới
<script src=”/feeds/posts/default/-/nhãn_của_bạn?alt=json-in-script&callback=getRandomPosts&max-results=9999″ type=”text/javascript”></script>
Nguồn webbee.vn