How to Add Featured Content Slider on your Blog

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
How to Add Featured Content Slider on your Blog
  • Click on the Gadget Option and then you will see a new window open, select or Add the HTML/JAVASCRIPT button
How to Add Featured Content Slider on your Blog
  • 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
How to Add Featured Content Slider on your Blog

  • 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='http://1.bp.blogspot.com/-pW1Q3g4LaQs/UTgTlnyigTI/AAAAAAAAFo0/41h4GiZIKdo/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='http://3.bp.blogspot.com/-relXXbwcQns/UTgTmBLbCKI/AAAAAAAAFo8/qgkljOMgz18/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='http://3.bp.blogspot.com/-cbpDGLe-EL0/UTgTlY4g89I/AAAAAAAAFos/xzFysraKDO8/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='http://2.bp.blogspot.com/-N0dR4oHgph0/UTgTnmPXoaI/AAAAAAAAFpE/Fp-LFSL5q6k/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='http://3.bp.blogspot.com/-5RIBk6ex0LI/UTgTsrY32SI/AAAAAAAAFpU/1Q24lGhsy5U/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 hussain ali

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.

10 comments:

  1. Your post about web design and development is really interesting. When comes to content management system, wordpress is widely used tool. It loaded with various stunning features that make website creation lot simpler. Wordpress Training in Chennai

    ReplyDelete
  2. hi ,
    my slider is not moving I don't know why can you help me?
    http://holistic-hs.blogspot.ca/

    ReplyDelete
    Replies
    1. YOU REPLACE LINK WITH YOUR OWN POST

      Delete
  3. I really appreciate this wonderful post that you have provided for us. I assure this would be beneficial for most of the people. AdLock Media

    ReplyDelete
  4. please i want it show the recent post what code should i use please

    ReplyDelete
  5. How can I increase it's width to fit in the whole header?

    ReplyDelete
  6. istqb training in chennai
    This is Great and very useful advice with in this post. Thank you.

    ReplyDelete