Featured Posts Slider Widget For Blogger

Featured posts slider is a gadget that slides featured(recommended) articles of a blog. Featured posts sliders are of several types, approximately are of images type which slides exclusively images of posts piece approximately exclusively slides titles of posts but inward this post I volition part something awesome which nobody has shared earlier me. Its a Slider that slides the whole posts along alongside thumbnails, titles, as well as a brusk description. It has a unique way as well as a skillful look! You tin flaming meet a demo of this gadget on my blog's HomePage. Before you lot add together this gadget inward your spider web log allow me say you lot 1 matter that is you lot bring to write the description, title, link of the post as well as thumbnail link on your own, it volition non automatically teach posts for you. You tin flaming conduct which posts create you lot desire to exhibit up.

I promise you'll dearest this gadget. You tin flaming add together every bit much posts every bit you lot want, at that spot is no restrain of posts. To add together this gadget inward your spider web log follow below steps:

See Live Demo

Title Of Post goes here

Description Of Post goes hither Post goes hither Post goes hither Post goes hither Post goes hither Post goes hither

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 as well as click on edit html.

Step 3: Search for <head> and simply below it glue the below code:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js'/>

Step 4: Click on salvage template.

Step 5: Go to Layout as well as click on add together a gadget.

Step 6: Scroll downward to Html/javascript.

Step 7: Copy below code as well as glue it inward 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 icon url and Your post description with your post's brusk description.

Step 8: Click on salvage as well as you lot are done.

Customization:

To alter the fourth dimension duration of sliding posts alter the number 7000 highlighted past times yellow color inward the ending lines of code.

7000 agency vii seconds.

Adding to a greater extent than slides:

I bring laid v slides inward this gadget but if you lot desire to add together a novel slide simply re-create the below code as well as glue it inward a higher house this slice of code:

<---Area below which novel slide code is to survive 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 bring added 10 slides thence you lot tin flaming add together 10 slides without whatever work every bit shown inward in a higher house example.

Changing Width Of The Slider:

To alter width of the slider brand changes in width: 615px;

Note: If you lot are changing width of your slider as well as thence you lot withdraw to alter the width of description too.

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

Make certain to alter alongside of championship as well as description piece making whatever alter inward width of slider because it may hold off irregular if you lot don't create so.

I promise you lot similar this post as well as it worked inward your blog. If you lot bring whatever work inquire me inward comments or contact me. Follow past times E-mail to teach instant tidings nigh blogger gadgets inward your inbox. If this post or whatever other post assistance you lot out as well as thence part it alongside 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.