Random Rotating Post Headliner Widget for Blogger Blog – Google Ajax

F rom this tutorial you will be able to add ‘Random rotating post headliner widget’ to your blogger blog. It rotates all your posts in simple table, with post title link and summary of the post.You can see the screenshot below. You can see the live demo here.

Step needs to add this widget in your blogger template

1. Login in to blogger dashboard

2. Go to ‘Layout’

3. click on ‘Add a Gadget’ or Add a Page Element’

4. Popup window will appear, Click on ‘HTML/Javascript’

5. Now Copy and paste the following code into the window

.gfg-title {
font-size: 24px;
font-weight : bold;
color : #3366cc;
background-color: #E5ECF9;
line-height : 1.4em;
overflow : hidden;
white-space : nowrap;
}

.gfg-title a {
color : #3366cc;
}

.gfg-subtitle {
font-size: 20px;
font-weight : bold;
color : #3366cc;
background-color: #E5ECF9;
line-height : 1.4em;
overflow : hidden;
white-space : nowrap;
margin-bottom : 0px;
}

.gfg-subtitle a {
color : #3366cc;
display:none !important;
}

.gfg-entry {
background-color : white;
width : 100%;
height : 6.9em;
position : relative;
overflow : hidden;
text-align : left;
margin-top : 3px;
}

/* To allow correct behavior for overlay */
.gfg-root .gfg-entry .gf-result {
position : relative;
background-color : white;
width : auto;
height : 100%;
padding-left : 20px;
padding-right : 5px;
}

.gfg-list {
position : relative;
overflow : hidden;
text-align : left;
margin-bottom : 5px;
display:none !important;
}

.gfg-listentry {
line-height : 1.5em;
overflow : hidden;
white-space : nowrap;
text-overflow : ellipsis;
-o-text-overflow : ellipsis;
padding-left : 15px;
padding-right : 5px;
margin-left : 5px;
margin-right : 5px;
}

.gfg-listentry-odd {
background-color : #F6F6F6;
}

.gfg-listentry-even {
}

.gfg-listentry-highlight {
background-image : url(‘garrow.gif’);
background-repeat: no-repeat;
background-position : center left;
}

/*
* FeedControl customizations.
*/

.gfg-root .gfg-entry .gf-result .gf-title {
font-size: 24px;
line-height : 1.2em;
overflow : hidden;
white-space : nowrap;
text-overflow : ellipsis;
-o-text-overflow : ellipsis;
margin-bottom : 2px;
}

.gfg-root .gfg-entry .gf-result .gf-snippet {
height : 3.8em;
color: #000000;
margin-top : 3px;
}

/*
* Easy way to get horizontal mode, applicable via js options to gadget.

.gfg-horizontal-container {
position : relative;
}

.gfg-horizontal-root {
height : 1.5em;
_height : 100%;
position : relative;
white-space : nowrap;
overflow : hidden;
text-align : center;
font-family: "Arial", sans-serif;
font-size: 13px;
border: 1px solid #AAAAAA;
padding : 5px;
margin-right : 80px;
}

.gfg-horizontal-root .gfg-title {
font-weight : bold;
background-color: #FFFFFF;
line-height : 1.5em;
overflow : hidden;
white-space : nowrap;
float : left;
padding-left : 10px;
padding-right : 12px;
border-right: 1px solid #AAAAAA;
}

.gfg-horizontal-root .gfg-title a {
color : #444444;
text-decoration : none;
}

.gfg-horizontal-root .gfg-entry {
width : auto;
height : 1.5em;
position : relative;
overflow : hidden;
text-align : left;
margin-top : 0px;
margin-left : 0px;
padding-left : 10px;
}

/* To allow correct behavior for overlay */
.gfg-horizontal-root .gfg-entry .gf-result {
position : relative;
background-color : white;
width : 100%;
height : 100%;
line-height : 1.5em;
overflow : hidden;
white-space : nowrap;
}

.gfg-horizontal-root .gfg-list {
display : none;
}

/*
* FeedControl customizations.
*/

.gfg-horizontal-root .gfg-entry .gf-result .gf-snippet,
.gfg-horizontal-root .gfg-entry .gf-result .gf-author {
display : none;
}

.gfg-horizontal-root .gfg-entry .gf-result .gf-title {
color: #0000cc;
margin-right : 3px;
float : left;
}

.gfg-horizontal-root .gfg-entry .gf-result .gf-spacer {
float : left;
}

.gfg-horizontal-root .gfg-entry .gf-result .gf-spacer,
.gfg-horizontal-root .gfg-entry .gf-result .gf-relativePublishedDate {
display : block;
color: #AAAAAA;
}

.gfg-branding {
white-space : nowrap;
overflow : hidden;
text-align : left;
position : absolute;
right : 0px;
top : 0px;
width : 80px;
}

.gfg-collapse-open, .gfg-collapse-closed {
background-repeat : no-repeat;
background-position : center;
cursor : pointer;
float : right;
width : 17px;
height : 20px;
}

.gfg-collapse-open {
background-image : url(‘arrow_open.gif’);
}

.gfg-collapse-closed {
background-image : url(‘arrow_close.gif’);
}

.gfg-collapse-href {
float : left;
}

.clearFloat {
clear : both;
}
body {
      background-color: white;
      color: black;
      font-family: Arial;
      font-size: small;
      margin: 0;
    }
    #feedGadget {
      margin-top : 5px;
      margin-left: auto;
      margin-right: auto;
      width : 440px;
      font-size: 16px;
      color: #9CADD0;
    }
</style>
<script src="http://www.google.com/jsapi/?key=internal-sample"
type="text/javascript"></script>
<script src="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js" type="text/javascript"></script>

    function showGadget() {
      var feeds = [
       {title:'title',
        url:'http://BLOG_URL.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=999'},

       ];

      new GFdynamicFeedControl(feeds, ‘feedGadget’,
                               {numResults : 1000, stacked : true,
                               title: "BLOG_TITLE ~ Random Posts."});
    }
    google.load("feeds", "1");
    google.setOnLoadCallback(showGadget);
</script>
<div id="feedGadget">Loading…</div>
<div id="feedGadget">Gadget by <a href="http://www.blogdoctor.me" target="_blank">The Blog Doctor</a>.</div>

6. Replace letter in red with your blogger URL, and black with Blog Name.

7. If you want this widget to be appear below header than move the gadget above the blog posts as show in the following fig.()

8. Save Settings.

Thanks to blogdoctor

Featured Items - Top 10 Website Hosting Provider 2012

Want to host your website in one of the top rated Web Hosting company ? Ratings are collected from the user all over the world and given a ranking based on the user feedback. All Plan includes: Free domain, Unlimited Space, Bandwidth, unlimited sites, free marketing credits and which also includes attractive discount.

FIND OUT MORE

Featured Items - Top Selling WordPress Themes From Themeforest

Want to use one of the most selling WordPress themes for your next project? Here is the list of items which have been sold more number of times from Blog, Magazine, Creative, Retail, Technology, Entertainment, BuddyPress, eCommerce and Nonprofit categories.

FIND OUT MORE

Featured Items - Start Your Own Community Website Like Facebook In a Minute

Want to start your own social or community website like Facebook ? Start right away using Buddypress WordPress plugin along with premium Buddypress Themes. No need to setup anything. It works out of box. Install BuddyPress plugin and Premium themes from this list. Your are done!.

FIND OUT MORE

tackad
This is what I need but it’s so darn big ! I need it smaller to fit in my fluid width right column.
ORM
hi buddy and thanks for this great post but i think if anybody wants to use this in Blogger, he must delete these lines:
———————
background-image : url('garrow.gif');
background-image : url('arrow_open.gif');
background-image : url('arrow_close.gif');
———————
because this lines refer to files that don't exist in a blogger blog. Am I right?

Random Rotating Post Headliner Widget for Blogger Blog – Google Ajax

Featured Items - Top 10 Website Hosting Provider 2012

Featured Items - Top Selling WordPress Themes From Themeforest

Featured Items - Start Your Own Community Website Like Facebook In a Minute

Related posts:

Top Selling

Hot Topics

Random Rotating Post Headliner Widget for Blogger Blog – Google Ajax

Featured Items - Top 10 Website Hosting Provider 2012

Featured Items - Top Selling WordPress Themes From Themeforest

Featured Items - Start Your Own Community Website Like Facebook In a Minute

Related posts:

Top Selling

Subscription

Hot Topics