Vertical Slider For Showing Blogger Recent Posts

Vertical Slider Widget For Blogger Last week we shared how to create a dynamic FlexSlider to display recent posts in blogger with horizontal animation. Today we will learn how to create a vertical slider to animate the list of recent posts in vertical direction. Again we will use blogger JSON Feeds to show latest posts of your blog.

Slider Features

Today's recent posts widget has some unique features introduced first time online :

  1. Author Avatar - Unique!
  2. Displays recent posts inside Dynamic Slider or as a Dynamic Flat list. - Unique!
  3. Displays recent posts from a specific category/label.
    1. Slider with two animations: Slide & Fade
    2. Clickable Comments Count
    3. Custom Date Format in ribbon fashion - Unique!
    4. Clickable Animated Featured Thumbnails - Unique!
    5. Option to increase or decrease thumbnail Resolution - Unique!
    6. Support for Third-party Images and YouTube thumbnails - Unique!
    7. Title Length is adjustable

    Add Vertical Slider To Blogger

    Follow the steps below to add the vertical slider to blogger:

    1. Go To Blogger > Template
    2. Backup your template
    3. Click "Edit HTML"
    4. Just below <head> tag paste the following JS and CSS source links:

      <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: Do not add JQuery, FontAwesome or Oswald links in the code above to your template if you are already using them on your site.

    5. Next search ]]></b:skin> and just above it paste the following code:

      Note: The stylesheet below is exactly the same that we shared earlier for Horizontal Slider except for the bolded blue code at bottom. If you have already added our previous slider then you just need to add the bolded blue code below and not the entire CSS code.

      <style>

      /*######### Recent Posts Slider Stylesheet #############*/

      .mbtslides-title{font-family:oswald; font-weight:normal;font-size:18px!important; border-bottom:2px solid rgb(144, 241, 40); color:#242729; width:300px;}.flexslider{ width:300px;  margin:0px; border:0;}
      .flexslider .slides {list-style-type:none; margin:0px auto 10px auto;padding:0px;} .flexslider li {color:#666; font-family:helvetica; font-size:12px; overflow:hidden; position:relative; padding-top: 10px; line-height: 1.6em;} .flexslider .flex-control-nav{list-style:none outside none;position:absolute;top:-45px;right:5px;text-align:right;height:10px}
      .flexslider .flex-control-nav li{display:inline-block;margin:0 2px}
      .flexslider .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}
      .flexslider .flex-control-nav a.flex-active{background-color:rgb(132, 219, 6);border:1px solid rgb(144, 241, 40)} .flexslider .flex-div{margin:0px auto 20px auto; display:block; border-bottom:1px solid #eee; padding-bottom:20px!important; position:relative;} .flexslider li a { color:#0080ff; text-decoration:none; } .flexslider i{color:#999; padding-right:5px; } .flexslider .iline{line-height:2em; margin-top:3px;} .flexslider .icontent{line-height:1.5em; margin-top:5px;} .flexslider div span{margin:0 5px 0 0; display:inline-block;font-weight: normal; } .flexslider .mbttitle {font-family:oswald; font-size:13px; color:#666; font-weight:normal; text-decoration:none;} .flexslider .mbttitle:hover, .flexslider .itotal a:hover  {color:#333; text-decoration:none;}
      .flexslider .iedit a{text-decoration:none; color:#999; cursor:pointer}
      .flexslider .iedit:before, .flexslider .iauthor:before, .flexslider .itag:before, .flexslider .icomments:before, .flexslider .idate:before, .flexslider .itotal span:before{font-family:fontAwesome; position:relative; padding-right:8px; color:#999;} .flexslider .iauthorpic{width: 17px!important;height: 17px!important;border-radius: 50%; float: none; display: inline-block!important; margin:0px 0px 0px 0px; padding-right:3px; position:relative; top:3px;}
      .flexslider .iFeatured{overflow:hidden;position:relative;float:left;margin:0 5px 10px 0;padding:0;} .flexslider .iFeatured a {background: none; padding:0px; display: block;border:1px solid #eee;} .flexslider .iFeatured img{width:110px!important;height:65px!important;-moz-transition:all .3s;-webkit-transition:all .3s;transition:all .3s; border-radius: 2px;} .flexslider .iFeatured:hover img{ opacity:1;   -moz-transform:scale(1.4);-webkit-transform:scale(1.4);transform:scale(1.4)} .flexslider .icomments a{color:#0080ff; font-family: arial;font-size:12px;} .flexslider .icomments a:hover{text-decoration:underline} .flexslider .icomments:before {content:'\f086'; padding:0px 3px 0px 7px; color:#84DB06;} .flexslider .idate {position: absolute;left: 0px;top: -7px; background: rgb(132, 219, 6);color: #fff;padding: 3px 4px;font-family: oswald;font-size: 11px;border: 1px solid rgb(144, 241, 40);} .flexslider .idate div{width:18px; line-height:1.6em; text-align:center;}
      .flexslider .idate:after {content: ' ';position: absolute;z-index:-9999px;width: 0;height: 0;left: 25px;top: -1px;border-width: 4px 6px;border-style: solid;border-color: transparent transparent rgb(125, 208, 4)  rgb(125, 208, 4);}.flexslider .flex-div-v{margin:10px auto 20px auto; display:block; border-bottom:1px solid #eee; padding-bottom:20px!important; position:relative;}

      </style>

      Make these changes

      • To change the green color theme of the vertical slider simply replace the green highlighted color codes with color of your choice. The color can be in rgb or #hexadecimal, both work. Use our  Color Code Generator.
    6. Save your template.
    7. Now go to Blogger > Layout
    8. Select "Add a Gadget"
    9. Choose "HTML/JavaScript" gadget
    10. Keep the title field empty and then paste the following code inside it:

      <script type="text/javascript">
        $(window).load(function() {
          $('.mbt-v').flexslider({
         animation: "slide",
              directionNav: false,
             touch: true,  direction: "vertical",
             slideshowSpeed: 2500,
            pauseOnHover: true,
           animationSpeed: 700,
          });
        });
      </script>


      <h2 class="mbtslides-title">Recent Posts Slider</h2>
      <div class="flexslider mbt-v">
      <ul class="slides">

      <script type="text/javascript">
      //################### Defaults
      var ListBlogLink = "http://mybloggertricks.com";
      var ListCount = 6;
      var ListLabel = "SEO";
      var TitleCount = 66;
      var ImageSize = 150;
      //################### Function Start
      function mbtslider(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;

      //################### 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
      var listing = "<div class='flex-div-v'><div class='iFeatured'><a  href="
      + ListUrl+
        "><img src="
      +ListImage+
      "/></a></div><a class='mbttitle' href="
      +ListUrl+
      "target='_blank'>"
      +ListTitle+
      "</a><div class='iline'><span class='iauthor'><img class='iauthorpic' src='"+AuthorPic+"'/>"
      +ListAuthor+
      "</span><span class='icomments'>"
      +ListComments +
      "</span> <span class='idate'><div>"
      + D +
      "</div><div> "
      + M +
      "</div></span></div></div>";
      if (i == 0)
      document.write('<li>');
      if (i < ListCount/2)
      document.write(listing);
      if (i == ListCount/2)
      document.write('</li><li>');
      if (i >= ListCount/2)
      document.write(listing);
      if (i == ListCount)
      document.write('</li>');
      } }

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

      document.write("<script src='"+ListBlogLink+"/feeds/posts/default/-/"+ListLabel+"?alt=json-in-script&callback=mbtslider'></"+"script>");
      </script>
      </ul></div>

      Changing the control options:

      • The customization steps for this slider are exactly the same that we discussed in step#10 of Horizontal FlexSlider. Please read it for understanding how to modify the widget.
    11. Click Save and you are all done!

    How To Display Dynamic Slider or a Flat List?

    You can choose whether to display posts inside animated FlexSlider or display them as simple flat vertical list. In other words you can choose to enable or disable the FlexSlider.

    How to enable or disable the flex slider?

    If you want to display and enable FlexSlider then insert even integer value next to ListCount , such as 2,4,6,8 etc.

    Output:

    Vertical Slider For Blogspot

    For displaying a dynamic Flat list without animation slides or in other words to disable FlexSlider insert odd integer value next to, such as 1,3,5,7 etc.

    Output:

    Vertical Slider For Blogger Blogs

    Need Help?

    Let me know if you have any questions or if you need any assistance. We are done with both horizontal and vertical slider widgets for blogger and now we will move towards more advanced and useful widgets such as carousels, newstickers, related posts, random posts and so on. Stay tuned for a lot of fun. =)

    If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

    9 comments

    PLEASE NOTE:
    We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.
    1. Hello Mohammad,

      Thanks for one more amazing post.

      I saw the demo and it really looks cool. The horizontal was also cool and this one is damm cool.

      So thanks for sharing this plugin. I'm definitely going to implement this on my blog :)

      Well Mohammad I must say one don't ask for giveaway on MBT as each and every post is like give away (just a thought).

      Thanks once again,
      Piyush :)

      ReplyDelete
      Replies
      1. Hi Piyush

        That was surely a precious feedback buddy and it is the only thing that helps me keep spreading knowledge. Thank you a lot for the nice words. This surely means a lot.

        A lot of more useful widgets are on its way.

        Happy Eid Mubarak buddy! =)

        Delete
    2. Nice Post,

      I'm searching for this from long time and got here easily. Just want to say big thanks to you.

      ~Prakash

      ReplyDelete
    3. hello handsome ,
      huwa huwa huwa its working body :)thanx yar its really working i am happy to do that its first difficult work for me to do that ..
      but the good thing is its working i am so happy to do that :)
      i ll read your post now daily for my poor blog ..
      thank you very much ..

      ReplyDelete
    4. Hi Ahmedzai,
      I'm go through your article that's plugin really work :)
      I'm new in that field I'm follow most of your teaching inshallah soon i ll like you :)
      try to share most valuable information like that ..
      ~salman qamar

      ReplyDelete
    5. Thanks so much! I've already used your recent comments and random posts widgets. I tried this one too, and it seems to work fine except it is not sliding. I have the listcount as 12 and animation as "slide". Do you know what I might have gotten wrong? I'm fine with it not sliding, though, if there's nothing I can do. :) Thanks again!

      ReplyDelete
    6. Of course, right after I ask for help, I see what I did wrong. :) I fixed it now, so nevermind. :) Thanks.

      ReplyDelete
    7. If the widget does not work for you please replace your jQuery link with this one:

      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>

      ReplyDelete
    8. I can not get the slider to retreive posts from my blog. I have replaced the url as noted. What do I need to do? I'm using a domain to mask the blogspot url. Which url do I use? Could I've tried both and neither pull up posts. Thank you

      ReplyDelete