Featured Horizontal Posts Widget for blogger

Featuring posts in horizontal ways is one the most used technique by the popular blogs. It gives first look to the reader about idea and trending stories  of your blog. The reader comes to your blog not to care for you popular posts aside but with a particular need or help they actual want. all their focus is usually on the content of your post. With particular view point to this the horizontal posts are been placed with widget just above your post title.

We have Two Codes found for this Tutorial (BLOGGER)

You can add this simply choosing ADD A NEW HTML/JAVASCRIPT widget in Layout

Tutorial Code 1#

<script language="JavaScript">

imgr = new Array();

imgr[0] = "Your-Image-Url"; //default-image

imgr[1] = "Your-Image-Url"; //default-image

imgr[2] = "Your-Image-Url"; //default-image

imgr[3] = "Your-Image-Url"; //default-image

imgr[4] = "Your-Image-Url"; //default-image

showRandomImg = true;

tablewidth = 248;

cellspacing = 8;

borderColor = "#ffffff";

bgTD = "#ffffff";

imgwidth = 118;

imgheight = 100;

fntsize = 12;

acolor = "#666";

aBold = true;

icon = " ";

text = "comments";

showPostDate = false;

summaryPost = 50;

summaryFontsize = 11;

summaryColor = "#666";

icon2 = " ";

numposts = 5;

home_page = "http://Your-Blogspot-Home-Page";

</script>

<script src="http://yourjavascript.com/22231534053/related-posts-with-thumbnails-min.js"

type="text/javascript"></script>

Alternative Code 2#

. Go to blogger.com account

<b:if cond='data:blog.pageType == &quot;item&quot;'> <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/AVvXsEiDRtc-dKmUqHsowxwLyIZfVTXATkGBXIALv-iP0ffrGstJk8fX1TClmlA1eTVtzARiu5-KSy9460TE1oC_Ib1LPEuwmn8TWxN8vEl5_GWZ80xyq6DxTuhlMIizIS6tL0KbmhD_6LeL0s8/s1600/no_image.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> </b:if>

That's all above the two codes you can chose one which suites you the most. you have to customize the code as per your own requriment.
Thanks For Reading
Regards,