 |
| Demo |
Trong
template blogspot có sẵn thì thường 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
share123.vn sẽ hướng dẫn tạo tiện ích bài viết ngẫu nhiên có hình ảnh cho các bạn mới biết blogspot.
Có tiện ích bài viết ngẫu nhiên không chỉ giúp độc giả có thể đọc được những bài mà bạn post từ lâu mà còn giúp độc giả ở lại trang web của bạn lâu hơn.
Tuy nhiên tiện ích này load hơi nặng nên các bạn lưu ý đặt ở vị trí cho phù hợp trên blog của bạn để tránh tối đa 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 (nếu chưa có hoặc muốn hiển thị ở vị trí nào đó thì có thể tham khảo bài
Thêm tiện ích HTML/Javacript bất kỳ trong blogspot) sau đó paste đoạn code này vào trong tiện ích đó:
<!-- 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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinMIzGRmPrSsti1j_W61px0Nh440dln2N1Vy6HUdntebqo_o9xkV2GwcwhWAw70xE3tfNBcJmNwK9NW4xTBwMVVDvkPTJ4PBw2CyF6cfalIwJgKPsFWTa0coWSe1Mur3s2ZyNrPTcibUM/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/AVvXsEjp5Q7YdtWpww1ZoaBQFDBBQY3L8i4XiEhL_Buiejpb6gg81sDhL9oqKphZ3c5Ir5eO1pDmwD4JLesoXJMqbiUbzUE2DXYLNjc1DxZ3BbCjWvpb14kUXMBmn5TOGqKoebh6e3Ba2am8Ww/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 chú ý đến java sau:
<script src="/feeds/posts/default?alt=json-in-script&callback=getRandomPosts&max-results=9999" type="text/javascript"></script> Nếu muốn 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> Share123.vn chúc bạn thành công
Trong đó:
