Horizontal Random Post Widget + Thumbnail For Blogger

This Horizontal Random Post Widget With Thumbnail is alike to the horizontal recent post widget that currently i use as above the body of this blog, throw up your eyes a little and you'll see what i mean with horizontal recent post widget. The widget, the horizontal random post, is like a content slider that usually used to show featured contents on a website, the widget will automatically slide the contents towards left side and will stop sliding if you hover your curser over it.

The widget takes some script codes combined with some line of CSS code to style the appearance. It may affect your blog load but it should not affect too much.

Best place for the widget would be above the body or on footer section. I'm sure you don't want to place the widget on your main page or sidebar, cause every crawlers in this world will laugh out loud to see that.

How To Add Horizontal Random Post Widget To Blogger?

It's easy. You only have to add a "HTML/Javascript" widget through blogger design and put the below code in the text box:

<style type="text/css">
#random-posts li {width:125px;height:150px;margin-right:12px;float:left;list-style:none;position:relative}
#random-posts li:last-child {margin-right:0}
#random-posts li img {width:125px;height:150px}
#random-posts li img a {border:#333 solid 2px}
#random-posts li .isinyako {position:absolute;width:250px;top:-150px;z-index:2;background-color:#F0F0F0;padding:5px;font-size:90%;border-bottom:2px solid black;transition:all 0.6s cubic-bezier(1,2,0,0) 0s;-moz-transition:all 0.6s cubic-bezier(1,2,0,0) 0s;-webkit-transition:all 0.6s cubic-bezier(1,2,0,0) 0s;-o-transition:all 0.6s cubic-bezier(1,2,0,0) 0s;visibility:hidden;opacity:0}
#random-posts li:last-child .isinyako{right:0}
#random-posts li:hover .isinyako{top:-40px;opacity:1;visibility:visible}
.isinyako span{font-size:90%;color:#B30B0B}
.isinyako p{font-size:90%;}
</style>

<span class="glap"><ul id="random-posts">

<script type="text/javaScript">
var rdp_numposts = 5; var rdp_snippet_length = 150; var rdp_info = 'no'; var rdp_comment = 'Comments'; var rdp_disable = 'Turn off comments'; var rdp_current = []; var rdp_total_posts = 0; var rdp_current = new Array(rdp_numposts);
function totalposts(a){rdp_total_posts=a.feed.openSearch$totalResults.$t} document.write('<script type="text/javascript" src="/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalposts"><\/script>');
function getvalue(){for(var b=0;b<rdp_numposts;b++){var d=false;var c=get_random();for(var a=0;a<rdp_current.length;a++){if(rdp_current[a]==c){d=true;break}}if(d){b--}else{rdp_current[b]=c}}}
function get_random(){var a=1+Math.round(Math.random()*(rdp_total_posts-1));return a};
</script>
<script type="text/javaScript">
function random_posts(n){a=location.href;y=a.indexOf("?m=0");for(var f=0;f<rdp_numposts;f++){var l=n.feed.entry[f];var m=l.title.$t;if("content" in l){var o=l.content.$t}else{if("summary" in l){var o=l.summary.$t}else{var o=""}}o=o.replace(/<[^>]*>/g,"");if(o.length<rdp_snippet_length){var k=o}else{o=o.substring(0,rdp_snippet_length);var b=o.lastIndexOf(" ");k=o.substring(0,b)+"&#133;"}for(var e=0;e<l.link.length;e++){if("thr$total" in l){var h=l.thr$total.$t+" "+rdp_comment}else{h=rdp_disable}if(l.link[e].rel=="alternate"){var d=l.link[e].href;if(y!=-1){d=d+"?m=0"}var g=l.published.$t;if("media$thumbnail" in l){var c=l.media$thumbnail.url}else{c="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8gn9eBOiApKZRjfO8eQubAe-MgJD2GsQnj18rMdO_awjAoYb4_UzRuk8-q2p9neARTfHcpnCPyN6ekx1t3p7BGkgeY2q8gfQrnloMLYDAZoMHFx-Q5zR9ZrTZCqnAtqWyw8dC7WhqGXJY/s1600/No-Image-736965.jpg"}
}} document.write("<li>"); document.write('<a href="'+d+'" rel="nofollow"><img alt="'+m+'" src="'+c+'"/></a>'); document.write('<div class="isinyako"><h5>'+m+"</h5>");if(rdp_info=="yes"){document.write("<span>"+g.substring(8,10)+"/"+g.substring(5,7)+"/"+g.substring(0,4)+" - "+h+"</span>")} document.write("<p>"+k+"</p></div>"); document.write('<div style="clear:both"></div></li>')}}getvalue(); for(var i=0;i<rdp_numposts;i++){document.write('<script type="text/javascript" src="/feeds/posts/default?alt=json-in-script&start-index='+rdp_current[i]+'&max-results=1&callback=random_posts"><\/script>')};
</script>
</ul></span>
<script type='text/javascript'> //<![CDATA[ function resizeThumb(e,b){var c=document.getElementById(e),d=c.getElementsByTagName("img");for(var a=0;a<d.length;a++){d[a].src=d[a].src.replace(/\/s72\-c/,"/s"+b+"-c");d[a].width=b;d[a].height=b}}resizeThumb("random-posts",120); //]]></script>

Here to copy
<style type="text/css"> #random-posts li {width:125px;height:150px;margin-right:12px;float:left;list-style:none;position:relative} #random-posts li:last-child {margin-right:0} #random-posts li img {width:125px;height:150px} #random-posts li img a {border:#333 solid 2px} #random-posts li .isinyako {position:absolute;width:250px;top:-150px;z-index:2;background-color:#F0F0F0;padding:5px;font-size:90%;border-bottom:2px solid black;transition:all 0.6s cubic-bezier(1,2,0,0) 0s;-moz-transition:all 0.6s cubic-bezier(1,2,0,0) 0s;-webkit-transition:all 0.6s cubic-bezier(1,2,0,0) 0s;-o-transition:all 0.6s cubic-bezier(1,2,0,0) 0s;visibility:hidden;opacity:0} #random-posts li:last-child .isinyako{right:0} #random-posts li:hover .isinyako{top:-40px;opacity:1;visibility:visible} .isinyako span{font-size:90%;color:#B30B0B} .isinyako p{font-size:90%;} </style> <span class="glap"><ul id="random-posts"> <script type="text/javaScript"> var rdp_numposts = 5; var rdp_snippet_length = 150; var rdp_info = 'no'; var rdp_comment = 'Comments'; var rdp_disable = 'Turn off comments'; var rdp_current = []; var rdp_total_posts = 0; var rdp_current = new Array(rdp_numposts); function totalposts(a){rdp_total_posts=a.feed.openSearch$totalResults.$t} document.write('<script type="text/javascript" src="/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalposts"><\/script>'); function getvalue(){for(var b=0;b<rdp_numposts;b++){var d=false;var c=get_random();for(var a=0;a<rdp_current.length;a++){if(rdp_current[a]==c){d=true;break}}if(d){b--}else{rdp_current[b]=c}}} function get_random(){var a=1+Math.round(Math.random()*(rdp_total_posts-1));return a}; </script> <script type="text/javaScript"> function random_posts(n){a=location.href;y=a.indexOf("?m=0");for(var f=0;f<rdp_numposts;f++){var l=n.feed.entry[f];var m=l.title.$t;if("content" in l){var o=l.content.$t}else{if("summary" in l){var o=l.summary.$t}else{var o=""}}o=o.replace(/<[^>]*>/g,"");if(o.length<rdp_snippet_length){var k=o}else{o=o.substring(0,rdp_snippet_length);var b=o.lastIndexOf(" ");k=o.substring(0,b)+"&#133;"}for(var e=0;e<l.link.length;e++){if("thr$total" in l){var h=l.thr$total.$t+" "+rdp_comment}else{h=rdp_disable}if(l.link[e].rel=="alternate"){var d=l.link[e].href;if(y!=-1){d=d+"?m=0"}var g=l.published.$t;if("media$thumbnail" in l){var c=l.media$thumbnail.url}else{c="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8gn9eBOiApKZRjfO8eQubAe-MgJD2GsQnj18rMdO_awjAoYb4_UzRuk8-q2p9neARTfHcpnCPyN6ekx1t3p7BGkgeY2q8gfQrnloMLYDAZoMHFx-Q5zR9ZrTZCqnAtqWyw8dC7WhqGXJY/s1600/No-Image-736965.jpg"} }} document.write("<li>"); document.write('<a href="'+d+'" rel="nofollow"><img alt="'+m+'" src="'+c+'"/></a>'); document.write('<div class="isinyako"><h5>'+m+"</h5>");if(rdp_info=="yes"){document.write("<span>"+g.substring(8,10)+"/"+g.substring(5,7)+"/"+g.substring(0,4)+" - "+h+"</span>")} document.write("<p>"+k+"</p></div>"); document.write('<div style="clear:both"></div></li>')}}getvalue(); for(var i=0;i<rdp_numposts;i++){document.write('<script type="text/javascript" src="/feeds/posts/default?alt=json-in-script&start-index='+rdp_current[i]+'&max-results=1&callback=random_posts"><\/script>')}; </script> </ul></span> <script type='text/javascript'> //<![CDATA[ function resizeThumb(e,b){var c=document.getElementById(e),d=c.getElementsByTagName("img");for(var a=0;a<d.length;a++){d[a].src=d[a].src.replace(/\/s72\-c/,"/s"+b+"-c");d[a].width=b;d[a].height=b}}resizeThumb("random-posts",120); //]]></script>

Just download the image and upload on your own file hosting, and set the width and height as it takes. That's it..

This is not a widget by me, yet i won't tell you a source. :)