How to Add Featured Content Slider on your Blog

When we compare Blogger with WordPress, we see that blogger is limited features compare WordPress such as You can easily install plugins on wordpress but difficult to install plugins on Blogger. You can only changing in blogger template with manually. Today i will guide you how to add feature post slider in blogger template which looks like a wordpress theme. Follow this simple steps to add a extra feature in blogger template...

• After Login go to your blogger Dashboard and select layout option from the left side menu

• Click on the Gadget Option and then you will see a new window open, select or Add the HTML/JAVASCRIPT button

• After this you will see a new box will open like this. Choose your title box and write any title in the box which you like for example Featured Posts

• Now Copy the below code and then paste this in the HTML box content field

<!-- Featured Content Slider Started -->

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>

<b:if cond='data:blog.pageType != &quot;item&quot;'>

div class='fp-slides-container clearfix'>

<div class='fp-slider clearfix'>

<div class='fp-slides'>

<!-- Slide 1 Code Start -->

<a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2bpUAjwe_wUFFpiFNc96WWHYmKnnIqYdj_bYrc98aDCz9FDkRai57bmXytfRwrCMxHQfevk5mC-JrsvcOXoi1TWTI8Tz_XJRg2FxAfyP1C8ku2EhKwc1A-yURpi3bIiwRhseZ7kxcZJFz/s1600/1.jpg'/></a>

<div class='fp-slides-items'>

<div class='fp-thumbnail'>

</div>

<div class='fp-content-wrap'>

<div class='fp-content'>

<a href='#'>This is default featured slide 1 title</a>

<h3 class='fp-title'>

</h3>

<p>

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.This theme is Bloggerized by Lasantha Bandara - bangashtemplates.blogspot.com. 

</p>

</div>

<div class='fp-prev-next-wrap clearfix'>

<a class='fp-next' href='#fp-next'/>

</div>

<a class='fp-prev' href='#fp-prev'/>

</div>

</div>

<!-- Slide 1 Code End -->

<div class='fp-thumbnail'>

<!-- Slide 2 Code Start -->

<div class='fp-slides-items'>

<a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgv-8idZOaiF42updedYPvD9L1OA8X27RaMBLhSkGo73x4CzDW9oJCNg1xcOmBlAF8_HkfdZx7_60PnOc76Yiz4fQboUI-niQ-hrua6ToLhLsC8tut-VJbDMjec5UDWudAsA3-IHkm4jiik/s1600/2.jpg'/></a>

</div>

<div class='fp-content-wrap'>

<div class='fp-content'>

<h3 class='fp-title'>

<a href='#'>This is default featured slide 2 title</a>

</h3>

<p>

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.This theme is Bloggerized by Lasantha Bandara - bangashtemplates.blogspot.com. 

</p>

</div>

<div class='fp-prev-next-wrap clearfix'>

    <a class='fp-next' href='#fp-next'/>

    <a class='fp-prev' href='#fp-prev'/>

</div>

</div>

</div>

<!-- Slide 2 Code End -->

<!-- Slide 3 Code Start -->

<div class='fp-slides-items'>

<div class='fp-thumbnail'>

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.This theme is Bloggerized by Lasantha Bandara - bangashtemplates.blogspot.com. 

<a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6CU1hBDMh_1uU5LV7KMvO-vy7i8oDoO3IprIERFrGOvwvAWAoRdDS3P58eOkrN9d1bQlk20h2eui6ZI4JjOTKxzS0HuqubNmmNWt0WpQGPoC-vnxG5_L3v_JyAefv4j60dwSFURfRdKiG/s1600/3.jpg'/></a>

</div>

<div class='fp-content-wrap'>

<div class='fp-content'>

<h3 class='fp-title'>

<a href='#'>This is default featured slide 3 title</a>

</h3>

<p>

</p>

</div>

<div class='fp-prev-next-wrap clearfix'>

    <a class='fp-next' href='#fp-next'/>

<a href='#'>This is default featured slide 4 title</a>

<a class='fp-prev' href='#fp-prev'/>

</div>

</div>

</div>

<!-- Slide 3 Code End -->

<!-- Slide 4 Code Start -->

<div class='fp-slides-items'>

<div class='fp-thumbnail'>

<a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPkN0XZSpx6PnoEoJytHsg2FypCcmKO82jO_S6rIUl_wF19OJJbBBTpsSGFhx_DxfrEAN1Ae6UdD8iwllqc2N_DpLTHhSPUkkmb04crzzswPia-UQheW1EZnvcKl0YFJ64Y1xcYpOM84ZW/s1600/4.jpg'/></a>

</div>

<div class='fp-content-wrap'>

<div class='fp-content'>

<h3 class='fp-title'>

</h3>

<p>

<div class='fp-slides-items'>

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.This theme is Bloggerized by Lasantha Bandara - bangashtemplates.blogspot.com. 

</p>

</div>

<div class='fp-prev-next-wrap clearfix'>

    <a class='fp-next' href='#fp-next'/>

    <a class='fp-prev' href='#fp-prev'/>

</div>

</div>

</div>

<!-- Slide 4 Code End -->

<!-- Slide 5 Code Start -->

<div class='fp-thumbnail'>

<a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhimy09GxF3ZZmSMMYsgftdUoJaP5RCBcNz2u2yOa67g74kl46LT7LABjeo-MRo9x8tw-GDGHQN7iEMl6PRFWbDd1RRdNQUBzf2CcEIZw3k3lmAGrS3IFnMHg_pd2rU0ucWNeyjI6lqYFxg/s1600/5.jpg'/></a>

</div>

</div>  

<div class='fp-content-wrap'>

<div class='fp-content'>

<h3 class='fp-title'>

<a href='#'>This is default featured slide 5 title</a>

</h3>

<p>

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.This theme is Bloggerized by Lasantha Bandara - bangashtemplates.blogspot.com. 

</p>

</div>

<div class='fp-prev-next-wrap clearfix'>

    <a class='fp-next' href='#fp-next'/>

    <a class='fp-prev' href='#fp-prev'/>

</div>

</div>

</div>

<!-- Slide 5 Code End -->

</div>

<div class='fp-nav'>

    <span class='fp-pager'/>

</div>

</div>

<div style='clear:both;'/>

</b:if></b:if>

<!-- Featured Content Slider End -->

• Now Replace this

  
  

  This is default featured slide 1 title" with your featured post title.

  "#" with your featured post URL.

  "http://1.bp.blogspot.com/pW1Q3g4LaQs/UTgTlnyigTI/AAAAAAAAFo0/41h4GiZIKdo/s1600/1.jpg" with your slider image

  Go to Blogger edit html and find these sentences. Replace these sentences with your own descriptions.

  
  

  Now we configured the first slid, by this method you can change all featured slides with your own posts.

  Change highlighted link bangashtemplates.blogspot.com with your own blog links and then click to save button. After this you will see successful change in your blogger template.

Share on Google Plus

About khansadfdf

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.