Highlight your recent posts with the help of this slider. This recent posts slider works same like featured posts slider that I posted earlier but it will show list of recent posts with thumbnails. This slider also support labels just like featured posts slider.
The above screenshot shows how it will look on your blog. By this slider you can show some of your famous posts or the most recent posts.
Features
- Fully automatic
- Easy to install
- Easy to customise
- Animation options
- Image hover effect
- Label supported
This slider has everything you need to show on your blog. Not only the title and thumbnail of the post will appear in this slider but also the date and number of comments will appear with the post.
Steps to follow
- Open blogger
- Go to 'Template' and click on 'Edit HTML'
- Look for this code
</head>
- Paste this code just above that code
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>
<link href='http://fontawesome.io/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'/>
- Now, look for this code
]]></b:skin>
- And paste this code just above that code
<style>
.slides-title{font-family:oswald; font-weight:normal;font-size:18px!important; border-bottom:2px solid #3B44F7; 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:#3B44F7;border:1px solid #3B44F7} .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 .title {font-family:oswald; font-size:13px; color:#666; font-weight:normal; text-decoration:none;} .flexslider .title: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:#3B44F7;} .flexslider .idate {position: absolute;left: 0px;top: -7px; background: #3B44F7;color: #fff;padding: 3px 4px;font-family: oswald;font-size: 11px;border: 1px solid #3B44F7;} .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(59, 68, 247) rgb(59, 68, 247);}
</style>
- Save your template and go to 'Layout'
- Click on 'add a gadget'
- Select 'HTML/Javascript' gadget
- Paste this code in that gadget and save
<script type="text/javascript">
$(window).load(function() {
$('.flexslider').flexslider({
animation: "fade",
directionNav: false,
touch: true,
slideshowSpeed: 6500,
pauseOnHover: true,
animationSpeed: 1200,
});
});
</script>
<h2 class="slides-title">Recent Posts Slider</h2>
<div class="flexslider">
<ul class="slides">
<script type="text/javascript">
var ListBlogLink = "http://www.tutesinside.net";
var ListCount = 8;
var ListLabel = "Blogger Tutes";
var TitleCount = 66;
var ImageSize = 150;
function slider(json) {
for (var i = 0; i < ListCount; i++)
{
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 = "";
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 += " ";}
}
}
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 + "'";
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;
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)];
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)
{
ListImage = json.feed.entry[i].content.$t.match(/src=(.+?[\.jpg|\.gif|\.png]")/)[1];
}
else
{
ListImage= "'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_s_SSKKC4cTQDzyakYilLtkqtxuQCv4x61OUNse1Wbi2NgIm5rGB48Ix2wu5f6Vm27EXNbtQBMRVJWdg3fvtZTdpVFO8qIn5m4lZQH6G90Me0dxthka3zx32r2FjT5d2PR-sQn5s5oG0/s200/Icon.png'";
}
var listing = "<div class='flex-div'><div class='iFeatured'><a href="
+ ListUrl+
"><img src="
+ListImage+
"/></a></div><a class='title' 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>');
} }
document.write("<script src='"+ListBlogLink+"/feeds/posts/default/-/"+ListLabel+"?alt=json-in-script&callback=slider'></"+"script>");
</script>
</ul></div>
Now, you can visit your blog to see your new gadget.
Customise
Change the URL (Important)
var ListBlogLink = "http://www.tutesinside.net";
Change animation to slide. Just replace fade with slide
animation: "fade",
Change the time duration of slide by changing the value in blue
slideshowSpeed: 6500,
Change the animation speed by changing the value in blue
animationSpeed: 1200,
Change the title by changing the text in blue
<h2 class="slides-title">Recent Posts Slider</h2>
Change the number of posts by changing the value in blue
var ListCount = 8;
Change the label name. Keep this in mind that labels are case sensitive and you need to type the exact name of label.
var ListLabel = "Blogger Tutes";
Change the number of character that will appear in gadget
var TitleCount = 66;
Change image size by changing the value in blue
var ImageSize = 150;
If you want to show your most recent posts instead of showing posts with specific label then remove the code in blue
document.write("<script src='"+ListBlogLink+"/feeds/posts/default/-/"+ListLabel+"?alt=json-in-script&callback=slider'></"+"script>");
This is it if you wanna change the colors of the gadget then just change the color codes in the second code.
This one is really long tutorial I think I'm gonna sleep now.
Good night!
0 comments:
Don't forget to check 'Notify me' box to get notification of reply.