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:
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:
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'/>
Step 2: Select template and click on edit html.
Step 3: Search for <head> and just below it paste the below code:
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'/>
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.
<style>
.slideshow{ position: relative;height: 225px;width: 98%; left: 7px; top: 3px; }
#slide1, #slide2, #slide3, #slide4, #slide5, #slide6, #slide7, #slide8, #slide9, #slide10{ position: absolute; }
.slideshow img {
box-shadow: none;
border: 2px solid #ddd;
border-radius: 8px;
height: 190px;
width: 210px;
position: relative;
top: 0px;
}
.slideshow p {
position: relative;
bottom: 190px;
left: 226px;
font-family: 'Open Sans Condensed',sans-serif;
font-size: 123%;
color: #9F9F9F;
width: 410px;
height: 170px;
}
.slideshow a {
position: absolute;
font-family: 'Open Sans Condensed',sans-serif;
font-size: 140%;
font-weight: bold;
top: 8px;
text-decoration: none;
left: 235px;
text-transform: capitalize;
white-space: nowrap;
width: 25em;
overflow: hidden;
text-overflow: ellipsis;
letter-spacing: 0.5px;
color: #444;
}
.slideshow a:hover {
color:#4491f0;
}
.slides {
background: #eee;
height: 195px;
width: 638px;
border: 2px solid #ddd;
padding: 10px;
border-radius: 7px;
}
</style>
<div class="slideshow">
<div id="slide1" class="slides">
<a href="Your post link">Your post's title</a>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkXdGL8v1HqrozMeuS6Nscg_Lp5Da3DA1LhTB6iJuyiTg2W16C9yHhETCY7LTqBm8nTjFlprNPTo1FSSuWSzddtj5GVtrsRSkWsU6TrwC_8G8RVtNMV5xmwgdQdGlXLHxpwhGxCW3OUPs/s320/101helper.png" />
<p>Your post description</p>
</div>
<div id="slide2" class="slides">
<a href="Your post link">Your post's title</a>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkXdGL8v1HqrozMeuS6Nscg_Lp5Da3DA1LhTB6iJuyiTg2W16C9yHhETCY7LTqBm8nTjFlprNPTo1FSSuWSzddtj5GVtrsRSkWsU6TrwC_8G8RVtNMV5xmwgdQdGlXLHxpwhGxCW3OUPs/s320/101helper.png" />
<p>Your post description</p>
</div>
<div id="slide3" class="slides">
<a href="Your post link">Your post's title</a>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkXdGL8v1HqrozMeuS6Nscg_Lp5Da3DA1LhTB6iJuyiTg2W16C9yHhETCY7LTqBm8nTjFlprNPTo1FSSuWSzddtj5GVtrsRSkWsU6TrwC_8G8RVtNMV5xmwgdQdGlXLHxpwhGxCW3OUPs/s320/101helper.png" />
<p>Your post description</p>
</div>
<div id="slide4" class="slides">
<a href="Your post link">Your post's title</a>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkXdGL8v1HqrozMeuS6Nscg_Lp5Da3DA1LhTB6iJuyiTg2W16C9yHhETCY7LTqBm8nTjFlprNPTo1FSSuWSzddtj5GVtrsRSkWsU6TrwC_8G8RVtNMV5xmwgdQdGlXLHxpwhGxCW3OUPs/s320/101helper.png" />
<p>Your post description</p>
</div>
<div id="slide5" class="slides">
<a href="Your post link">Your post's title</a>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkXdGL8v1HqrozMeuS6Nscg_Lp5Da3DA1LhTB6iJuyiTg2W16C9yHhETCY7LTqBm8nTjFlprNPTo1FSSuWSzddtj5GVtrsRSkWsU6TrwC_8G8RVtNMV5xmwgdQdGlXLHxpwhGxCW3OUPs/s320/101helper.png" />
<p>Your post description</p>
</div>
</div>
<script>
$(function () {
$('.slideshow div').hide(); // hide all slides
$('.slideshow div:first-child').show(); // show first slide
setInterval(function () {
$('.slideshow div:first-child').fadeOut(500)
.next('div').fadeIn(1000)
.end().appendTo('.slideshow');
},
7000); // slide duration
});
</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 () {
$('.slideshow div').hide(); // hide all slides
$('.slideshow div:first-child').show(); // show first slide
setInterval(function () {
$('.slideshow div:first-child').fadeOut(500)
.next('div').fadeIn(1000)
.end().appendTo('.slideshow');
},
7000); // slide duration
});
</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 where code is to be placed---->
</div>
<script>
$(function () {
$('.slideshow div').hide(); // hide all slides
$('.slideshow div:first-child').show(); // show first slide
setInterval(function () {
$('.slideshow div:first-child').fadeOut(500)
.next('div').fadeIn(1000)
.end().appendTo('.slideshow');
},
7000); // slide duration
});
</script>
Code for New slide:
<div id="slide(No of slide)" class="slides">
<a href="Your post link">Your post's title</a>
<img src="Your post's thumbnail link" />
<p>Your post description</p>
</div>
Remember to replace (No of slide) with slide number e.g after 5 it will be 6(slide6).
With the addition of a new slide you have to add a piece of code in css part also, so add #slide(No of slide) at the top of the code. Don't forget to add a coma(,) between every slide you add and also use hashes(#) before slide name. For example if you want to add slide no 6 your code should be:
<div id="slide6" class="slides">
<a href="Your post link">Your post's title</a>
<img src="Your post's thumbnail link" />
<p>Your post description</p>
</div>
and css code should be #slide6.
Overall code should look like below:
<----Example Starts Here---->
<style>
.slideshow{ position: relative;height: 225px;width: 98%; left: 7px; top: 3px; }
#slide1, #slide2, #slide3, #slide4, #slide5, #slide6, #slide7, #slide8, #slide9, #slide10{ position: absolute; }
.slideshow img {
box-shadow: none;
border: 2px solid #ddd;
border-radius: 8px;
height: 190px;
width: 210px;
position: relative;
top: 0px;
}
.slideshow p {
position: relative;
bottom: 190px;
left: 226px;
font-family: 'Open Sans Condensed',sans-serif;
font-size: 123%;
color: #9F9F9F;
width: 410px;
height: 170px;
}
.slideshow a {
position: absolute;
font-family: 'Open Sans Condensed',sans-serif;
font-size: 140%;
font-weight: bold;
top: 8px;
text-decoration: none;
left: 235px;
text-transform: capitalize;
white-space: nowrap;
width: 25em;
overflow: hidden;
text-overflow: ellipsis;
letter-spacing: 0.5px;
color: #444;
}
.slideshow a:hover {
color:#4491f0;
}
.slides {
background: #eee;
height: 195px;
width: 638px;
border: 2px solid #ddd;
padding: 10px;
border-radius: 7px;
}
</style>
<div class="slideshow">
<div id="slide1" class="slides">
<a href="Your post link">Your post's title</a>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkXdGL8v1HqrozMeuS6Nscg_Lp5Da3DA1LhTB6iJuyiTg2W16C9yHhETCY7LTqBm8nTjFlprNPTo1FSSuWSzddtj5GVtrsRSkWsU6TrwC_8G8RVtNMV5xmwgdQdGlXLHxpwhGxCW3OUPs/s320/101helper.png" />
<p>Your post description</p>
</div>
<div id="slide2" class="slides">
<a href="Your post link">Your post's title</a>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkXdGL8v1HqrozMeuS6Nscg_Lp5Da3DA1LhTB6iJuyiTg2W16C9yHhETCY7LTqBm8nTjFlprNPTo1FSSuWSzddtj5GVtrsRSkWsU6TrwC_8G8RVtNMV5xmwgdQdGlXLHxpwhGxCW3OUPs/s320/101helper.png" />
<p>Your post description</p>
</div>
<div id="slide3" class="slides">
<a href="Your post link">Your post's title</a>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkXdGL8v1HqrozMeuS6Nscg_Lp5Da3DA1LhTB6iJuyiTg2W16C9yHhETCY7LTqBm8nTjFlprNPTo1FSSuWSzddtj5GVtrsRSkWsU6TrwC_8G8RVtNMV5xmwgdQdGlXLHxpwhGxCW3OUPs/s320/101helper.png" />
<p>Your post description</p>
</div>
<div id="slide4" class="slides">
<a href="Your post link">Your post's title</a>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkXdGL8v1HqrozMeuS6Nscg_Lp5Da3DA1LhTB6iJuyiTg2W16C9yHhETCY7LTqBm8nTjFlprNPTo1FSSuWSzddtj5GVtrsRSkWsU6TrwC_8G8RVtNMV5xmwgdQdGlXLHxpwhGxCW3OUPs/s320/101helper.png" />
<p>Your post description</p>
</div>
<div id="slide5" class="slides">
<a href="Your post link">Your post's title</a>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkXdGL8v1HqrozMeuS6Nscg_Lp5Da3DA1LhTB6iJuyiTg2W16C9yHhETCY7LTqBm8nTjFlprNPTo1FSSuWSzddtj5GVtrsRSkWsU6TrwC_8G8RVtNMV5xmwgdQdGlXLHxpwhGxCW3OUPs/s320/101helper.png" />
<p>Your post description</p>
</div>
<div id="slide6" class="slides">
<a href="Your post link">Your post's title</a>
<img src="Your post's thumbnail link" />
<p>Your post description</p>
</div>
</div>
<script>
$(function () {
$('.slideshow div').hide(); // hide all slides
$('.slideshow div:first-child').show(); // show first slide
setInterval(function () {
$('.slideshow div:first-child').fadeOut(500)
.next('div').fadeIn(1000)
.end().appendTo('.slideshow');
},
7000); // slide duration
});
</script>
<----Example Ends Here---->
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: 638px;
Note: If you are changing width of your slider then you need to change the width of description too.
width: 410px; refers to width of description and width: 25em; 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.
<style>
.slideshow{ position: relative;height: 225px;width: 98%; left: 7px; top: 3px; }
#slide1, #slide2, #slide3, #slide4, #slide5, #slide6, #slide7, #slide8, #slide9, #slide10{ position: absolute; }
.slideshow img {
box-shadow: none;
border: 2px solid #ddd;
border-radius: 8px;
height: 190px;
width: 210px;
position: relative;
top: 0px;
}
.slideshow p {
position: relative;
bottom: 190px;
left: 226px;
font-family: 'Open Sans Condensed',sans-serif;
font-size: 123%;
color: #9F9F9F;
width: 410px;
height: 170px;
}
.slideshow a {
position: absolute;
font-family: 'Open Sans Condensed',sans-serif;
font-size: 140%;
font-weight: bold;
top: 8px;
text-decoration: none;
left: 235px;
text-transform: capitalize;
white-space: nowrap;
width: 25em;
overflow: hidden;
text-overflow: ellipsis;
letter-spacing: 0.5px;
color: #444;
}
.slideshow a:hover {
color:#4491f0;
}
.slides {
background: #eee;
height: 195px;
width: 638px;
border: 2px solid #ddd;
padding: 10px;
border-radius: 7px;
}
</style>
<div class="slideshow">
<div id="slide1" class="slides">
<a href="Your post link">Your post's title</a>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkXdGL8v1HqrozMeuS6Nscg_Lp5Da3DA1LhTB6iJuyiTg2W16C9yHhETCY7LTqBm8nTjFlprNPTo1FSSuWSzddtj5GVtrsRSkWsU6TrwC_8G8RVtNMV5xmwgdQdGlXLHxpwhGxCW3OUPs/s320/101helper.png" />
<p>Your post description</p>
</div>
<div id="slide2" class="slides">
<a href="Your post link">Your post's title</a>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkXdGL8v1HqrozMeuS6Nscg_Lp5Da3DA1LhTB6iJuyiTg2W16C9yHhETCY7LTqBm8nTjFlprNPTo1FSSuWSzddtj5GVtrsRSkWsU6TrwC_8G8RVtNMV5xmwgdQdGlXLHxpwhGxCW3OUPs/s320/101helper.png" />
<p>Your post description</p>
</div>
<div id="slide3" class="slides">
<a href="Your post link">Your post's title</a>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkXdGL8v1HqrozMeuS6Nscg_Lp5Da3DA1LhTB6iJuyiTg2W16C9yHhETCY7LTqBm8nTjFlprNPTo1FSSuWSzddtj5GVtrsRSkWsU6TrwC_8G8RVtNMV5xmwgdQdGlXLHxpwhGxCW3OUPs/s320/101helper.png" />
<p>Your post description</p>
</div>
<div id="slide4" class="slides">
<a href="Your post link">Your post's title</a>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkXdGL8v1HqrozMeuS6Nscg_Lp5Da3DA1LhTB6iJuyiTg2W16C9yHhETCY7LTqBm8nTjFlprNPTo1FSSuWSzddtj5GVtrsRSkWsU6TrwC_8G8RVtNMV5xmwgdQdGlXLHxpwhGxCW3OUPs/s320/101helper.png" />
<p>Your post description</p>
</div>
<div id="slide5" class="slides">
<a href="Your post link">Your post's title</a>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkXdGL8v1HqrozMeuS6Nscg_Lp5Da3DA1LhTB6iJuyiTg2W16C9yHhETCY7LTqBm8nTjFlprNPTo1FSSuWSzddtj5GVtrsRSkWsU6TrwC_8G8RVtNMV5xmwgdQdGlXLHxpwhGxCW3OUPs/s320/101helper.png" />
<p>Your post description</p>
</div>
</div>
<script>
$(function () {
$('.slideshow div').hide(); // hide all slides
$('.slideshow div:first-child').show(); // show first slide
setInterval(function () {
$('.slideshow div:first-child').fadeOut(500)
.next('div').fadeIn(1000)
.end().appendTo('.slideshow');
},
7000); // slide duration
});
</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 () {
$('.slideshow div').hide(); // hide all slides
$('.slideshow div:first-child').show(); // show first slide
setInterval(function () {
$('.slideshow div:first-child').fadeOut(500)
.next('div').fadeIn(1000)
.end().appendTo('.slideshow');
},
7000); // slide duration
});
</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 where code is to be placed---->
</div>
<script>
$(function () {
$('.slideshow div').hide(); // hide all slides
$('.slideshow div:first-child').show(); // show first slide
setInterval(function () {
$('.slideshow div:first-child').fadeOut(500)
.next('div').fadeIn(1000)
.end().appendTo('.slideshow');
},
7000); // slide duration
});
</script>
Code for New slide:
<div id="slide(No of slide)" class="slides">
<a href="Your post link">Your post's title</a>
<img src="Your post's thumbnail link" />
<p>Your post description</p>
</div>
Remember to replace (No of slide) with slide number e.g after 5 it will be 6(slide6).
With the addition of a new slide you have to add a piece of code in css part also, so add #slide(No of slide) at the top of the code. Don't forget to add a coma(,) between every slide you add and also use hashes(#) before slide name. For example if you want to add slide no 6 your code should be:
<div id="slide6" class="slides">
<a href="Your post link">Your post's title</a>
<img src="Your post's thumbnail link" />
<p>Your post description</p>
</div>
and css code should be #slide6.
Overall code should look like below:
<----Example Starts Here---->
<style>
.slideshow{ position: relative;height: 225px;width: 98%; left: 7px; top: 3px; }
#slide1, #slide2, #slide3, #slide4, #slide5, #slide6, #slide7, #slide8, #slide9, #slide10{ position: absolute; }
.slideshow img {
box-shadow: none;
border: 2px solid #ddd;
border-radius: 8px;
height: 190px;
width: 210px;
position: relative;
top: 0px;
}
.slideshow p {
position: relative;
bottom: 190px;
left: 226px;
font-family: 'Open Sans Condensed',sans-serif;
font-size: 123%;
color: #9F9F9F;
width: 410px;
height: 170px;
}
.slideshow a {
position: absolute;
font-family: 'Open Sans Condensed',sans-serif;
font-size: 140%;
font-weight: bold;
top: 8px;
text-decoration: none;
left: 235px;
text-transform: capitalize;
white-space: nowrap;
width: 25em;
overflow: hidden;
text-overflow: ellipsis;
letter-spacing: 0.5px;
color: #444;
}
.slideshow a:hover {
color:#4491f0;
}
.slides {
background: #eee;
height: 195px;
width: 638px;
border: 2px solid #ddd;
padding: 10px;
border-radius: 7px;
}
</style>
<div class="slideshow">
<div id="slide1" class="slides">
<a href="Your post link">Your post's title</a>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkXdGL8v1HqrozMeuS6Nscg_Lp5Da3DA1LhTB6iJuyiTg2W16C9yHhETCY7LTqBm8nTjFlprNPTo1FSSuWSzddtj5GVtrsRSkWsU6TrwC_8G8RVtNMV5xmwgdQdGlXLHxpwhGxCW3OUPs/s320/101helper.png" />
<p>Your post description</p>
</div>
<div id="slide2" class="slides">
<a href="Your post link">Your post's title</a>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkXdGL8v1HqrozMeuS6Nscg_Lp5Da3DA1LhTB6iJuyiTg2W16C9yHhETCY7LTqBm8nTjFlprNPTo1FSSuWSzddtj5GVtrsRSkWsU6TrwC_8G8RVtNMV5xmwgdQdGlXLHxpwhGxCW3OUPs/s320/101helper.png" />
<p>Your post description</p>
</div>
<div id="slide3" class="slides">
<a href="Your post link">Your post's title</a>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkXdGL8v1HqrozMeuS6Nscg_Lp5Da3DA1LhTB6iJuyiTg2W16C9yHhETCY7LTqBm8nTjFlprNPTo1FSSuWSzddtj5GVtrsRSkWsU6TrwC_8G8RVtNMV5xmwgdQdGlXLHxpwhGxCW3OUPs/s320/101helper.png" />
<p>Your post description</p>
</div>
<div id="slide4" class="slides">
<a href="Your post link">Your post's title</a>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkXdGL8v1HqrozMeuS6Nscg_Lp5Da3DA1LhTB6iJuyiTg2W16C9yHhETCY7LTqBm8nTjFlprNPTo1FSSuWSzddtj5GVtrsRSkWsU6TrwC_8G8RVtNMV5xmwgdQdGlXLHxpwhGxCW3OUPs/s320/101helper.png" />
<p>Your post description</p>
</div>
<div id="slide5" class="slides">
<a href="Your post link">Your post's title</a>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkXdGL8v1HqrozMeuS6Nscg_Lp5Da3DA1LhTB6iJuyiTg2W16C9yHhETCY7LTqBm8nTjFlprNPTo1FSSuWSzddtj5GVtrsRSkWsU6TrwC_8G8RVtNMV5xmwgdQdGlXLHxpwhGxCW3OUPs/s320/101helper.png" />
<p>Your post description</p>
</div>
<div id="slide6" class="slides">
<a href="Your post link">Your post's title</a>
<img src="Your post's thumbnail link" />
<p>Your post description</p>
</div>
</div>
<script>
$(function () {
$('.slideshow div').hide(); // hide all slides
$('.slideshow div:first-child').show(); // show first slide
setInterval(function () {
$('.slideshow div:first-child').fadeOut(500)
.next('div').fadeIn(1000)
.end().appendTo('.slideshow');
},
7000); // slide duration
});
</script>
<----Example Ends Here---->
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: 638px;
Note: If you are changing width of your slider then you need to change the width of description too.
width: 410px; refers to width of description and width: 25em; 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.
