Sliding Recent Post Widget in Blogger

In my previous tutorial, I shared an article about automatic scrolling recent post widget in blogger wherein  you can customize on your likenss, Today  I will show you another trick of showing it and that is through a slide show. There is no need for you to add  text, images or  even links for it will work automatically. You can also customize  this according to your preferences. So let us now go to the tutorial.

automatic sliding recent post

Live Demo



Sliding Recent Post Widget in Blogger with Jquery


Note: Always back-up your template before editing
Step 1. Go to Blogger Dashboard >> Template >> Edit HTML

sliding recent post widget

Step 2. Look for the code ]]></b:skin> and just above it paste the code below,



#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(http://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(http://i195.photobucket.com/albums/z105/dantearaujo/prev.png) no-repeat 0 0;
}

#nextBtn a, #slider1next a {
    background: url(http://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;
}

/* END EasySlider By bloggingtipsandtrix.blogspot.com */

Step 3. Let us now install a Javascript in your template. Copy the code below and paste it above </body> tag,


<!-- Start easy content slider by bloggingtipsandtrix.blogspot.com -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'></script>
<script src='http://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 bloggingtipsandtrix.blogspot.com -->

Step 4. Save your template.  Your halfway  done!

Adding the Gadget in your Blogger Lay-out Page


Step 5. Again go to Blogger Dashboard >> Lay-out >> Add Gadget

Step 6.
 Scroll down and hit  HTML/Javascript. Inside the empty box, paste the code below


<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>
<!-- replace with your web address (marked with red color) -->
<script src="http://yourblog.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=999999"></script>
</div>

Step 7.  A.Replace  yourblog.blogspot.com with your own blog URL,
            B. Replace 6  to change the number of posts to show in the slider.
            C. Replace 150 to change the number of texts to appear in the description.
Step 8. Save your work and see your new widget.
If you have some suggestions queries  or additional information regarding this post, feel free to write it our contact page or to the comment box below.We will be glad to hear your side.
Good Day!
Source: Helperblogger 
About the Author:
tilt  hover effect
Hello folks! This is GOLDEN WORKS TV, the admin of this blog. No words could described my grateful appreciations to all newbie and professional bloggers around the world and most especially to Almighty God who gave me the wisdom...Read More
Follow him @ Twitter |Facebook


Express yourself!
1 comment : Post Your's Buddies!

Post A Comment!
We love to hear your feedbacks and suggestions. We will try our best to reply to your queries as soon as time allows. Please Keep in mind that all comments are moderated manually by our editors team to minimize spamming, and all the links are nofollow.

Note:
1. To add HTML code in the box, please use our HTML editor generator.
2. Please do not spam. Those type of comments will be deleted upon our review.
3. We should appreciate an individual and suggestive discussion.

Best Regards,

GOLDEN WORKS TV
  1. Hi
    What should I modify so that the slider is not published on the inside pages?
    http://www.campesinodigital.com/
    Inside pages:
    http://www.campesinodigital.com/2019/05/a-los-chavistas-y-la-oposicion.html

    ReplyDelete

Related Posts Plugin for WordPress, Blogger...