HOW TO DISPLAY RECENT POSTS DYNAMICALLY BLOGGER SLIDER

Ever wondered how to display your most recent posts from a selected category inside a dynamic Image slider? Lets create a responsive content slider 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!

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 a automatic list of random posts. We are sharing with you all for the first time, all these three amazing blogger 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.

Features of Blogger Slider

Blogger Slider is an advanced widget equipped with these features:

1. Author Avatar - Unique!

2. Displays recent posts dynamically inside Slider. - Unique!

3 . Displays recent posts from a specific category/label.

4. Slider with two animations: Slide & Fade - Unique!

5. Clickable Comments Count

6. Custom Date Format

7. Clickable Animated Featured Image Thumbnails

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

Born the son of a poor immigrant, Vito is a beaten down Italian American who is trying to escape the life of poverty that consumed his childhood. It was on the streets that Vito learns that joining the Mafia is the only route to wealth and respect for people of his standing.

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

10. Title Length is adjustable

Most Responsive Content Slider For Blogger Blogs!

Blogger 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 Blogger Slider To Your Blogspot TemplateFollow these simple steps:

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:

Note: Do not add JQuery, FontAwesome, FlexSlider or Oswald source links to your template if you are already using them on your site.

Also Read ➡ "BUY .INFO DOMAIN NAME ONLY AT 11.RS

Also Read ➡ "HOW TO GET EASILY BACKLINK FROM PINTREST WEBSITE

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

/*######### Blogger Slider By MyBloggerTricks #############*/ 
.mbt-s{margin:0 5px;border:0;width:100%;overflow:hidden} 
.mbt-s .slides{list-style-type:none;margin:0 auto;padding:0} 
.mbt-s li{color:#fff;font-family:helvetica;font-size:12px;overflow:hidden;padding-top:10px} 
.mbt-s .flex-control-nav li{display:inline-block;margin:0 2px} 
.mbt-s .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-s .flex-control-paging{display:none} 
.flex-direction-nav{position:relative;top:-250px} 
.mbt-s .flex-control-nav a.flex-active{background-color:#84db06;border:1px solid #90f128} 
.mbt-s .flex-div{margin:0 auto;display:block;padding:0!important;position:relative;height:370px} 
.mbt-s li a{color:#0080ff;text-decoration:none} 
.mbt-s i{color:#999;padding-right:5px} 
.mbt-s .iline{line-height:2em;margin:0;position:relative;top:-90px;background:#31363a;padding:3px 10px;display:inline-block} 
.mbt-s .icontent{line-height:1.5em;margin-top:5px} 
.mbt-s div span{margin:0 5px 0 0;display:inline-block;font-weight:400} 
.mbt-s .mbttitle{font-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:hover{color:#fff;text-decoration:none} 
.mbt-s .iedit a{text-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:before{font-family:fontAwesome;position:relative;padding-right:8px;color:#fff} 
.mbt-s .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-s .iFeatured{overflow:hidden;position:relative;margin:0;padding:0;width:100%} 
.mbt-s .iFeatured a{background:none;padding:0;display:block;border:0px solid #eee;margin:0 -1px} 
.mbt-s .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-s .iFeatured:hover img{opacity:1;-moz-transform:scale(1.4);-webkit-transform:scale(1.4);transform:scale(1.4)} 
.mbt-s .icomments a{color:#0080ff;font-family:arial;font-size:12px} 
.mbt-s .icomments a:hover{text-decoration:underline} 
.mbt-s .icomments:before{content:'\f086';padding:0 3px 0 7px;color:#fff} 
.mbt-s .idate{color:#fff;padding:3px 4px;font-family:arial;font-size:11px} 
.mbt-s .idate:before{content:'\f073';padding:0 5px;color:#fff}

6. 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.

7. Save your template.

8. Now go to Blogger > Layout

9. Select "Add a Gadget"
10.Choose "HTML/JavaScript" gadget.
11.Keep the title field empty and then paste the following code inside it:

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 yellow highlighted 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

12. Click Save and you are all done!

Need Help In Installation of Blogger 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 tutorials 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! =)

Search This Blog

SECURE IDEAS