Boost Your Blog's Engagement with This Must-Have Dynamic Random Posts Widget

Infinite Scoop 0

Blogspot displays a list of random posts on your blog. Drive traffic to older posts and generate more page views.

Blogger random posts widget shows a random list of your blog posts with thumbnails, title, comments count, date, label tag and author avatar. It is really important to send traffic to your old posts and keep highlighting them. Random Posts gadget helps your readers to take a quick look at some of the older posts that they might have missed reading. It attracts readers attention towards oldest posts thus helping you with increased pageviews and higher revenue. This widget displays both label links and author avatar which are the two features first time introduced for blogspot blogs and thus makes this widget extremely unique. It is built using Blogger JSON Feeds technique that we have discussed in detail.





Add Random Posts Widget To Blogger

Follow the steps below to install random posts widget on a blogspot blog:

  1. Go To Blogger > Template
  2. Backup your template.
  3. Click "Edit HTML".
  4. Just below <head> tag paste the following CSS source links:
<link href='http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css' rel='stylesheet'/>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
      5. Next search ]]></b:skin> and just above it paste the following code:

         

/*######## Random Posts Widget By Theinfinitescoop.in ########*/

.tslist {list-style-type:none;overflow:hidden; margin: 10px 0px 0px 10px!important; width:300px; padding:0px!important;}

.tslist li {margin:0px auto 10px auto; clear:both; color:#666; font-family:helvetica; font-size:12px; border-bottom:1px solid #eee; overflow:hidden; position:relative}

.tslist li a { color:#666; text-decoration:none; }

.tslist i{color:#999; padding-right:5px; }

.tslist .iline{line-height:2em; margin-top:3px;}

.tslist .icontent{line-height:1.5em; margin-top:5px; clear:both}

.tslist div span{margin:0 7px 0 0; display:inline-block;font-weight: normal; }

.tslist .tstitle {font-family:oswald; font-size:13px; color:#838383; font-weight:normal; text-decoration:none;}

.tslist .tstitle:hover, .tslist .itotal a:hover  {color:#333; text-decoration:none;}

.tslist .iedit a{text-decoration:none; color:#999; cursor:pointer}

.tslist .iedit:before, .tslist .iauthor:before, .tslist .itag:before, .tslist .icomments:before, .tslist .idate:before, .tslist .itotal span:before{font-family:fontAwesome; position:relative; padding-right:8px; color:#999;}

.tslist .iauthorpic{width: 17px;height: 17px;border-radius: 50%;

float: none; display: inline-block; margin:0px 0px 0px 0px; padding-right:3px; position:relative; top:3px;}

.tslist .itag{    color: #fff;position: absolute;left: 9px;top: 9px;display: inline-block;font-size: 11px;width: 100px; height:22px;    overflow: hidden;}

.tslist .itag a{background:#000;background:rgba(0,0,0,0.7);text-decoration:none;color:#fff;padding:4px 5px;text-transform:capitalize;line-height: 2em;font-family: arial;font-size: 11px;border:1px solid #333;}

.tslist .itag a:hover{background:#0088FF;border: 1px solid #0088FF; color:#fff; text-decoration:none;}

.tslist .iFeatured{overflow:hidden;position:relative;float:left;margin:0 10px 10px 0;padding:0;}

.tslist .iFeatured a {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhicJCd035alhW-RpoxuhSYs6u6OzaMfaMrLlMz15uKu8vWaPQ48E3K5EmA5EejWpRVEyd5p_dCoME5O_S6gULFz7PpnhvOMFh6obXHO5C-iXoxPBjsN6YYx5A-J1UtN78aiEmCIDn4mEo/s100/ts-bg1.png) 0 0;padding:6px 5px 4px 6px;display: block;}

.tslist .iFeatured img{width:100px;height:60px;-moz-transition:all .3s;-webkit-transition:all .3s;transition:all .3s;    border: 1px solid #000;       border-radius: 2px;}

.tslist .iFeatured:hover img{ opacity:1; -moz-transform:scale(1.4);-webkit-transform:scale(1.4);transform:scale(1.4)}

.tslist .icomments a{color:#000; font-family: arial;font-size:12px;}

.tslist .icomments a:hover{text-decoration:underline}

.tslist .icomments:before {content:'\f086'; padding:0px 3px 0px 7px; color:#0088FF;}

.tslist .idate:before {content:'\f073';padding-right:4px}

.tslist .iedit:before {content:'\f040';}

.tslist .imore {font-size:16px; font-weight:bold; text-decoration:none; color:#666;}

.tslist .itotal {color:#999;  padding:5px 0px; }

.tslist .itotal a {font-family:"Droid Sans"; font-size:12px; font-weight:normal; color:#999; text-decoration:none}

.tslist .itotal span:before {content:'\f07c';}

.tslist .itotal span font {padding:0px 3px; color:#333; font-family:droid sans; font-size:15px; font-weight:bold}

 

6.Save your template.

7.Login or Go to your Blogger Dashboard -> Layout



8.Select "Add a Gadget"

9.Choose "HTML/JavaScript" gadget

10.Paste the following code inside it:

<script type='text/javaScript'>

//#################### Defaults

var ListBlogLink = "https://www.theinfinitescoop.in/";

var ListCount = 3;

var ChrCount = 85;

var TitleCount = 70;

var ImageSize = 150;

var showcomments = "on";

var showdate = "off";

var showauthor = "on";

var showthumbnail = "on";

var showlabel = "on";

var showcontent = "off";

 

var RandomArray = [];

var TotalPosts  = 0;

var RandomArray = new Array(ListCount);

 

function TotalCount(json) {

    TotalPosts   = json.feed.openSearch$totalResults.$t

}

document.write('<script type=\"text/javascript\" src=\"https://www.theinfinitescoop.in/feeds/posts/default?alt=json-in-script&callback=TotalCount\"><\/script>');

 

function GenerateNum() {

    for (var i = 0; i < ListCount ; i++) {

    for (var j = 0; j < RandomArray.length; j++){

    var RandomNum = Math.floor(Math.random() * (TotalPosts ) + 1);

    RandomArray[i] = RandomNum; }

                                                                  }

}

</script>

<script type='text/javaScript'>

 

document.write('<ul class="tslist">');

//################ Function Start

function tsrandom(json) {

for (var i = 0; i < ListCount; i++)

{

 

//################### Variables Declared

var listing= ListImage = ListUrl = ListTitle = ListImage = ListContent = ListConten = ListAuthor = ListTag = ListDate = ListUpdate = ListComments = thumbUrl = TotalPosts = sk = AuthorPic= ListMonth = Y = D = M = m = YY = DD = MM = mm = TT =  "";

 

//################### Category

if (json.feed.entry[i].category != null)

{

for (var k = 0; k < json.feed.entry[i].category.length; k++) {

ListTag += "<a href='"+ListBlogLink+"/search/label/"+json.feed.entry[i].category[k].term+"'>"+json.feed.entry[i].category[k].term+"</a>";

if(k < json.feed.entry[i].category.length-1)

{ ListTag += " ";}

}

}

 

//################### URL

for (var j = 0; j < json.feed.entry[i].link.length; j++) {

      if (json.feed.entry[i].link[j].rel == 'alternate') {

        break;

      }

    }

ListUrl= "'" + json.feed.entry[i].link[j].href + "'";

 

//################### Info

TotalPosts = json.feed.openSearch$totalResults.$t;

if (json.feed.entry[i].title!= null)

{

ListTitle= json.feed.entry[i].title.$t.substr(0, TitleCount);

}

if (json.feed.entry[i].thr$total)

{

ListComments= "<a href='"+json.feed.entry[i].link[j].href+"#comment-form'>"+json.feed.entry[i].thr$total.$t+"</a>";

}

ListAuthor= json.feed.entry[i].author[0].name.$t.split(" ");

ListAuthor=ListAuthor.slice(0, 1).join(" ");

 

AuthorPic = json.feed.entry[i].author[0].gd$image.src;

//################### Content Check

 

ListConten = json.feed.entry[i].content.$t;

ListContent= ListConten.replace(/(<([^>]+)>)/ig,"").substring(0, ChrCount);

 

//################### Date Format

 

ListMonth= ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];

 

ListDate= json.feed.entry[i].published.$t.substring(0,10);

 

                         Y = ListDate.substring(0, 4);

                        m = ListDate.substring(5, 7);

                         D = ListDate.substring(8, 10);

                         M = ListMonth[parseInt(m - 1)];                      

 

ListUpdate= json.feed.entry[i].updated.$t.substring(0, 16);

 

                         YY = ListUpdate.substring(0, 4);

                        mm = ListUpdate.substring(5, 7);

                         DD = ListUpdate.substring(8, 10);

                         TT = ListUpdate.substring(11, 16);

                         MM = ListMonth[parseInt(mm - 1)];  

 

//################### Thumbnail Check

// YouTube scan

 

if (json.feed.entry[i].content.$t.match(/youtube\.com.*(\?v=|\/embed\/)(.{11})/) != null)

{

 

    var youtube_id = json.feed.entry[i].content.$t.match(/youtube\.com.*(\?v=|\/embed\/)(.{11})/).pop();

  

    if (youtube_id.length == 11) {

        var ListImage = "'//img.youtube.com/vi/"+youtube_id+"/0.jpg'";

        }

}

 

else if (json.feed.entry[i].media$thumbnail)

{

thumbUrl = json.feed.entry[i].media$thumbnail.url;

sk= thumbUrl.replace("/s72-c/","/s"+ImageSize+"/");

ListImage= "'" + sk.replace("?imgmax=800","") + "'";

}

 

else if (json.feed.entry[i].content.$t.match(/src=(.+?[\.jpg|\.gif|\.png]")/) != null)

{

// Support For 3rd Party Images

ListImage =  json.feed.entry[i].content.$t.match(/src=(.+?[\.jpg|\.gif|\.png]")/)[1];

}

else

{

ListImage= "'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGBaoO_i2u7kTRZvG6GBbHHO97n5RtxCjYQeBEoyXWIVKquEE5xXh4kgUGZnVBKy5yfkOYCTitIMnhUgO8zZHT7Oa0SN5EEVh5JgdI3KUj66cqgZ7EVuzPXOV_pewp5n0Ydrog0K1Rdfs/s200/Icon.png'";

}

//################### Printing List

 

document.write( "<li style='margin:0px auto 10px auto!important; padding:0px!important;' class='node"+[i]+"' >");

if (showthumbnail == 'on'){

document.write("<div class='iFeatured'><a  href="

+ ListUrl+

  "><img src="

+ListImage+

"/></a></div>");

}

 if (showlabel == 'on'){

document.write("<span class='itag'>"

+ListTag +

"</span>");

}

 document.write("<a class='tstitle' href="

+ ListUrl+

">"

+ ListTitle+

"</a><div class='iline'>");

if (showauthor == 'on'){

document.write("<span class='iauthor'><img class='iauthorpic' src='"+AuthorPic+"'/>"

+ListAuthor+

"</span>");

}

if (showcomments == 'on'){

document.write("<span class='icomments'>"

+ListComments +

"</span> ");

}

if (showdate == 'on'){

document.write("<span class='idate'>"

+ M +

" "

+ D +

"</span>");

}

document.write("</div>");

if (showcontent == 'on'){

document.write("<div class='icontent'>"

+ListContent +

"...</div> ");

}

document.write("</li>");

}

document.write("<div class='itotal'><span> <a href='"+ListBlogLink+"'>View all <font>"+TotalPosts+"</font> posts in  ─  "+ListLabel+" </a></span></div>");

}

<!-- ######### Invoking the Callback Function ######## -->

for (var i = 0; i < ListCount ; i++) {

GenerateNum();

    document.write('<script type=\"text/javascript\" src=\"https://www.theinfinitescoop.in/feeds/posts/default?alt=json-in-script&start-index=' + RandomArray[i] + '&max-results=1&callback=tsrandom\"><\/script>')

};

document.write('</ul>');

</script>

 

You can easily choose to show or hide an option using on/off Boolean values. Simple make these settings:

  • Replace https://www.theinfinitescoop.in/ with your Blog URL. It appears thrice.
  • Mention number of posts to display in ListCount = 3;
  • Edit ChrCount = 90; to choose how many characters you wish to display in post description.
  • Edit TitleCount = 70; to choose post title length.
  • You can control the resolution or aspect ratio of thumbnails by editing ImageSize = 150; where the value 150 means that you want your images to be within 150 x 150 pixels in size. Make sure to keep this value close to the image size to ensure website load time is not effected a lot. Since our thumbnail images have a width of about 100px, therefore I have kept the resolution as 150, slightly higher to display images in slightly good resolution.
  • Click Save and you are all done!

 




Tags

Infinite Scoop

Hi, Myself Rakshith Daniel, a passionate blogger. The Infinite Scoop has been growing since July, 2024. Later after starting many blogs, from 2012 gave a long break due to personal reasons, i realized that it is endless handwork and priceless efforts. The honor is mine to declare that this blogs success would have been impossible without each and very one of you. You have made us grow this larger. Thank you all for your kind support.

Post a Comment

Post a Comment

Previous Post Next Post