Recent Rotating Post Gadget with Excerpt For Blogger

This JavaScript code will display the latest posts of any feed, the difference being that it has two parts which can be used individually or...

This JavaScript code will display the latest posts of any feed, the difference being that it has two parts which can be used individually or combined. The top of this widget will show a single post along with the title (link), author, date and a brief summary of its content. In addition, this post will rotate automatically within a list whose number of elements will be decided by us. At the bottom, we'll find a full list with recent posts that, on mouse over, will replace the post above, thus breaking the automatic cycle.

Before adding anything, let's see it in action to decide if it does what we want.


recent posts widget for blogger

How to Add Recent Rotating Posts Widget to Blogger

Step 1. Go to "Layout" > click on the "Add a Gadget" link.


Step 2. From the pop-up window, choose the "HTML/JavaScript" gadget


Step 3. Paste this code inside the empty 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://helplogger.blogspot.com/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>

How to Customize the Recent Rotating Post Gadget

The URL in blue is for the feed. So, the http://helplogger.blogspot.com URL should be replaced with the feed URL of your blog.

Next is start-index=1. This number indicates which post will appear first on the list. By default, it is the latest post published on your blog, so if you want to begin displaying older posts, change the 1 value.

max-results=10 indicates the maximum number of posts that we will be reading from the feed, beginning from the one that we have set up before in the start-index=1. This number always needs to be equal or greater to what we should see later and what it does is to set the number of posts that will be shown in the gadget. The easiest way would be to put 500 in order not to fail, but the higher the number is, the longer this gadget will take to load, so it's better to adjust to what we need to show.

Finally, here are some other script parameters:
  • title: 'Latest Posts', is the widget's title that appears on top.
  • numResults: 10, number of posts that will show in the list.
  • displayTime: 5000, the delay time between posts in the rotator (in milliseconds).
  • hoverTime: 500, minimum time for an item in the list to be displayed at the top.
If you want to hide the list and show only the posts, change this part:
.gfg-list {
position : relative;
overflow : hidden;
text-align : left;
}
To:
.gfg-list {
display:none;
}
If you want to display only the list, change this:
.gfg-entry {
background-color: #FFFFFF;
width : 100%;
height : 9.2em;
position : relative;
overflow : hidden;
text-align : left;
margin-top : 3px;
}
To:
.gfg-entry {
display: none; }

Step 4. Save the gadget and you're done adding the recent rotating post widget with excerpt in Blogger.

COMMENTS

HawkHost Sale 25% Ending Soon

SaibABC's Contact Form:

Name

adsense,10,adsense optimization,4,adsense tips,5,Amp,3,backlinks,2,Beautiful,26,Beautifully,3,Beauty,15,beginner's guide,12,Blog Design,57,Blogger,22,blogger pages,4,blogger posts,11,blogging tips,3,Bolero Hot,13,click bombing,1,Comedies,10,Comedy,8,Comments,9,css,27,Cuisine,32,Cuisines,39,custom domain,2,Dab Neeg,6,DabNeeg,36,Facebook,4,Fashion,27,Fighting,12,firebug,1,font awesome,1,GoodTrick,58,google analytics,1,google plus,4,Grid Style,17,HealthLife,57,Hmong Health,11,Hmong Music,6,homepage,1,how to,54,Hunting,55,Image Effects,13,Information,17,instagram,2,Instrument,5,invalid clicks,1,javascript,10,jQuery,16,KabTxuj,28,Karaoke,19,Karaoke Hit,12,labels,2,Liste Style,6,make money online,8,menus,7,Movie Hot,37,Movies,18,Music Hot,41,Musical,100,Navigation,5,navigation menu,5,Other Clips,6,popular posts,5,posts,11,recent comments,1,recent posts,3,related posts,3,robots,1,Sad Songs,17,SEO,16,sitemap,1,slideshows,3,social media,8,social media plugins,4,statcounter,1,static pages,2,Technology,17,Template,12,Templates,7,threaded comments,3,tools,1,Travels,1,Video Fight,7,Video Hot,22,Video Hunt,30,Widgets,47,Xov Xwm,2,
ltr
item
SaibABC - News, HealthLife, Beauty, Tips: Recent Rotating Post Gadget with Excerpt For Blogger
Recent Rotating Post Gadget with Excerpt For Blogger
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjE_6LOG6K8jm0-1-S_9-nBaolu2K9N0-Mi5HorOyW6jrKZ9T8toyV8HTDnY2pHtC5jwm_vm-5d_jHMRzqlTjaS7B34k2PKShR7JWdhQWKoMTegqgNiyuF8Z-TLI8VCBWmpZR5drJpKRuU2/s320/recent-rotating-posts-widget-for-blogger.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjE_6LOG6K8jm0-1-S_9-nBaolu2K9N0-Mi5HorOyW6jrKZ9T8toyV8HTDnY2pHtC5jwm_vm-5d_jHMRzqlTjaS7B34k2PKShR7JWdhQWKoMTegqgNiyuF8Z-TLI8VCBWmpZR5drJpKRuU2/s72-c/recent-rotating-posts-widget-for-blogger.png
SaibABC - News, HealthLife, Beauty, Tips
https://saibabc.blogspot.com/2020/11/recent-rotating-post-gadget-with.html
https://saibabc.blogspot.com/
https://saibabc.blogspot.com/
https://saibabc.blogspot.com/2020/11/recent-rotating-post-gadget-with.html
true
7959548849429202663
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy