shop
etsy

Slider

There are two options available to display posts on slider:
1. Select some posts by adding a specific label on the chosen posts
2. Display the most recent published posts


Code to display posts of one specific label

You can choose some random posts and then add the label, or you can use an existing label and make the slider thematic. In this article, a label named featured will be used as an example but you can use any word you want.

Adding the "featured" label on published posts

If you don't have a label named featured, follow these steps:
  1. Go to Posts on the Blogger dashboard vertical menu.
  2. Locate the posts you want featuring and check the little box nearby their titles.
  3. Locate the label icon option on the menu above the posts list and click on it to open the dropdown.
  4. Click on New label...
  5. On Enter the new label field, write featured
  6. Click on OK.

Set the label on the slider code

This is the slider code for posts with a certain label:
<div class='cycle-slideshow' data-cycle-fx='fade' data-cycle-manual-speed='800' data-cycle-pause-on-hover='true' data-cycle-slides='li' data-cycle-swipe='true' data-cycle-timeout='3000'>
<script src="/feeds/posts/default/-/featured?orderby=published&amp;alt=json-in-script&amp;callback=showgalleryposts&amp;max-results=80"></script>
<div class="cycle-prev"></div>
<div class="cycle-next"></div>
</div>
The blue text referring to the label added to the posts before.
Replace it with your own label, if it's the case.
Important: Blogger labels are case sensitive. It means that travel, Travel, and TRAVEL are three different labels. Make sure you are using the correct one.


Code to display the most recent posts

If you want to display your posts sorting by published order, this is the code for your slider:
<div class='cycle-slideshow' data-cycle-fx='fade' data-cycle-manual-speed='800' data-cycle-pause-on-hover='true' data-cycle-slides='li' data-cycle-swipe='true' data-cycle-timeout='3000'>
<script src="/feeds/posts/default/?orderby=published&amp;alt=json-in-script&amp;callback=showgalleryposts&amp;max-results=80"></script>
<div class="cycle-prev"></div>
<div class="cycle-next"></div>
</div>



Changing the slider effect (Optional)

You can change the slider effect. Two effects are available:
  • scrollHorz
  • fade
<div class='cycle-slideshow' data-cycle-fx='scrollHorz' data-cycle-manual-speed='800' data-cycle-pause-on-hover='true' data-cycle-slides='li' data-cycle-swipe='true' data-cycle-timeout='3000'>
<script src="/feeds/posts/default/?orderby=published&amp;alt=json-in-script&amp;callback=showgalleryposts&amp;max-results=80"></script>
<div class="cycle-prev"></div>
<div class="cycle-next"></div>
</div>
The orange text referring to the slide effect your slider will have.
  • scrollHorz: posts will slide to side. See live example: Ethereal theme has scrollHorz effect.
  • fade: posts will fade. See live example: Vanilla theme has fade effect.



Troubleshooting

The slider isn't working

Contact Form