Slider Features
Today's recent posts widget has some unique features introduced first time online :
- Author Avatar - Unique!
- Displays recent posts inside Dynamic Slider or as a Dynamic Flat list. - Unique!
- Displays recent posts from a specific category/label.
- Slider with two animations: Slide & Fade
- Clickable Comments Count
- Custom Date Format in ribbon fashion - Unique!
- Clickable Animated Featured Thumbnails - Unique!
- Option to increase or decrease thumbnail Resolution - Unique!
- Support for Third-party Images and YouTube thumbnails - Unique!
- Title Length is adjustable
Add Vertical Slider To Blogger
Follow the steps below to add the vertical slider to blogger:
- Go To Blogger > Template
- Backup your template
- Click "Edit HTML"
- 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.
- 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.
- Save your template.
- Now go to Blogger > Layout
- Select "Add a Gadget"
- Choose "HTML/JavaScript" gadget
- 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 scanif (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.
- 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:
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:
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 »
Mohammad
7/04/2016
JSON Feeds
,
Widgets
Hello Mohammad,
ReplyDeleteThanks 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 :)
Hi Piyush
DeleteThat 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! =)
Nice Post,
ReplyDeleteI'm searching for this from long time and got here easily. Just want to say big thanks to you.
~Prakash
hello handsome ,
ReplyDeletehuwa 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 ..
Hi Ahmedzai,
ReplyDeleteI'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
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!
ReplyDeleteOf course, right after I ask for help, I see what I did wrong. :) I fixed it now, so nevermind. :) Thanks.
ReplyDeleteIf the widget does not work for you please replace your jQuery link with this one:
ReplyDelete<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
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