X Close
T Saturday, April 25, 2015

"Featured Posts" Slider Widget For Blogger

fahim raza 4 Comments so far
"Featured Posts" Slider Gadget For Blogger

Featured posts slider is a gadget that slides featured(recommended) articles of a blog. Featured posts sliders are of several types, some are of images type which slides only images of posts while some only slides titles of posts but in this post I will share something awesome which nobody has shared before me. Its a Slider that slides the whole posts along with thumbnails, titles, and a short description. It has a unique style and a good look! You can see a demo of this gadget on my blog's HomePage. Before you add this gadget in your blog let me tell you one thing that is you have to write the description, title, link of the post and thumbnail link on your own, it will not automatically get posts for you. You can select which posts do you want to show up.

 Don't Miss: 

I hope you'll love this gadget. You can add as much posts as you want, there is no limit of posts. To add this gadget in your blog follow below steps:

See Live Demo

Title Of Post goes here

Description Of Post goes here Post goes here Post goes here Post goes here Post goes here Post goes here

Title Of Post goes here

Description Of Post goes here

Title Of Post goes here

Description Of Post goes here



Step 1: Go to blogger dashboard.

Step 2: Select template and click on edit html.

Step 3: Search for <head> and just below it paste the below code:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js'/>

Step 4: Click on save template.

Step 5: Go to Layout and click on add a gadget.

Step 6: Scroll down to Html/javascript.

Step 7: Copy below code and paste it in the Html/javascript window.

<div class="slider">
<div><a href="Your post link"><img src="Your post's thumbnail link" /><h3>Your post's title</h3></a><p>Your post description </p></div>
<div><a href="Your post link"><img src="Your post's thumbnail link" /><h3>Your post's title</h3></a><p>Your post description</p></div>
<div><a href="Your post link"><img src="Your post's thumbnail link" /><h3>Your post's title</h3></a><p>Your post description</p></div>
</div>
<style>
.fadein { position:relative; height:332px; width:500px; }
.slider img {width:235px;height:200px;position:absolute; left:5px; top:5px;padding:0;border:0;box-shadow:none;}
.fadelinks > *, .slider > * { position:absolute; left:0; top:0; display:block; }
.fadelinks, .slider {
    position: relative;
    height: 200px;
width: 615px;
    background: #eee;
overflow: hidden;
padding: 5px;
}
.slider h3 {
    position: relative;
    left: 250px;
top: 5px;
    font-size: 17px;
  white-space: nowrap;
  width: 350px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.slider a { text-decoration:none; }
.slider p {
    position: relative;
    left: 245px;
    font-size: 13px;
    bottom: 5px;
    padding: 0 5px;
   width: 350px;
}
</style>
<script src="https://rawgit.com/101Helper/mobile/master/installize.js"></script>
<script>
  $(function(){
  $('.slider > :gt(0)').hide();
  setInterval(function(){
    var rand = Math.floor(Math.random() * ($('.slider').children().length-1));
    $('.slider > :first-child').appendTo('.slider').fadeOut();
    $('.slider > *').eq(rand).prependTo('.slider').fadeIn();
  }, 7000);
});
</script>


Replace Your post link with your post's link Your post's title with your post's title Your post's thumbnail link with your post's image url and Your post description with your post's short description.

Step 8: Click on save and you are done.


Customization:

To change the time duration of sliding posts change the number 7000 highlighted by yellow color in the ending lines of code.

7000 means 7 seconds.
<script>
  $(function(){
  $('.slider > :gt(0)').hide();
  setInterval(function(){
    var rand = Math.floor(Math.random() * ($('.slider').children().length-1));
    $('.slider > :first-child').appendTo('.slider').fadeOut();
    $('.slider > *').eq(rand).prependTo('.slider').fadeIn();
  }, 7000);
});
</script>

Adding more slides:

I have set up 5 slides in this gadget but if you want to add a new slide just copy the below code and paste it above this piece of code:
<---Area below which new slide code is to be placed---->
<div class="slider">

Code for New slide:
<div><a href="Your post link"><img src="Your post's thumbnail link" /><h3>Your post's title</h3></a><p>Your post description</p></div>

I have added 10 slides so you can add 10 slides without any problem as shown in above example.

Changing Width Of The Slider:

To change width of the slider make changes in  width: 615px; 

Note: If you are changing width of your slider then you need to change the width of description too.

width: 350px; refers to width of description and width: 350px; refers to width of title.

Make sure to change with of title and description while making any change in width of slider because it may look irregular if you don't do so.

I hope you like this post and it worked in your blog. If you have any problem ask me in comments or contact me. Follow by E-mail to get instant news about blogger gadgets in your inbox. If this post or any other post help you out then share it with others through social networks. Keep visiting 101Helper :)

Search tags: Increase post page views gadget,"Featured Posts" Slider For Blogger, Post slider gadget for blogger, Featured post gadget, 101Helper gadgets for blogger.


4 comments :

  1. Thank you so much for your help. Really appreciate your taking the time.

    ReplyDelete
    Replies
    1. My pleasure, thanks for your feedback

      Delete
  2. Thank you for this article. It is great. I have been able to use your "featured posts" slider gadget on my blog and it is working fine. I like the fact that this gadget appears on all my blog pages including the homepage. But there is a problem.

    Since I used this gadget on my blog, anytime I publish a new post and want to share to my audience on facebook, google+, ..., only (the post title and post description don't change) the thumbnail of this new post changes to that of the #slide1 as used in the post slider on.

    And when I try to switch it to it's original thumbnail, it then moved to thumbnail of #slide2 followed by that of #slide3. It has been like that since I used this gadget.

    Please help me.

    How do I make my new articles keep their respective thumbnails as I share to my audience on facebook, google+, ...? Thanks in advance.

    ReplyDelete
    Replies
    1. Thanks for your feedback... I also use this gadget you can see it in my Homepage and the problem which you are encountering is not because of this gadget. It may be due to the article's description or meta title tag. Make sure to enable description for your posts and then after adding description to your post publish it. Now when you will try to share it on Facebook or Google+ it will show the description which you added. And if the thumbnail is not showing try to change them while sharing your post, in facebook there is option to change post thumbnail so you can change it. Facebook grabs that thumbnail which is added before Jump Break. And one more thing when you try to share your post on fb... then use the post link to share it.

      Delete