Trending

Aug 5, 2009

Post Title with excerpts slideshow widget


By on 3:03 PM

I always wanted to have this kind of widget showing Post Titles with a short excerpts in my blog and now i have it in blog just below the header adding extra functionality to my blog/website.Now i want to describe some of the features of this widget:

1.It comes with Blog title,Post Titles,Date of Publish,Excerpt from the post(optional).
2.The time delay between each Post Title show is 5 seconds.
3.It also comes with a border which can be turned off as well.
4.We can halt the rotation by hovering with mouse cursor over the post title till mouse moves off the item.
5.You can also customize this widget according to your needs that best suits your blogger template blog.

Now the Important Part is how to integrate it in your blogger template blog.
Here is the step by step procedure:
Step One Log In to Blogger Account.
Step Two From the Dashboard Click Layout link.
Step Three Add a Gadget(HTML/JavaScript) just above the blog Posts as shown below:
Step Four Copy the code below:

<style type="text/css">
.gfg-root {
width : 100%;
height : auto;
position : relative;
overflow : hidden;
text-align : center;
font-family: "Arial", sans-serif;
font-size: 20px;
border: 1px solid #BCCDF0;
}

.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;
}
#feedGadget {
margin-top : 5px;
margin-left: auto;
margin-right: auto;
width : 440px;
font-size: 10px;
color: #9CADD0;
}
</style>
<noscript><a href="http://techieway.blogspot.com" target="_blank">
Blogger Hacks</a></noscript> <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> <script type="text/javascript">function showGadget() { var feeds = [{title:'title', url:'http://MYBLOG.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> <noscript><a href="http://techieway.blogspot.com" target="_blank">Blogger Hacks</a></noscript> <div id="feedGadget">Loading...</div> <div id="feedGadget"><a href=http://techieway.blogspot.com/ target="_blank">Click Here To Grab This Widget</a>~Design By-<a href="http://www.blogdoctor.me" target="_blank">Blogdoctor</a>.</div>

Step Five Make changes in code shown in red color as suggested below:
Change "MYBLOG" to actual blog subdomain and "BLOG_TITLE" to actual title of your blog.Now Copy and paste the modified code in the HTML/Java Scipt gadget(Created in step three) and click save button on the gadget.

Step Six View the Blog in the browser window and see if it is appearing correctly.Let's take a look at the screen shot of this widget.Customizations:

Width:Look for the following section of code and change the width suitable to your blogger template.
#feedGadget {
margin-top : 5px;
margin-left: auto;
margin-right: auto;
width : 590px;
font-size: 16px;
color: #9CADD0;
}

Border: If you do not want to show border then look for the following section of code and the border width to 0px.
.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;
}
Font-Size:
You can also change the fonts of the widget.To change the font-size of Post titles look for the following section of Code and change font-size suited for your blog.
.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;
}
I have described some important customizations generally needed for bloggers.You can explore a number of other customizations for your blogger blog.

Subodh Raghav

Subodh is a tech savvy guy who is blessed with the art of Blogging,He love to Blog day in and day out,He is a Software Engineer and a Certified Web Enthusiast.

6 comments:

  1. hey...! u know how to put the slideshow posts widget like labnol.com or newtechnology.co.in, in blogger

    ReplyDelete
  2. Something it's wrong ! :(

    "Feeds could not be loaded.Click Here To Grab This Widget" - WHYYYYYYYYY ??? :|

    ReplyDelete
  3. Hi to All
    Sorry for the inconvenience caused to all of you. As this post has been published couple of weeks therefore it might not be working on some platforms due to an upgrade in technology. Now I have updated the code and also checked if its working or not.I hope now the code will work fine.
    Best Wishes n regards

    ReplyDelete
  4. Hello! I've already installed it, however, I don't know how to customize its background...you can check it here http://amadix.blogspot.com

    ReplyDelete
  5. TQ. GREAT. HAVE INSTALLED IT. CAN I ADD THUMBNAILS TO MY WIDGET? HOPE YOU CAN HELP

    ReplyDelete
  6. hey i had a problem with installation but i think i will do it now.

    thanks a lot

    ReplyDelete