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.
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://techcenterplace.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://techcenterplace.blogspot.com" target="_blank">Blogger Hacks</a></noscript> <div id="feedGadget">Loading...</div> <div id="feedGadget"><a href=http://techcenterplace.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.
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.
