Random Post Slider Widget for Blogger Tips

Random Post Slider Widget | Ever wondered if you would randomly display images inside the Blogger slider? So far we've shared a dynamic recent posts slider moreover a static slider, today for the first time online, we're releasing post slider for Blogspot Blogs featuring the Blogger Jason Feeds API, Flex Slider and jQuery. Made using A fully responsive image slider that will automatically display your random posts on your homepage or sidebar, wherever you want. Let's learn how to create random slider for Blogspot in easy steps but before that let us see live demo!

See Alseo : 75+ Best JQuery Scrolling Plugins For Websites

What is Blogger Random Post Slider Widget?

Due to the natural structure of blogging platforms such as Blogspot, articles get buried as they age. New users often avoid navigating through all of your labels / categories, resulting in most of your best content not being noticed at all. A post slider is a great way to show your visitors your oldest posts. The slider widget will randomly select your old posts moreover automatically display thumbnails on the homepage or sidebar depending on which location suits you. The slider rotates clockwise where each slide is responsive and dynamic.

create a post slider in Blogger

Follow these simple steps:

Go to Blogger> Templates
Make a backup of your template
Click "Edit HTML"
Just paste the following JS , CSS source links below the <head> tag:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script> <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'/> <link href='https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.1/flexslider.min.css' rel='stylesheet' type='text/css'/> <script src='https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.1/jquery.flexslider.min.js' type='text/javascript'></script>

Note: If you are already using your site, do not include links to JQuery, FontAwesome, FlexSlider or Oswald sources in your template.

/*######### CH Muhabbat Ali #############*/          

.mbt-random{margin:0 5px;border:0;width:100%;overflow:hidden}           

.mbt-random .slides{list-style-type:none;margin:0 auto;padding:0}           

.mbt-random li{color:#fff;font-family:helvetica;font-size:12px;overflow:hidden;padding-top:10px}           

.mbt-random .flex-control-nav li{display:inline-block;margin:0 2px}           

.mbt-random .flex-control-nav a{text-indent:9999px;display:block;width:10px;cursor:pointer;height:10px;background-color:#000;border:1px solid #000;border-radius:0!important}           

.flex-direction-nav .flex-prev{left:-50px}           

.flex-direction-nav .flex-next{right:-50px;text-align:right}           

.mbt-random .flex-control-paging{display:none}           

.flex-direction-nav{position:relative;top:-250px}           

.mbt-random .flex-control-nav a.flex-active{background-color:#84db06;border:1px solid #90f128}           

.mbt-random .flex-div{margin:0 auto;display:block;padding:0!important;position:relative;height:370px}           

.mbt-random li a{color:#0080ff;text-decoration:none}           

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

.mbt-random .iline{line-height:2em;margin:0;position:relative;top:-90px;background:#56adff;padding:3px 10px;display:inline-block}           

.mbt-random .icontent{line-height:1.5em;margin-top:5px}           

.mbt-random div span{margin:0 5px 0 0;display:inline-block;font-weight:400}           

.mbt-random .mbttitle{font-family:oswald;font-size:20px;color:#fff;font-weight:400;text-decoration:none;position:relative;top:-90px;background:#66b5ff;padding:15px 10px;display:block}           

.mbt-random .mbttitle:hover,.mbt-random .itotal a:hover{color:#fff;text-decoration:none}           

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

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

.mbt-random .iauthorpic{width:17px!important;height:17px!important;border-radius:50%;float:none;display:inline-block!important;margin:0;padding-right:3px;position:relative;top:3px}           

.mbt-random .iFeatured{overflow:hidden;position:relative;margin:0;padding:0;width:100%}           

.mbt-random .iFeatured a{background:none;padding:0;display:block;border:0px solid #eee;margin:0 -1px}           

.mbt-random .iFeatured img{height:305px!important;-moz-transition:all .3s;-webkit-transition:all .3s;transition:all .3s;border-radius:0;margin:0;padding:0;opacity:.7}           

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

.mbt-random .icomments a, .mbt-random .itag a{color:#0080ce;font-family:arial;font-size:12px}           

.mbt-random .icomments a:hover, .mbt-random .itag a:hover{text-decoration:underline}           

.mbt-random .itag:before{content:'\f02c';padding:0 3px 0 7px;color:#fff}           

.mbt-random .icomments:before{content:'\f086';padding:0 3px 0 7px;color:#fff}           

.mbt-random .idate{color:#fff;padding:3px 4px;font-family:arial;font-size:11px}           

.mbt-random .idate:before{content:'\f073';padding:0 5px;color:#fff}

Make these changes
- To change the blue background color behind the title edit: #66b5ff
- To change the light blue background behind Author name edit:#56adff
- To change the white color of the Title text edit: #fff
- To change the color of the comment with labels link edit: #0080ce
Save your template.
Now go to Blogger > Layout
Select "Add a Gadget"
Choose "HTML/JavaScript" gadget

Keep the title field empty then paste the following code inside it:

       
<script type="text/javascript">          
//################### Defaults           
var ListBlogLink = "http://mybloggertricks.com";           
var ListCount = 4;  
var TitleCount = 66;           
var ImageSize = 800; 

$(window).load(function() {          
  $('.mbt-random').flexslider({           
   animation: "slide",           
    itemWidth: 600,           
itemMargin: 25,           
  directionNav: true,           
       touch: true,           
       slideshowSpeed: 2500,           
      pauseOnHover: true,           
     animationSpeed: 700,           
  });           
});

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=\"'+ListBlogLink+'/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> 

<div class="flexslider mbt-random">          
<ul class="slides">           
<script type="text/javascript">           
//################### Function Start           
function mbtrand(json) {           
for (var i = 0; i < json.feed.entry.length; 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;           
//################### 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 

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","") + "'";           
}

// YouTube scan          
else 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].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/AVvXsEjB5XsyRWfZ7zaH__VmO2bI0iEqtglWeIBCFWVL9RkLydDrtHQdl98DAejrrotr0kRerXwJAyUdIXGyxXa2jc7UFLrBOUncD-WK7gS8d8it6-lVIx2ZuFeo5LRZkGyt9NaROCr3Quaw7Aw/s200/Icon.png'";           
}           
//###################  Printing List           
var listing = "<li><div class='flex-div'><div class='iFeatured'><a  href="           
+ ListUrl+           
  "><img src="           
+ListImage+           
"/></a></div><div class='iline'><span class='iauthor'><img class='iauthorpic' src='"+AuthorPic+"'/>"           
+ListAuthor+           
"</span><span class='icomments'>"           
+ListComments +           
"</span> <span class='idate'>"           
+ D +           
" "           
+ M +           
"</span><span class='itag'>"           
+ListTag +           
"</span></div><a class='mbttitle' href="           
+ListUrl+           
"target='_blank'>"           
+ListTitle+           
"</a></div></li>"; 

document.write(listing); 

} }          
<!-- #### Invoking the Callback Function #### -->           
for (var i = 0; i < ListCount ; i++) {           
GenerateNum();           
var scripta = '<script type=\"text/javascript\" src=\"'+ListBlogLink+'/feeds/posts/default?alt=json-in-script&start-index='+RandomArray[i] + '&max-results=1&callback=mbtrand\"><\/script>';           
document.write(scripta);           
};

</script>          
</ul></div>

Make these changes to customize the slider:

Place your blog URL inside ListBlogLink
Inside ListCount mention how many slides to display. I recommend not displaying more than 3 or 4 slides. Increasing this number will increase the number of iterations/loops moreover thus slowing down your site.
Inside TitleCount mention the length of title characters to display. By default titles longer than 66 characters will be trimmed.
Inside ImageSize mention the aspect ratio or resolution of your featured thumbnails. By default the thumbnails will be 800px in width. If you wish to display the slider in sidebar only then you can decrease this value to 400px.

Click Save ,you are all done!

2 Comments

Daniel May 2, 2020 at 9:56 PM
I am Daniyal
https://www.thatsgr8.com/2020/05/kylie-jenner-files-lawsuit-at-trademark.html?m=1
Check krlo
cloudshinepro.comOctober 9, 2020 at 10:52 AM
I definitely enjoy every little bit of it. It is a great website and has a nice share. I want to thank you. Good job! You guys do a great blog, and have some great contents about random post slider. Keep up the good work. oracle fusion financials online training

Random Post Slider Widget for Blogger Tips

What is Blogger Random Post Slider Widget?

create a post slider in Blogger

Posted by: CH Muhabbat Ali

Post a Comment

2 Comments

Followers

Popular Posts

20+ Most Amazing CSS Minifier Tools

Most Recent

Random Posts

Most Popular

20+ Most Amazing CSS Minifier Tools

Random Post Slider Widget for Blogger Tips

What is Blogger Random Post Slider Widget?

create a post slider in Blogger

Posted by: CH Muhabbat Ali

You may like these posts

Post a Comment

2 Comments

Social Plugin

Followers

Popular Posts

20+ Most Amazing CSS Minifier Tools

Most Recent

Random Posts

Most Popular

20+ Most Amazing CSS Minifier Tools