Sliding Recent Posts Blogger Widget 2016

Animated Sliding Recent Posts Gadget/Widget For Blogger

This sliding recent posts blogger widget 2016 shows the most current blog posts from one of your blogs as a slide show on the other. Got more than one blog? then you can share traffic between both blogs with this animated recent posts blogger widget just by adding it to the one that's receiving more page views. Your readers will be linked from one blog to the other. You can also use this recent post slider widget for blogger to advertise other people's blog or they can advertise yours by adding it to their blog. Each time a new post is made, it gets updated automatically on the recent post gadget as a slider with images. The Steps below will guide you on how to add one of  the sliding recent posts blogger widgets 2015 in your blogger blog.

Also Read:   10+ Best Blogger Tips and Tricks
                    Stylish Popular Post Widget For Blogger
                    Numbered Page Navigation Widget For Blogger Blogs



How to Add Sliding Recent Posts Blogger Widget

  • From your  blogger dashboard,
  • Goto  'Layout' 
  • Click on  'Add a Gadget'.
  • Copy and paste one of the codes below for your preferred style of the the sliding recent posts blogger widget, then edit by replacing your URL where it's specified 'YOUR-URL'

 Style 1

Sliding Recent Posts Blogger Widgets 2015


<link rel="stylesheet" type="text/css" href="http://blogger-json-experiment.googlecode.com/svn/resources/blogger-feed-rotator-plugin/default-style.min.css"/>
<div id="slider-rotator" class="slider-rotator loading"></div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://blogger-json-experiment.googlecode.com/svn/resources/blogger-feed-rotator-plugin/blogger-feed-rotator.min.js"></script>
<script type="text/javascript">
makeSlider({
    url: "http://YOUR-URL" // Add your blog URL
});
document.write('<a href="http://www.techlass.com/ " target="_blank" rel="dofollow"><font size="1" color="black">[Celebrity]</font></a>');
} </script> 


Style 2


Sliding Recent Posts Blogger Widgets 2015


<style>
.gfg-root {
width: 100%;
height : auto;
position : relative;
overflow : hidden;
margin: 0 auto;
text-align : center;
font-size: 12px;
border: 1px solid #DBDBDB;
}
.gfg-title {
font-size: 16px;
font-weight : bold;
color : #6B6B6B;
background:#F3F3F3;
background-repeat: repeat;
line-height : 1.4em;
overflow : hidden;
white-space : nowrap;
padding: 5px;
text-shadow: 0px 2px #fff;
}
.gfg-entry {
background-color: #FFFFFF;
width : 100%;
height : 9.2em;
position : relative;
overflow : hidden;
text-align : left;
margin-top : 3px;
}
.gf-title a {
text-transform: capitalize;
color: #0000ff;
font-size: 14px;
}
.gfg-subtitle {
display: none;
}
.gfg-list {
position : relative;
overflow : hidden;
text-align : left;
}
.gfg-listentry {
line-height : 1.5em;
overflow : hidden;
white-space : nowrap;
text-overflow : ellipsis;
padding-left : 15px;
padding-right : 5px;
}
.gfg-listentry-odd {
background-color : #F3F3F3;
border-bottom : 1px dotted #CCCCCC;
padding: 5px;
}
.gfg-listentry-even {
background-color : #F3F3F3;
border-bottom : 1px dotted #CCCCCC;
padding: 5px;
}
.gfg-listentry-odd a{
color: #595959;
padding: 0 0px 0 10px;
}
.gfg-listentry-even a{
color: #242424;
padding: 0 0px 0 10px;
}
.gfg-listentry-highlight {
background: #FFFFFF;
}
.gfg-listentry-highlight:before {
position: absolute;
left: 0;
content: '\25BA ';
font-size: 14px;
color: #DBDBDB;
}
.gfg-listentry-highlight a {
color: #242424;
}
.gfg-root .gfg-entry .gf-result {
position : relative;
background-color: #ffffff;
width : auto;
height : 100%;
padding-left : 20px;
padding-right : 5px;
}
.gfg-root .gfg-entry .gf-result .gf-title {
font-size: 14px;
line-height : 1.2em;
overflow : hidden;
white-space : nowrap;
text-overflow : ellipsis;
margin-bottom : 2px;
margin-top: 5px;
}
.gfg-root .gfg-entry .gf-result .gf-snippet {
height : 3.8em;
color: #000000;
margin-top : 3px;
}
.clearFloat {
clear : both;}</style>
<script src="http://www.google.com/jsapi" type="text/javascript"></script><script src="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js" type="text/javascript"></script>
<script type="text/javascript">
function showGadget() {var feeds = [{title:'List',url:'http://YOUR-URL/feeds/posts/default?redirect=false&start-index=1&max-results=10'},];
new GFdynamicFeedControl(feeds, 'feedGadget',{title: 'Latest Posts', numResults : 10, displayTime : 5000, hoverTime : 500});} google.load("feeds", "1");
google.setOnLoadCallback(showGadget);
</script>
<div id="feedGadget">Loading...</div>


  • Save the blogger widget and view your blog for the changes.


Also Read:  Social Media Follow Buttons Widget For Blogger
                    Email Subscription Widget For Blogger

You have successfully added the animated sliding recent post blogger widget on your blog.
Share on Google Plus

About Grace Joseph

Grace Joseph is from Cross River State, Nigeria. She studied Computer Science in University of Calabar and has great passion for writing, technology and blogging.

14 comments:

  1. Hi Grace,

    Nice informational blog.
    We always keep looking for similar codes, plugins and widgets which can help to make our blog theme and design more useful and interactive to the users.
    Thanks for sharing this post!!!

    Dev

    ReplyDelete
  2. Welcome Dev, hope to get more visits from you.

    ReplyDelete
  3. Article contains so many fruitful information which will be liked by the readers as in my opinion this is the best article in this category.

    ReplyDelete
    Replies
    1. Thanks for stopping by, encouraging!!

      Delete
  4. Replies
    1. No you can't. It will require editing of the Javascript code that has been uploaded to an external source

      Delete
  5. Article contains so many fruitful information which will be liked by the readers as in my opinion this is the best article in this category.

    ReplyDelete
  6. can we change the width and height of the first slider?

    ReplyDelete
  7. it so strange but the first code giving me 2 rows of numbers under the slides. Both rows are 1-5. )-:

    ReplyDelete
  8. Nicely tweaked mobile site, Grace.
    There's not many of us out there!

    ReplyDelete