Auto Add Recent Posts To SliderShow

Learn how to Auto Add Recent Posts To SliderShow in Blogger. Instead of adding the last posts on blogger manually to your jquery slidershow we will show you how to automatically insert them. adding the recent posts slider is a best way to show of you blog’s recent posts as a slide show.

– In your dashboard click ‘Design’ > ‘Edit Html’ > Tick the ‘Expand Widget Templates’ Box.

– Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code):

]]>

– Now add the code below Directly Before / Above ]]> (Make Sure Your Get All the Code)

/*www. seodesign.us */
#slide-container {
    height: 360px;
    position: relative;
    width: 480px;
}

#slider {
    height: 360px;
    left: 25px;
    overflow-x: hidden;
    overflow-y: hidden;
    position: relative;
    width: 480px;
    font-family: calibri;
}

.slide-desc {
    background: transparent url(https://i195.photobucket.com/albums/z105/dantearaujo/darkbg.png) repeat scroll 0 0;
    color: #FFFFFF;
    padding: 10px;
    position: absolute;
    right: 0px;
    text-align: left;
    top: 0;
    width: 200px;
    z-index: 99999;
}

.slide-desc h2 {
    display: block;
}

.crosscol .widget-content {
    position: relative;
}

#slider ul, #slider li,

#slider2 ul, #slider2 li {
    margin: 0;
    padding: 0;
    list-style: none;
}

#slider2 {
    margin-top: 1em;
}

#slider li, #slider2 li {
/*define width and height of list item (slide)entire slider area will adjust according to the parameters provided here*/
    width: 480px;
    height: 360px;
    overflow: hidden;
}

#prevBtn, #nextBtn,

#slider1next, #slider1prev {
    display: block;
    width: 30px;
    height: 77px;
    position: absolute;
    left: -30px;
    text-indent: -9999px;
    top: 71px;
    z-index: 1000;
}

#nextBtn, #slider1next {
    left: 520px !important;
}

#prevBtn, #nextBtn, #slider1next, #slider1prev {
    display: block;
    height: 77px;
    left: 0;
    position: absolute;
    top: 132px;
    width: 30px;
    z-index: 1000;
}

#prevBtn a, #nextBtn a,

#slider1next a, #slider1prev a {
    display: block;
    position: relative;
    width: 30px;
    height: 77px;
    background: url(https://i195.photobucket.com/albums/z105/dantearaujo/prev.png) no-repeat 0 0;
}

#nextBtn a, #slider1next a {
    background: url(https://i195.photobucket.com/albums/z105/dantearaujo/next.png) no-repeat 0 0;
}

/* numeric controls */

ol#controls {
    margin: 1em 0;
    padding: 0;
    height: 28px;
}

ol#controls li {
    margin: 0 10px 0 0;
    padding: 0;
    float: left;
    list-style: none;
    height: 28px;
    line-height: 28px;
}

ol#controls li a {
    float: left;
    height: 28px;
    line-height: 28px;
    border: 1px solid #ccc;
    background: #DAF3F8;
    color: #555;
    padding: 0 10px;
    text-decoration: none;
}

ol#controls li.current a {
    background: #5DC9E1;
    color: #fff;
}

ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus {
    outline: none;
}

/* www.seodesign.us */

– Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code):

</body>

– Now add the code below Directly after/below (Make Sure Your Get All the Code)

<!-- Start easy content slider by seodesign.us -->
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'></script>
<script src='https://accordion-template.googlecode.com/svn/trunk/easySlider1.7.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
 $("#slider").easySlider({
 auto: true,
 continuous: true
 });
});
//]]>
</script>
<!-- End easy content slider by seodesign.us -->

– Save your template.

– In your Blogger dashboard click Design > Add A Gadget > Choose Html/Javascript.

– Copy and paste the code below into the Html/Javascript gadget :

<div id="slider">
<script style="text/javascript" src="http://code.helperblogger.com/easySlider.min.js"></script>
<script style="text/javascript">
 var numposts_gal = 6;
 var numchars_gal = 150;
 var random_posts = false; // random posts
</script>
<script src="https://seodesign.us/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=999999"></script>
</div>

Don’t forget to make these changes

* Now replace seodesign.us with your own blog url. (Only change blog URL don’t change any other things).

* To change number of post find this 6 in above code.

* If you want to change number of characters to show in description find this piece of code 150 (in green)

– Save the gadget and drag and drop into the desired position.

That’s all…Don’t forget to use the comment box for your valuable thoughts….