Add Stylish Random Post Widget With Thumbnail in Blogger
Add Stylish Random Post Widget With Thumbnail in Blogger
how to Add Awesome random post widgets with thumbnail (with image) on the blogger. This widget will display a random post or article on a blogger.
Go to Blogger> Layout> Click add gadgets> Search for and add HTML / JavaScript and then copy all of the code in below in the widget> Once added click Save
Change the number 8 on the code var randomposts_number = 8; to show how many posts you want.
How to Add Stylish Random Post Widget in Blogger
Meanwhile, random post widgets will showing post randomly, either posting a popular, newest and longest though, in the amount specified in the configuration of the widget.
Random post Widget with the pictures that will be distributed in the article have been adjusted to optimize the image, which will improve both scores specify the image dimensions in gtmetrix.com and Google PageSpeed ??Insights. So the blog seem more SEO friendly.
How to install random post widget with thumbnails in Blogger
<style type=text/css>
#random-posts img{display:block;margin:0;margin-right:10px;padding:0;width:72px;height:72px;border:1px solid #f5f5f5;overflow:hidden;float:left}
#random-posts img:hover{opacity:0.6;}
ul#random-posts{background:#fff;list-style:none;margin:0;padding:5px 0 0;overflow:hidden;border-top:none;}
#random-posts a{color:#64707a;transition:all .3s;display:block}
#random-posts li:hover a,#random-posts a:hover{color:#4285f4;}
.random-summary{font-size:13px;color:999}
#random-posts li{background-color:#fff;margin:0;padding:10px;min-height:65px;position:relative;border-bottom:1px solid #f5f5f5;transition:all .3s;}
</style>
<ul id=random-posts>
<script type=text/javaScript>
var randomposts_number = 8;
var randomposts_chars = 0;
var randomposts_details = no;
var randomposts_comments = Comments;
var randomposts_commentsd = Comments Disabled;
var randomposts_current = [];
var total_randomposts = 0;
var randomposts_current = new Array(randomposts_number);
function randomposts(json) {
total_randomposts = json.feed.openSearch$totalResults.$t
}
document.write(<script type="text/javascript" src="/feeds/posts/default?alt=json-in-script&max-results=0&callback=randomposts"></script>);
function getvalue() {
for (var i = 0; i < randomposts_number; i++) {
var found = false;
var rndValue = get_random();
for (var j = 0; j < randomposts_current.length; j++) {
if (randomposts_current[j] == rndValue) {
found = true;
break
}
};
if (found) {
i--
} else {
randomposts_current[i] = rndValue
}
}
};
function get_random() {
var ranNum = 1 + Math.round(Math.random() * (total_randomposts - 1));
return ranNum
};
</script>
<script type=text/javaScript>
function random_posts(json) {
for (var i = 0; i < randomposts_number; i++) {
var entry = json.feed.entry[i];
var randompoststitle = entry.title.$t;
if (content in entry) {
var randompostsnippet = entry.content.$t
} else {
if (summary in entry) {
var randompostsnippet = entry.summary.$t
} else {
var randompostsnippet = "";
}
};
for (var j = 0; j < entry.link.length; j++) {
if (thr$total in entry) {
var randomposts_commentsnum = entry.thr$total.$t + + randomposts_comments
} else {
randomposts_commentsnum = randomposts_commentsd
}; if (entry.link[j].rel == alternate) {
var randompostsurl = entry.link[j].href;
var randomposts_date = entry.published.$t;
if (media$thumbnail in entry) {
var randompoststhumb = entry.media$thumbnail.url
} else {
randompoststhumb = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbR5wuhrvuiqgeVSTwCvvPxTauHZIZgSJpbRCQvTUnb4XOoG-jakymLO44psRQeOZiaksUhSjbenaZ9J6JMoaKIl_UsxqUX6T7fc654SYzXZWMSPoI4AHZ9M0hb5bTWptZycq6Dum0big/s1600/bungfrangki_no_image_100.png"
}
}
};
document.write(<li>);
document.write(<a href=" + randompostsurl + " rel="nofollow"><img alt=" + randompoststitle + " src=" + randompoststhumb + " width=" + 72 + " height=" + 72 + "/></a>);
document.write(<div><a href=" + randompostsurl + " rel="nofollow"> + randompoststitle + </a></div>);
if (randomposts_details == yes) {
document.write(<span><div class="random-info"> + randomposts_date.substring(8, 10) + . + randomposts_date.substring(5, 7) + . + randomposts_date.substring(0, 4) + - + randomposts_commentsnum) + </div></span>
};
document.write(<br/><div class="random-summary"> + randomposts_snippet + </div><div style="clear:both"></div></li>)
}
};
getvalue();
for (var i = 0; i < randomposts_number; i++) {
document.write(<script type="text/javascript" src="/feeds/posts/default?alt=json-in-script&start-index= + randomposts_current[i] + &max-results=1&callback=random_posts"></script>)
};
</script>
</ul>
<div class=clear/>
</div>Save and see the results.
Comments
Post a Comment