Add Random Post widget with Large wide Image thumbnail
Random Post widget is one of the
most significant widget which can bring more page views daily. A random post
widget means visitors will see different post after refresh of each page. If
you add this widget then it will able to display your all post randomly which
create a change to get click by visitors. Suppose your blog has more than 500
post but don’t think visitors will go through all of your posts. Because older
post always ignore by blog visitors, even those are very important and higher
quality content. So random post widget only the way to display your old and new
posts randomly. Where your older post also get priority.
I have designed this random post
widget not like older widget that you would get over the net. Most of them are
having small image thumbnail or text only. But this random post widget will
able to display large thumbnail with post title and summary which is rare.
Those blogger are using wide screen blogger template this is the perfect widget
for them. If you use this widget in blog sidebar then it will make your blog
beautiful. You would see that wide image thumbnail holding post title and
summary by a transparent background. You may have seen this widget in Wordpress
blog but rare in Google blog.
Features of random post widget
- Built with pure CSS
- Fast loading
- Large Image thumbnails
- Able to display post title with image
- Post summary within the image thumbnail
- Colored title and description
So if you want to install this
widget then follow the simple steps from below
Step 1 Log in to your Blogger account and Go to your Blogger Dashboard
Step 2 Go to your Layout tab.
Step 3 Click on "Add a Gadget" then Select "HTML/JavaScript" Widget.
Step 4 Now Copy the below code and Paste it in "HTML/JavaScript" Gadget.
<center>
<style>
#BloggerSpiceRandomPost {background-color:transparent;width: 300px;}
#BloggerSpiceRandomPostHolder {position: relative;height: 140px;width: 295px;font-family:Georgia;}
#BloggerSpiceRandomPost li {margin-left: -28px;margin-bottom: 10px;width: 295px;height: 140px;overflow: hidden;margin-top: 10px;padding: 0;list-style: none;}
#BloggerSpiceRandomPost li:first-child {margin-top: 5px;}
.BloggerSpiceRandomPostBS h2 {display: block;font-size:14px;margin: 5px 0px;}
.BloggerSpiceRandomPostBS {background: transparent url(http://1.bp.blogspot.com/-iLkwGbH1i6U/UiL32PyuSpI/AAAAAAAAEgs/1eWFbeG7YR4/s1600/BS+transparent+BG.png) repeat scroll 0 0;color: #04BDFA;padding: 2px;position: absolute;text-align: left;bottom: 0px;z-index: 99999;font-size:12px;}
</style>
<div id='BloggerSpiceRandomPost'>
<script style='text/javascript'>
//<![CDATA[
/*
Large Thumbnail Random Post Widget
by www.bloggerspice.com.
*/
function showgalleryposts(json){var numPosts=json.feed.openSearch$totalResults.$t;var indexPosts=new Array();document.write('<ul>');for(var i=0;i<numPosts;++i){indexPosts[i]=i}if(random_posts==true){indexPosts.sort(function(){return 0.5-Math.random()})}if(numposts_BloggerSpice>numPosts){numposts_BloggerSpice=numPosts}for(i=0;i<numposts_BloggerSpice;++i){var entry_BloggerSpice=json.feed.entry[indexPosts[i]];var posttitle_BloggerSpice=entry_BloggerSpice.title.$t;for(var k=0;k<entry_BloggerSpice.link.length;k++){if(entry_BloggerSpice.link[k].rel=='alternate'){posturl_BloggerSpice=entry_BloggerSpice.link[k].href;break}}if("content"in entry_BloggerSpice){var postcontent_BloggerSpice=entry_BloggerSpice.content.$t}s=postcontent_BloggerSpice;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){var thumburl_BloggerSpice=d}else var thumburl_BloggerSpice='http://1.bp.blogspot.com/-ndayGrJ6g-4/UiL3zwHKcfI/AAAAAAAAEgk/2egWhJgnr3Y/s320/BS+No+Image+Dark.jpg';document.write('<a href="'+posturl_BloggerSpice+'"><li><div id="BloggerSpiceRandomPostHolder"><span class="BloggerSpiceRandomPostBS"><h2>');document.write(posttitle_BloggerSpice+'</h2>');var re=/<\S[^>]*>/g;postcontent_BloggerSpice=postcontent_BloggerSpice.replace(re,"");if(showpostsummary_BloggerSpice==true){if(postcontent_BloggerSpice.length<numchars_BloggerSpice){document.write(postcontent_BloggerSpice);document.write('</span>')}else{postcontent_BloggerSpice=postcontent_BloggerSpice.substring(0,numchars_BloggerSpice);var quoteEnd_BloggerSpice=postcontent_BloggerSpice.lastIndexOf(" ");postcontent_BloggerSpice=postcontent_BloggerSpice.substring(0,quoteEnd_BloggerSpice);document.write(postcontent_BloggerSpice+'');document.write('</span>')}}document.write('<img src="'+thumburl_BloggerSpice+'" width="'+post_image_width+'" height="'+post_image_height+'"/></div>');document.write('</li></a>')}document.write('</ul>')}
//]]>
</script>
<script style='text/javascript'>
var showpostthumbnails_BloggerSpice = true;
var showpostsummary_BloggerSpice = true;
var random_posts = true;
var numchars_BloggerSpice= 100;
var numposts_BloggerSpice= 4;var post_image_width= 295;var post_image_height = 140;</script>
<script src='http://www.bloggerspice.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=999999'></script>
</div>
</center>
Customization
- Change var numposts_BloggerSpice= 4; value for the number of posts for display
- Change var post_image_width= 295; the value for image width
- Change var post_image_height = 140; the value for image width
- Alter www.bloggerspice.com with your blog address
