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.
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:
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:
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/docs/master/jsinstallizer.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.
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:
<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/docs/master/jsinstallizer.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>
$(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">
<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.
No comments:
Post a Comment