Random Post Slider Widget for Blogger Tips

Random Post Slider Widget for Blogger Tips
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!

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}
  1. 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
  2. Save your template.
  3. Now go to Blogger > Layout
  4. Select "Add a Gadget"
  5. 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= "'http://4.bp.blogspot.com/-HALLtgFeep0/VfryhQ0C5oI/AAAAAAAAPcY/77mSGND4q84/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.
  1. Click Save ,you are all done!

Post a Comment

1 Comments

  1. I am Daniyal
    https://www.thatsgr8.com/2020/05/kylie-jenner-files-lawsuit-at-trademark.html?m=1
    Check krlo

    ReplyDelete