1. Select some posts by adding a specific label on the chosen posts
2. Display the most recent published 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
- Go to Posts on the Blogger dashboard vertical menu.
- Locate the posts you want featuring and check the little box nearby their titles.
- Locate the label icon option on the menu above the posts list and click on it to open the dropdown.
- Click on New label...
- On Enter the new label field, write featured
- Click on OK.
Set the label on the slider code
The blue text referring to the label added to the posts before.<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/-/featured?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=80"></script> <div class="cycle-prev"></div> <div class="cycle-next"></div> </div>
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='
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&alt=json-in-script&callback=showgalleryposts&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
The orange text referring to the slide effect your slider will have.<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&alt=json-in-script&callback=showgalleryposts&max-results=80"></script> <div class="cycle-prev"></div> <div class="cycle-next"></div> </div>
- 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.