Amazing Scrolling Recent Posts Widget for Blogger!!!

Previously I had shared Scrolling Popular Posts Widget and many other important widgets for blogger. Basically these widgets play very important role to increase your blog's page views. They increase the visitors engagement with the site. Today I am gonna share another important widget for blogger named Scrolling Recent Posts Widget.

• Related Post: Simple Recent Posts Widget for Blogger!!!

The widget that I am sharing today is one of the most attractive widget of this site. It has some exceptional features by which it can easily attract the visitors. It will display the recent posts of your site with the distinction having two parts. At the top it will show a snippet along with post title, author name and post date. The top part will scroll the posts according to the posts list shown in bottom part. In the bottom part you will find the list of the recent posts. Lets see the below demo to have an idea...

Demo-->

Loading...

Adding Scrolling Recent Posts Widget to Blogger:

• First Sign Into your Blogger Account.
• Then click on Layout option and click Add a Gadget link, where you want to place the widget.
  
• Then from the gadgets list select HTML/JavaScript.
  
• Now copy the following code and paste it in the content box.

<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://www.ittimesbd.com/feeds/posts/default?redirect=false&start-index=1&max-results=10'},]; new GFdynamicFeedControl(feeds, 'feedGadget',{title: 'Recent Posts', numResults : 10, displayTime : 5000, hoverTime : 500});} google.load("feeds", "1"); google.setOnLoadCallback(showGadget); </script> <div id="feedGadget"> Loading...</div>

• Then click the Save button to complete the process.

Customization:

• Now in the above code find http://www.ittimesbd.com and Replace it with you site's Homepage URL.

Stay with www.iTTimebd.com for more IT related Post