Sponsor Post

Best Telegram Group Link Collection - Updated

Saturday, 27 October 2018

How to Add Horizontal Random Post Widget to Blogger blog

Hello friends welcome to the Techtspot blog, today I will show you how to insert or add horizontal random post widget to Blogger blog with pictures.
How to Add Horizontal Random Post Widget to Blogger

What is Horizontal Random post widget?

Horizontal random post widget or gadget help a Blogger blog to show some random post in a horizontal way in our blog, every time any visitor visit our blog the horizontal random post are randomly show the blog post, this gadget show blog posts with images and title and you can also edit the gadget code very easily.

Why we need to add Horizontal Random Post widget in blog?

First this random posts gadget is not available by the blogger blog, when we add horizontal random post widget to our blog it will increase our blog design, here we give more post choice to visitor and they can easily select the random post which they like and you get some extra page-view, so let start the process to add horizontal random post widget to blogger blog, now let's start.  

These are Following Steps:- Step 1: Go to Blogger dashboard and click Layout then click the Add a Gadget link.
Add Horizontal Random Post Widget To Blogger 1
Step 2: Now select HTML/JavaScript gadget.
Add Horizontal Random Post Widget To Blogger 2
Step 3: Here paste the code in the content area and click to Save button.
Add Horizontal Random Post Widget To Blogger 3
Here I give Horizontal Random post widget codenow when you are adjust the image size of the gadget you just replace the Blue code number and when you change the number of post show in the gadget you just replace Red code number.
<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><ul id='random-posts'><script type='text/javascript'>var randomposts_number = 5;var randomposts_chars = 50;var randomposts_details = 'no';randomposts_details2 = '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 a=0;a<randomposts_number;a++){for(var b=!1,c=get_random(),d=0;d<randomposts_current.length;d++)if(randomposts_current[d]==c){b=!0;break}b?a--:randomposts_current[a]=c}}function get_random(){var a=1+Math.round(Math.random()*(total_randomposts-1));return a}</script><script type='text/javascript'>
function random_posts(a){for(var b=0;b<randomposts_number;b++){var c=a.feed.entry[b],d=c.title.$t;if("content"in c)var e=c.content.$t;else if("summary"in c)var e=c.summary.$t;else var e="";if(e=e.replace(/<[^>]*>/g,""),e.length<randomposts_chars)var f=e;else{e=e.substring(0,randomposts_chars);var g=e.lastIndexOf(" ");f=e.substring(0,g)+"&#133;"}for(var h=0;h<c.link.length;h++){if("thr$total"in c)var i=c.thr$total.$t+" "+randomposts_comments;else i=randomposts_commentsd;if("alternate"==c.link[h].rel){var j=c.link[h].href,k=c.published.$t;if("media$thumbnail"in c)var l=c.media$thumbnail.url;else l="http://3.bp.blogspot.com/-5SoVe1K6JSk/Utl0OOmucAI/AAAAAAAAF6E/hQghgD_EJdQ/s1600/no_thumb.png"}}document.write("<li>"),document.write('<img alt="'+d+'" src="'+l+'"/>'),document.write('<div class="random-title"><a href="'+j+'" rel="nofollow">'+d+"</a></div>"),"yes"==randomposts_details&&document.write('<span class="random-details">'+k.substring(8,10)+"."+k.substring(5,7)+"."+k.substring(0,4)+" - "+i)+"</span>","yes"==randomposts_details2&&document.write('<span class="random-summary">'+f)+"</span>",document.write('<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 style="font-size: 10px; float: right;"><br/><br/><a href="https://techtspot.blogspot.com/2018/10/add-horizontal-random-post-widget-to.html" rel="nofollow">Random Posts Widget</a></div>
Step 4: Now open the Blogger blog to check the results.

Now Visit the - Demo Blog to see the result.

Above I give you my demo blog link, where I enabling Horizontal Random post widget, in my blog I can adjust the gadget according to my blog height and width and when you enabling the horizontal random post gadget in your blog, you can also adjust the height & width just check the color in the code.

Read More:- 

11 comments:

  1. This widget about -random post- is so cool. It worked instantly, and you can easily change the size and the number of posts from the codes. Thank you very much

    ReplyDelete
  2. How to make login button in blogger?

    ReplyDelete
    Replies
    1. Hello

      First Select then page or post then copy the code and paste the HTML option now publish the page or post see the result

      The LOGIN button code >>>

      < button type="submit" >Login

      And more know about this visit W3Schools website

      Delete
  3. I want to put random posts from other blogspot not my own. Is it possible? How can I do that?

    ReplyDelete
    Replies
    1. Hello,
      above code don't have blog URL option, so you find other random posts code where you can put blog url, but when i check some code in the internet there are no code like that ...
      i think you can not put random posts from other blog are not possible .. thanks

      Delete
    2. Okay thanks anyway my friend.

      Delete
  4. Very cool and helpful. I've been looking for something like that for a long time. Does it take into account all topics to display on the blog?

    ReplyDelete
  5. there is no image showing in my blog???

    ReplyDelete
    Replies
    1. Hello, if there are not images in the gadget first you have to insert some images in your blog posts 1st or 2nd paragraph thanks ....

      Delete