Featured Posts Slider Widget for Blogger

Featured Posts Slider Widget for Blogger - [Automatic]

Ever wondered how to display your most recent posts from a selected category inside a dynamic Image slider? Let's create a responsive featured content slider widget for BlogSpot blogs that may display recent posts from a specific label automatically. Without our Blogger JSON Feeds guide, building Blogspot widgets would not have been that easy!

UPDATE: We just released Random Posts Slider Widget and a Static Slider For Blogger!

Image Sliders for blogs play a vital role in showcasing your featured content whether it be a static list of featured images linked to your bog posts or a dynamic/automatic list of recent posts from a specific label or an automatic list of random posts. We are sharing with you all for the first time, all these three amazing blogger featured content sliders built using FlexSlider and Blogger JSON Feeds API. These blogspot widgets are rarely shared with all advanced functionality and we are pleased to develop them exclusively for blogger community.

DEMO

In the past we have developed and shared several static Content Sliders for Blogspot blogs but this time we will learn how to make that content load dynamically instead of manually creating the featured content list and then displaying it.

See our previous sliders by following these links:

jQuery Image Slider For Blogger

Image Slideshow With Navigation For Blogger

Create Image Gallery With Control Options

4+ Image Slider Widgets For Blogger

What is a Featured Posts Slider Widget?

Featured posts slider widget for blogger blogs is a unique way to showcase your most favorite and exclusive articles on your homepage. It automatically displays your latest articles from a specific category inside animated slider, thus drawing your visitors attentions towards your note worthy content.

Even news sites like Yahoo news and TV channels like Discovery displays their hottest content using a featured content slider on their homepage. This helps the website visitors to see most trending and most featured stories in a glance. Featured posts slider really helps to draw visitor attention to your old but exclusive articles, thus helping in increasing your page views.

Wordpress sites use several plugins to showcase featured content on homepage but with the help of blogger JSON feed API & FlexSlider we were able to create the most advanced featured posts slider for blogger platform.

Features of Featured Posts Slider Widget

Featured posts slider is an advanced widget equipped with these features:

Author Avatar - Unique!

Displays recent posts dynamically inside Slider. - Unique!

Displays recent posts from a specific category/label.

Slider with two animations: Slide & Fade - Unique!

Clickable Comments Count

Custom Date Format

Clickable Animated Featured Image Thumbnails

Option to increase or decrease Image Resolution for quality- Unique!

Support for Third-party Images and YouTube Video thumbnails - Unique!

Title Length is adjustable

Most Responsive Content Slider For Blogger Blogs!

Blogger featured posts slider is built using FlexSlider and it therefore automatically adopts the width of the parent container. Multiple breakpoints are added to ensure the slider fits to device screen size just perfectly. See the screenshots below

[ SMARTPHONES ]

[ TABLETS / IPADS]

[ DESKTOP / LAPTOPS ]

Add Featured Posts Slider To Blogger

If you'd like to display the featured post slider on your homepage, please follow these instructions:

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, FlexSlider or Oswald source links to your template if you are already using them on your site.

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

/*######### Blogger Slider By MyBloggerTricks #############*/

.mbt-smargin:0 5px;border:0;width:100%;overflow:hidden

.mbt-s .slideslist-style-type:none;margin:0 auto;padding:0

.mbt-s licolor:#fff;font-family:helvetica;font-size:12px;overflow:hidden;padding-top:10px

.mbt-s .flex-control-nav lidisplay:inline-block;margin:0 2px

.mbt-s .flex-control-nav atext-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-prevleft:-50px

.flex-direction-nav .flex-nextright:-50px;text-align:right

.mbt-s .flex-control-pagingdisplay:none

.flex-direction-navposition:relative;top:-250px

.mbt-s .flex-control-nav a.flex-activebackground-color:#84db06;border:1px solid #90f128

.mbt-s .flex-divmargin:0 auto;display:block;padding:0!important;position:relative;height:370px

.mbt-s li acolor:#0080ff;text-decoration:none

.mbt-s icolor:#999;padding-right:5px

.mbt-s .ilineline-height:2em;margin:0;position:relative;top:-90px;background:#31363a;padding:3px 10px;display:inline-block

.mbt-s .icontentline-height:1.5em;margin-top:5px

.mbt-s div spanmargin:0 5px 0 0;display:inline-block;font-weight:400

.mbt-s .mbttitlefont-family:oswald;font-size:20px;color:#ff0;font-weight:400;text-decoration:none;position:relative;top:-90px;background:#222;padding:15px 10px;display:block

.mbt-s .mbttitle:hover,.mbt-s .itotal a:hovercolor:#fff;text-decoration:none

.mbt-s .iedit atext-decoration:none;color:#999;cursor:pointer

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

.mbt-s .iauthorpicwidth:17px!important;height:17px!important;border-radius:50%;float:none;display:inline-block!important;margin:0;padding-right:3px;position:relative;top:3px

.mbt-s .iFeaturedoverflow:hidden;position:relative;margin:0;padding:0;width:100%

.mbt-s .iFeatured abackground:none;padding:0;display:block;border:0px solid #eee;margin:0 -1px

.mbt-s .iFeatured imgheight:305px!important;-moz-transition:all .3s;-webkit-transition:all .3s;transition:all .3s;border-radius:0;margin:0;padding:0;opacity:.7

.mbt-s .iFeatured:hover imgopacity:1;-moz-transform:scale(1.4);-webkit-transform:scale(1.4);transform:scale(1.4)

.mbt-s .icomments acolor:#0080ff;font-family:arial;font-size:12px

.mbt-s .icomments a:hovertext-decoration:underline

.mbt-s .icomments:beforecontent:'f086';padding:0 3px 0 7px;color:#fff

.mbt-s .idatecolor:#fff;padding:3px 4px;font-family:arial;font-size:11px

.mbt-s .idate:beforecontent:'f073';padding:0 5px;color:#fff

Make these changes
- To change the black background color behind the title edit: #222
- To change the yellow color of the slide title font edit: #ff0 and to change the white color of the title on mouse hover edit: #fff
- To change the color of the comment link eidt: #0080ff
- 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-s').flexslider(
animation: "slide",itemWidth: 600,itemMargin: 25,directionNav: true,touch: true,slideshowSpeed: 2500,pauseOnHover: true,animationSpeed: 700,););</script>

<div class="flexslider mbt-s">

<ul class="slides">

<script type="text/javascript">

//################### Defaults

var ListBlogLink = "http://mybloggertricks.com";

var ListCount = 6;

var ListLabel = "Events";

var TitleCount = 66;

var ImageSize = 600;

//################### Function Start

function mbtslide(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

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=



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

</script>

</ul></div>

Changing the following control options will help you customize blogger sider:
- animation: You can select two values here. "slide" or "fade"
- slideshowSpeed: You can set the speed of the slideshow cycling, in milliseconds
- animationSpeed: You can also set the speed of animations, in milliseconds
- pauseOnHover: Pause the slideshow when hovering over slider, then resume when no longer hovering
- If you don't want to use the title then delete the yellowhighlighted code.
- ListBlogLink : Insert your Blog URL here
- ListCount : Decide how many posts do you wish to display.
- ListLabel : Insert your blog label here. Remember that labels are case sensitive. Therefore type it exactly as it is shown in your browser address bar.
- TitleCount : Choose how many characters to display in slide title.
- ImageSize : You can control the resolution or aspect ratio of thumbnails by editing ImageSize = 600;where the value 600 means that you want your images to be within 600 x 600 pixels in dimension.
- /-/"+ListLabel+" Delete this line if you wish to display latest posts of your blog without mentioning a label

Click Save and you are all done!

Need Help In Installing Automatic Featured Post Slider?

I just hope you may find this cool slider widget useful and easy to apply. Let me know if you need any help during the installation process of this content slider. You are most welcomed to post your questions in the comment box below. In our next tutorial we will share how to create Random Posts Content Slider for blogger.

Stay tuned and keep customizing your blog to take it to the next level! =)

9
comments

PLEASE NOTE:

We have Zero Tolerance to Spam.

Chessy Comments and Comments with
'Links'
will be deleted immediately upon our review.

(function() {
var items = ['id': '3316069610993101375', 'body': 'Its cool!x3cbr /x3ex3cbr /x3eLooks like a good widget for newbies at Blogger platform :) ', 'timestamp': '1477287931822', 'permalink': 'https://www.mybloggertricks.com/2016/10/dynamic-blogger-slider.html?showCommentx3d1477287931822#c3316069610993101375', 'author': 'name': 'Umer Prince', 'avatarUrl': '//lh5.googleusercontent.com/-JT0qk30tAN4/AAAAAAAAAAI/AAAAAAAAHvU/lq__28h7U_s/s35-c/photo.jpg', 'profileUrl': 'https://www.blogger.com/profile/16551852107804252606', 'displayTime': 'Oct 24, 2016, 10:45:00 AM', 'deleteclass': 'item-control blog-admin pid-705403293', 'id': '7618491317813793893', 'body': 'Hello Mustafa,x3cbr /x3ex3cbr /x3eThis is something that we can say unique! :) x3cbr /x3ex3cbr /x3eJust awesome MUSTAFA Bhai! :) x3cbr /x3ex3cbr /x3eKeep it up :) ', 'timestamp': '1477561533541', 'permalink': 'https://www.mybloggertricks.com/2016/10/dynamic-blogger-slider.html?showCommentx3d1477561533541#c7618491317813793893', 'author': 'name': 'Abdul Samad', 'avatarUrl': '//lh3.googleusercontent.com/-IUoeb-UIads/AAAAAAAAAAI/AAAAAAAAF8Q/h2TrtrasvZw/s35-c/photo.jpg', 'profileUrl': 'https://www.blogger.com/profile/18097874675345731909', 'displayTime': 'Oct 27, 2016, 2:45:00 PM', 'deleteclass': 'item-control blog-admin pid-535463643', 'id': '941657656154169905', 'body': 'How i give every label differenticon?', 'timestamp': '1478534131248', 'permalink': 'https://www.mybloggertricks.com/2016/10/dynamic-blogger-slider.html?showCommentx3d1478534131248#c941657656154169905', 'author': 'name': 'Mo Mahtab', 'avatarUrl': '//lh3.googleusercontent.com/zFdxGE77vvD2w5xHy6jkVuElKv-U9_9qLkRYK8OnbDeJPtjSZ82UPq5w6hJ-SAx3ds35', 'profileUrl': 'https://www.blogger.com/profile/12521701743330646108', 'displayTime': 'Nov 7, 2016, 8:55:00 PM', 'deleteclass': 'item-control blog-admin pid-1069533339', 'id': '851599978409521971', 'body': 'Hi Mohammad,x3cbr /x3ex3cbr /x3eFirst of all thanks for sharing with us an an amazing blogger widget. By using blogger slider in blogger one can easily display the recent post nicely and effectively.x3cbr /x3ex3cbr /x3eKeep sharing informative content :)x3cbr /x3ex3cbr /x3eRegardsx3cbr /x3ex3cbr /x3eMairaj', 'timestamp': '1479291478647', 'permalink': 'https://www.mybloggertricks.com/2016/10/dynamic-blogger-slider.html?showCommentx3d1479291478647#c851599978409521971', 'author': 'name': 'Muhammad Mairaj', 'avatarUrl': '//lh3.googleusercontent.com/-FPKhjucpp-A/AAAAAAAAAAI/AAAAAAAAAFA/uEw2RS6eVxs/s35-c/photo.jpg', 'profileUrl': 'https://www.blogger.com/profile/14736363547135758845', 'displayTime': 'Nov 16, 2016, 3:17:00 PM', 'deleteclass': 'item-control blog-admin pid-1686628957', 'id': '1602527004484939886', 'body': 'Thanks for sharing with your tips design..', 'timestamp': '1480382390716', 'permalink': 'https://www.mybloggertricks.com/2016/10/dynamic-blogger-slider.html?showCommentx3d1480382390716#c1602527004484939886', 'author': 'name': 'SL Blogger', 'avatarUrl': '//lh5.googleusercontent.com/-AekbsihF15Y/AAAAAAAAAAI/AAAAAAAACoQ/FqSnWtEZScg/s35-c/photo.jpg', 'profileUrl': 'https://www.blogger.com/profile/12493688776811161267', 'displayTime': 'Nov 29, 2016, 6:19:00 AM', 'deleteclass': 'item-control blog-admin pid-1718796095', 'id': '7804242350095503855', 'body': 'am sorry. But, this tips not work to my site. Please help me Mr Mohammad?', 'timestamp': '1480383674120', 'permalink': 'https://www.mybloggertricks.com/2016/10/dynamic-blogger-slider.html?showCommentx3d1480383674120#c7804242350095503855', 'author': 'name': 'SL Blogger', 'avatarUrl': '//lh5.googleusercontent.com/-AekbsihF15Y/AAAAAAAAAAI/AAAAAAAACoQ/FqSnWtEZScg/s35-c/photo.jpg', 'profileUrl': 'https://www.blogger.com/profile/12493688776811161267', 'displayTime': 'Nov 29, 2016, 6:41:00 AM', 'deleteclass': 'item-control blog-admin pid-1718796095', android, how to guides.x3cbr /x3eIt usually shows at my blog footer. x3cbr /x3ex3cbr /x3eCan you tell me the right way to fix this?', 'timestamp': '1480462203560', 'permalink': 'https://www.mybloggertricks.com/2016/10/dynamic-blogger-slider.html?showCommentx3d1480462203560#c4335372249659599215', 'author': 'name': 'Henry emmanuel', 'avatarUrl': '//lh6.googleusercontent.com/-5IGckOpILQs/AAAAAAAAAAI/AAAAAAAABKs/enEH-Za8-R8/s35-c/photo.jpg', 'profileUrl': 'https://www.blogger.com/profile/03102582460658720695', 'displayTime': 'Nov 30, 2016, 4:30:00 AM', 'deleteclass': 'item-control blog-admin pid-1852975567', 'id': '4319248299254915857', 'body': 'Thanks For Sharing This Trick,. x3cbr /x3eplease give me your permission to share this article on my blog', 'timestamp': '1480542006552', 'permalink': 'https://www.mybloggertricks.com/2016/10/dynamic-blogger-slider.html?showCommentx3d1480542006552#c4319248299254915857', 'author': 'name': 'Kang Wira', 'avatarUrl': '//lh4.googleusercontent.com/-x7gUNWlA2_A/AAAAAAAAAAI/AAAAAAAAABU/CzIfK8vFCTo/s35-c/photo.jpg', 'profileUrl': 'https://www.blogger.com/profile/17188659355465337070', 'displayTime': 'Dec 1, 2016, 2:40:00 AM', 'deleteclass': 'item-control blog-admin pid-886923612', 'id': '4162239000761475455', 'body': 'Its Worked And Its Unique but need A long time To load', 'timestamp': '1493499326399', 'permalink': 'https://www.mybloggertricks.com/2016/10/dynamic-blogger-slider.html?showCommentx3d1493499326399#c4162239000761475455', 'author': 'name': 'Salah Sari', 'avatarUrl': '//lh4.googleusercontent.com/-kyVBcpOgns8/AAAAAAAAAAI/AAAAAAAAACk/1sbB6eDes8E/s35-c/photo.jpg', 'profileUrl': 'https://www.blogger.com/profile/14853650607276644786', 'displayTime': 'Apr 30, 2017, 1:55:00 AM', 'deleteclass': 'item-control blog-admin pid-1350319118'];
var msgs = 'loadMore': 'Load more...', 'loading': 'Loading...', 'loaded': 'No more!', 'addComment': 'Add comment', 'reply': 'Reply', 'delete': 'Delete';
var config = 'blogId': '8193278726666811965', 'postId': '6396939042746907159', 'feed': 'https://www.mybloggertricks.com/feeds/6396939042746907159/comments/default', 'authorName': 'M. Mustafa Ahmedzai', 'authorUrl': 'https://www.blogger.com/profile/11681339458447132019', 'baseUri': 'https://www.blogger.com', 'maxThreadDepth': 2;
// 0)
cursor = parseInt(items[items.length - 1].timestamp) + 1;

var bodyFromEntry = function(entry)
if (entry.gd$extendedProperty)
for (var k in entry.gd$extendedProperty)
if (entry.gd$extendedProperty[k].name == 'blogger.contentRemoved')
return '' + entry.content.$t + '';

return entry.content.$t;

var parse = function(data)
cursor = null;
var comments = ;
if (data && data.feed && data.feed.entry)
for (var i = 0, entry; entry = data.feed.entry[i]; i++)
var comment = ;
// comment ID, parsed out of the original id format
var id = /blog-(d+).post-(d+)/.exec(entry.id.$t);
comment.id = id ? id[2] : null;
comment.body = bodyFromEntry(entry);
comment.timestamp = Date.parse(entry.published.$t) + '';
if (entry.author && entry.author.constructor === Array)
var auth = entry.author[0];
if (auth)
comment.author =
name: (auth.name ? auth.name.$t : undefined),
profileUrl: (auth.uri ? auth.uri.$t : undefined),
avatarUrl: (auth.gd$image ? auth.gd$image.src : undefined)
;

if (entry.link)
if (entry.link[2])
comment.link = comment.permalink = entry.link[2].href;

if (entry.link[3])
var pid = /.*comments/default/(d+)?.*/.exec(entry.link[3].href);
if (pid && pid[1])
comment.parentId = pid[1];

comment.deleteclass = 'item-control blog-admin';
if (entry.gd$extendedProperty)
for (var k in entry.gd$extendedProperty)
if (entry.gd$extendedProperty[k].name == 'blogger.itemClass')
comment.deleteclass += ' ' + entry.gd$extendedProperty[k].value;
else if (entry.gd$extendedProperty[k].name == 'blogger.displayTime')
comment.displayTime = entry.gd$extendedProperty[k].value;

comments.push(comment);

return comments;
;
var paginator = function(callback) {
if (hasMore()) {
var url = config.feed + '?alt=json&v=2&orderby=published&reverse=false&max-results=50';
if (cursor)
url += '&published-min=' + new Date(cursor).toISOString();

window.bloggercomments = function(data) {
var parsed = parse(data);
cursor = parsed.length

Umer PrinceOct 24, 2016, 10:45:00 AM

Its cool!

Looks like a good widget for newbies at Blogger platform :)

ReplyDelete

Abdul SamadOct 27, 2016, 2:45:00 PM

Hello Mustafa,

This is something that we can say unique! :)

Just awesome MUSTAFA Bhai! :)

Keep it up :)

ReplyDelete

Mo MahtabNov 7, 2016, 8:55:00 PM

How i give every label differenticon?

ReplyDelete

Muhammad MairajNov 16, 2016, 3:17:00 PM

Hi Mohammad,

First of all thanks for sharing with us an an amazing blogger widget. By using blogger slider in blogger one can easily display the recent post nicely and effectively.

Keep sharing informative content :)

Regards

Mairaj

ReplyDelete

SL BloggerNov 29, 2016, 6:19:00 AM

Thanks for sharing with your tips design..

ReplyDelete

SL BloggerNov 29, 2016, 6:41:00 AM

am sorry. But, this tips not work to my site. Please help me Mr Mohammad?

ReplyDelete

Henry emmanuelNov 30, 2016, 4:30:00 AM

Nice widget. I bumped into your blog today and to be sincere I am already liking it.

The template on your blog looks unique from other blogger blog. Just like a WordPress theme.

However I have a little tiny question I need to clarify.

I have a blog at techviola and I am finding it difficult to add a title to it. Once I add a title from the setting option e.g Techviola | android, how to guides.
It usually shows at my blog footer.

Can you tell me the right way to fix this?

ReplyDelete