How to Add Featured Content Slider on your Blog

10:09 PM

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-slider clearfix'>
<div class='fp-slides-container clearfix'>

<div class='fp-slides'>

<!-- Slide 1 Code Start -->
<div class='fp-slides-items'>
<div class='fp-thumbnail'>
<a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6gWt-npmaT-HvtQSl9mr0jchfuQGNGHJVtZuPL0kSkymfsjam4I8PpcNQ6Kv2dE8D4S4mCqyG_sMqTwgdudXwac-tO2Jww1Cmi1YsBUamM9C38XIgaG60sh0AgFhMjr8zvl_p_w7SLGm-/s1600/1.jpg'/></a>
</div>
<div class='fp-content-wrap'>
<div class='fp-content'>
<h3 class='fp-title'>
<a href='#'>This is default featured slide 1 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 1 Code End -->

<!-- Slide 2 Code Start -->
<div class='fp-slides-items'>
<div class='fp-thumbnail'>
<a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpwyEl3iL-uoaAiRZoN3ghSlblxyC39YUV93EA4caleFm1-Yh6h0C6p6-A7xBz1tU5RQnEyd6LVucxMiSaaF5tBQCjv9WpdA0lYrXu6G7aQrFcFAQyc6G9mUWqJBgBOPjjbxEmAHSwVmXG/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'>
<a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLUbrop4mwogK5coMPOHIrdPZe_It-O5PIBtM4q8-TwH4jFWoQH2_ueSqmuud7Bkx1d0l9E7Y83q82NG5Ns71AOMciR44mKeSjYKZPvlsnqEB1jsBkKViw0ctzqA0YHJIGfJRy_kKnCZDq/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>
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 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/AVvXsEh2iGJ8-RoVne7cpFwMjsejyK7049IWGA4NO_vgRyRd4I7Rcl71kQgupSwPjohewl3gaI0QoNG3EPNck1yUUwUun23hPnS-HhZ6q2RhN4r1rQ9sOmZn-pZho7_Cw-UgW-THpIJWL_rfPOHL/s1600/4.jpg'/></a>
</div>
<div class='fp-content-wrap'>
<div class='fp-content'>
<h3 class='fp-title'>
<a href='#'>This is default featured slide 4 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 4 Code End -->

<!-- Slide 5 Code Start -->
<div class='fp-slides-items'>
<div class='fp-thumbnail'>
<a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1lkSs0M8NGeLnQg6JvLmE3L8Aham-gn_VfM4VoIbVljo382FDIeKCVGol2sdnX_mrjTJmOBkSP4tTgn5f_oUZViAQll0f5VxoZTO6SiE1VA2Xs6LNF-ZW5MhTnRNzAK0yFyQAalERIO6X/s1600/5.jpg'/></a>
</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>
<div style='clear:both;'/>

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

<!-- Featured Content Slider End -->
    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.

    You Might Also Like

    2 comments

    1. WordPress içeriklerinizin daha şık ve vitrin görünümünde çıkmasını sağlayarak Featured Content and Slider eklentisi, WP için özel olarak tasarlanmış ara yüzü ile kullanıcılara farklı bir aksam sunuyor. WP tabanlu web siteleri için hizmet sunan bu eklenti sayesinde ziyaretçilerinize görsel açıdan daha harika bir manşet sistemi sunabilirsiniz. Ana sayfada kolonlar halinde karşımıza çıkan bu manşet sisteminde içerik ile ilgili görsel, başlık ve kısa bir açıklama ile birlikte “Detaylı Görünüm” ekleri bulunuyor. Manşet ara yüzünde sağa sola giden ok sekmeleri ile daha fazla konu içeriğinin görüntülenmesi sağlanabiliyor.
      https://www.dogushan.com/featured-content-and-slider-eklentisi-manset-ve-kullanimi/
      https://www.dogushan.com/

      ReplyDelete
    2. İzmir ve çevresinde organizasyon firması denince akla gelen ilk şirket isminden de anlaşılacağı gibi İzmir organizasyon firmasıdır. Yapığı işleri kısaca açıklamamız gerekirse, Acilis Organizasyonu, balon susleme, evlilik teklifi paketleri, dugun organizasyonu mekanları, tekne kiralama ve catering hizmetlerine imza atmış bulunmaktadır. Sizlerde profesyonel bir organizasyon firmasıyla çalışmak isterseniz bir telefon kadar uzağınızdayız.

      ReplyDelete