Here is an easy way to add Google Calendar to your blog using Google Web Elements.
As shown above you can add it in a post or in a HTML gadget in the sidebar. You can also choose the Agenda view instead of the Monthly view shown above.
With Google Web Elements you can show Calendar, Conversation (Comments Gadget from Google Friend Connect), Custom Search, Map (Google Maps), News, Presentations, Spreadsheets and YouTube News at present and more will be added soon. They are all built by Google so no worries about third party hacks
You can also earn money with the The Custom Search element which displays Ads. by Google and you can choose to share in the revenue by associating your AdSense publisher ID..........................Add Google Calendar Web Element
To add the Google Calendar Web Element follow these steps :
1. Login at Google Calendar.
2. Click the down arrow next to calendar name in sidebar.
3. Select 'Share This Calendar' from drop down menu.
4. In right hand pane click the 'Calendar Details' link/tab at the top.
5. Scroll down and click the orange XML button under Calendar Address.
6. Copy the link in the popup window.
7. Go to Google Web Elements.
8. Click Calendar link in sidebar.
9. Paste your calendar address copied in 6. above in the Calendar Address text box.
10. Customize options : Choose Monthly or Agenda view and size. Choose a width smaller than width of your posts column or you will have to increase blog width.
11. Copy the code given below and paste it in Edit Html tab of Post Editor and publish post or paste in a HTML gadget in sidebar.
Add Google Calendar with Google Web Elements. |
Invite Viewers with Event Gadget. |

The Followers Gadget has been integrated with Google Friend Connect. You can now add all the gadgets available in Google Friend Connect to your blog.
One of these is the Event Gadget. It shows information about any event you want to inform blog readers about. The description, time, location, map is included. Viewers can join the event and see who else has joined the event. See picture at left. Other gadgets like Members, Comment Wall and Social Bar gadget can also be added.
To add this and other such gadgets to blog follow these steps........ADDING THE EVENT GADGET :
1. Login at Blogger.com and check the Remember Me box while doing so.
2. Go to Google Friend Connect. You will see all your blogs listed in left sidebar under 'Sites'.
3. Click your Blog Title and it will expand to show submenu below it.
4. Click on 'Social gadgets' link.
5. Click on 'Event Gadget' link.
6. Under Options select and choose the various options like Page, and fill in your Event's Title and Description. Choose the start and end dates and the Timezone. Fill in the Location, address and Media URL which is link of the picture or logo of your event.
7. Choose the gadget's size to fit your sidebar or you may have to increase blog width.
8. Lastly click Generate Code button.
9. Copy the code given and paste in a HTML gadget in your blog.
10. Similarly you can add any of the other gadgets available like Members gadget and Comment Wall gadget. You can see these gadgets in action at top of third column in this blog. The social Bar gadget is at the top of the blog.
Enjoy!
Add Twitter to Blog in 4 Clicks. |

Now that we have started micro blogging with Twitter.com we would like to show off our Tweets on our blog. This helps in setting up a conduit between your blog and your Twitter. Visitors to your blog may get impressed enough with your tweets and start following you on Twitter also. See picture at left.
Here is how you can set up Twitter on your blog with four clicks only. No messy coding or copy and paste. Just four clicks to add Twitter to your sidebar ..............4 Click Twitter Installer.
FIRST CLICK : Click the button below to start the installation process :
This is the popup window you will see :
SECOND CLICK : Fill in your Twitter Username instead of 'YourID' , customize title as you like instead of 'My Tweets' and type in the number of tweets you want shown instead of 'TweetNumber'. Then click Customize button.
THIRD CLICK : On clicking Customize button the 'Add Widget to My Blog' button will get activated. Click it. You will get the 'Add Page Element' window. See Picture below :
FOURTH CLICK : In the Add Page Element window select the blog you wish to add the gadget to (if you have multiple blogs in one account). Then type in a title "My Tweets" for the gadget. Lastly click 'Add Widget' button. The Page Elements subtab of Layout tab will open with the message that the widget has been added to the blog.
You can use this installer to add anyone else's tweets also. Just fill their Username instead of yours. The twitter gadget will adapt the styling of your blog. Enjoy!
Comments Wall Gadget for Sidebar. |

Comments in Blogger are made under and on posts. The Main Page has a Comments link under each post for the viewer to click and post his/her comments. There is no facility to put in a general comment on anything under the sun!
The Friend Connect Gadget provided a Comment Wall which you could put in the sidebar for inviting general comments. The Followers gadget is being upgraded to the Friend Connect gadget and hence it is now not possible to add the latter gadget in the usual manner. If you have Custom Domains then only you can add the Friend Connect gadget in the usual manner.
Here is a workaround to add the Comments Wall in the sidebar to a blogspot.com blog......................1. Install Followers Gadget
If you do not have a Followers gadget in the blog the first step is to install it in the usual manner for adding gadgets to the blog. Login at Blogger.com and click Layout lik for your blog on Dashboard. On Page Elements subtab click Add Gadget link and in popup window click on Followers gadget. New blogs have this gadget by default.2. Get Site Number for Blog.
The next step is to get the site number for your blog. To get it Login at Blogger.com and click on View Blog link on Dashboard for blog. Blog will open in browser. Go to View---->Page Source from browser menu. In Page Source do a Ctrl+F (Edit--->Find) for 'site' in the Followers gadget. It will appear like this :
......
......
google.friendconnect.container.renderMembersGadget(
{ id: "div-1238464215135",
site: "BIG_NUMBER" },
skin);
</script>
Copy down the 'BIG_NUMBER' in the page source.COMMENTS WALL CODE
In this step copy the code for the comment wall gadget given below :<!-- Include the Google Friend Connect javascript library. -->
<script type="text/javascript" src="http://www.google.com/friendconnect/script/friendconnect.js"></script>
<!-- Define the div tag where the gadget will be inserted. -->
<div id="div-comment-wall" style="width:210px;border:1px solid #cccccc;"></div>
<!-- Render the gadget into a div. -->
<script type="text/javascript">
var skin = {};
skin['BORDER_COLOR'] = '#cccccc';
skin['ENDCAP_BG_COLOR'] = '#e0ecff';
skin['ENDCAP_TEXT_COLOR'] = '#333333';
skin['ENDCAP_LINK_COLOR'] = '#0000cc';
skin['ALTERNATE_BG_COLOR'] = '#ffffff';
skin['CONTENT_BG_COLOR'] = '#ffffff';
skin['CONTENT_LINK_COLOR'] = '#0000cc';
skin['CONTENT_TEXT_COLOR'] = '#333333';
skin['CONTENT_SECONDARY_LINK_COLOR'] = '#7777cc';
skin['CONTENT_SECONDARY_TEXT_COLOR'] = '#666666';
skin['CONTENT_HEADLINE_COLOR'] = '#333333';
skin['DEFAULT_COMMENT_TEXT'] = '- add your comment here -';
skin['HEADER_TEXT'] = 'Comments';
skin['POSTS_PER_PAGE'] = '5';
google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);
google.friendconnect.container.renderWallGadget(
{ id: 'div-comment-wall',
site: 'BIG_NUMBER',
'view-params':{"disableMinMax":"true","scope":"SITE","allowAnonymousPost":"true","features":"video,comment","startMaximized":"true"}
},
skin);
</script>
Put the site number from step 2 instead of 'BIG_NUMBER' in the code above. To customize it further change :
div id="div-comment-wall" style="width:210px;border:1px solid #cccccc;"></div>
width(210) in above code and border size(1px) and border color(cccccc). Change the colors by changing the hex numbers at the end of these lines :
skin['BORDER_COLOR'] = '#cccccc';
skin['ENDCAP_BG_COLOR'] = '#e0ecff';
skin['ENDCAP_TEXT_COLOR'] = '#333333';
skin['ENDCAP_LINK_COLOR'] = '#0000cc';
skin['ALTERNATE_BG_COLOR'] = '#ffffff';
skin['CONTENT_BG_COLOR'] = '#ffffff';
skin['CONTENT_LINK_COLOR'] = '#0000cc';
skin['CONTENT_TEXT_COLOR'] = '#333333';
skin['CONTENT_SECONDARY_LINK_COLOR'] = '#7777cc';
skin['CONTENT_SECONDARY_TEXT_COLOR'] = '#666666';
skin['CONTENT_HEADLINE_COLOR'] = '#333333';
You can get hex color numbers here.
To change number of comments shown change '5' (any number from 1 to 15) in this line :
skin['POSTS_PER_PAGE'] = '5';
To prevent spam delete :
"allowAnonymousPost":"true",Paste Code in HTML Gadget
Lastly copy the modified code and paste in a HTML gadget in sidebar. Login at Blogger.com and click Layout lik for your blog on Dashboard. On Page Elements subtab click Add Gadget link and in popup window click on HTML/Javascript gadget. In contents window paste the modified code and save. Here is what it looks like :
The Blog Archive Google Gadget. |
The Blogger Archive Gadget which comes as default with the official Blogger templates has some disadvantages. It does not show all the post titles. Only the titles of the present month are shown leaving the viewer to toggle the arrows to expand the list to see the other titles.
Here is a Google Gadget incorporating Google AJAX API code to retrieve a list of all your post titles from your post feed (Please wait till whole page loads to see it in action) :
The features of this gadget are.............Blog Archives Google Gadget Features
1. Shows All Post Titles.
2. All Post Titles linked to their pages (permalinks).
3. Occupies small space on blog. Width and height can be customized.
4. Can be put in a post also (unlike Blogger gadgets).
5. Can be styled to match blog colors.
6. Contains official Google AJAX code.
7. It scrolls downwards automatically.
If you would like such a gadget for your blog drop me a mail at :
Labels Sitemap Gadget for Blogger. |
The Sitemap Page for Blogger lists all your posts in the order they were posted. What if you want to give your viewers list of post titles under each label? They can then click on the post they want to find under the category or label they are interested in.
To do this I have created a Google gadget using AJAX Google API code. You can see the gadget in action on My Gadget Showcase blog. The Features of this gadget are .......................Features of Labels Sitemap Google Gadget
1. It shows Post Titles classified according to Label.
2. Post Titles are linked to the post pages.
3. It can be added in a post (unlike a Blogger widget) and in a HTML gadget.
4. It uses Label Feeds to retrieve List of Post Titles associated with each label.
5. Style and size can be customized to fit your blog column.LABELS SITEMAP FOR THE BLOG DOCTOR.
You can contact me if you want such a gadget for your blog. I will send you the code to paste in Edit Html tab of Post Editor or in a HTML gadget.
Custom Slideshow Gadget for Blogger. |
The Blogger slideshow gadget does not give the user many options like adjusting the size and style. Google AJAX Feed API (See Related Article link at bottom of this post)provides the full code behind the slideshow gadget and also the opportunity to customize it as you like.
You can edit the code directly to adjust the size and style and then paste it in a HTML gadget................THE SLIDESHOW GADGET CODE
The gadget code loads the slideshow using AJAX Feed API and Javascript. Within the code a location on your page is defined to show the slideshow and style the dimensions. Lastly Javascript is used to create a slideshow control on your page. The full code is shown below :<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script src="http://www.google.com/uds/solutions/slideshow/gfslideshow.js"
type="text/javascript"></script>
<style type="text/css">
#picasaSlideshow {
width: 250px;
height: 200px;
margin-bottom: 5px;
padding: 5px;
}
</style>
<script type="text/javascript">
google.load("feeds", "1");
function OnLoad() {
var feed = "PUT FEED URL HERE";
var options = {
displayTime:2000,
transistionTime:600,
numResults : 8,
scaleImages:true,
fullControlPanel : true
};
var ss = new GFslideShow(feed, "picasaSlideshow", options);
}
google.setOnLoadCallback(OnLoad);
</script>
<div id="picasaSlideshow" class="gslideshow"><div class="feed-loading">Loading...</div></div>
<a href="http://www.blogdoctor.me/2009/02/custom-slideshow-gadget-for-blogger.html">Custom Slideshows.</a>
In the above code replace "PUT FEED URL HERE" with the link of the RSS feed of your pictures album at Flickr/Photobucket/Picasaweb as shown below.FEEDING THE SLIDESHOW
The next step is to provide a stream of pictures to the slideshow. To provide this first create an account at Flickr.com or Photobucket.com or Picasaweb.google.com. Then upload all the photos you want to show to this account.
After uploading pictures you will get the RSS feed from the album created at Flickr :http://api.flickr.com/services/feeds/photos_public.gne
?id=USERID&lang=en-us&format=rss_200
Replace USERID with your actual userid at Flickr.com.
RSS Feed from Photobucket.com :http://feed266.photobucket.com/albums/ii244/USERNAME/feed.rss
Replace 'USERNAME' with your actual username.
RSS Feed from Picasaweb :http://picasaweb.google.fr/data/feed/base/user/NAME/
albumid/NUMBER
?kind=photo&alt=rss&authkey=KEY&hl=en
Replace NUMBER, KEY and NAME with actual values.
Then copy the full feed url and paste in the code given for the slideshow gadget instead of "PUT FEED URL HERE".CUSTOMIZING SLIDESHOW
To customize the slideshow modify the gadget code as shown below :
To Change Number of Images modify this line in gadget code and change the number to what you want :
numResults : 8,
To resize images add this line immediately below the numResults line :
scaleImages : true,
The images will be resized according to original aspect unless you add this line also :
maintainAspectRatio : false,
To change how long images are displayed modify the number in :
displayTime : 2000,
To link the images to their source add this line :
linkTarget : google.feeds.LINK_TARGET_BLANK,
To show images in medium thumbnail size use this line :
thumbnailSize : GFslideShow.THUMBNAILS_MEDIUM,
For small size thumbnail images :
thumbnailSize : GFslideShow.THUMBNAILS_SMALL,
Lastly to increase width and height change this code :
#picasaSlideshow {
width: 250px;
height: 200px;
.....
}
Decrease width number to fit in your sidebar width. You can get the width of the sidebar from your blog template code :
#sidebar-wrapper {
width: 220px;
...
}INSTALLING SLIDESHOW
After modifyng and customizing the slideshow code as shown above :
Login at Blogger.com
Click Layouts link on Dashboard.
Click Add Gadget link on Layouts--->Page Elements subtab.
In Popup window scroll down and click on HTML gadget.
Paste the modified code in Contents window.
Save gadget.
Enjoy!
Yet Another Table of Contents YATOC. |
Here is Yet Another Table of Contents - The YATOC Gadget. It is based on the Google AJAX API. You can use it to Make a Sitemap Page for your blog. See picture below :
You can see the demo at top of posts column in My Gadget Showcase blog. It shows all the post titles in the blog linked to respective posts. It is based on official Google AJAX code. Here are the steps to install it..................INSTALLATION
To install this gadget follow these steps :
1. Login at Blogger.com.
2. Click Layouts link under blog title on Dashboard.
3. Click 'Add Gadget' link on Layout---->Page Elements subtab.
4. In popup window scroll down and click Html/Javascript gadget.
5. Copy all the code below :<!--
Copyright (c) 2008 Google Inc.
You are free to copy and use this sample.
License can be found here: http://code.google.com/apis/ajaxsearch/faq/#license
-->
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load("gdata", "1.x", { packages : ["blogger"] });
</script>
<script type="text/javascript">
function _run() {
var content = document.getElementById('content');
var bloggerService =
new google.gdata.blogger.BloggerService('com.appspot.interactivesampler');
var feedUri = 'http://MYBLOG.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=999';
var handleBlogPostFeed = function(postsFeedRoot) {
var posts = postsFeedRoot.feed.getEntries();
var html = '';
html += '<dl>'
+ '<dt><strong>Blog:</strong> '
+ '<a href="'
+ postsFeedRoot.feed.getLink('alternate').getHref()
+ '">'
+ postsFeedRoot.feed.getTitle().getText()
+ '</a></dt>';
html += '<dd><ul>';
for (var i = 0, post; post = posts[i]; i++) {
var postTitle = post.getTitle().getText();
var postURL = post.getHtmlLink().getHref();
html += '<li><a href="' + postURL + '" target="_blank">'
+ postTitle
+ '</a></li>';
}
html += '</ul></dd>';
content.innerHTML = html;
};
var handleError = function(error) {
content.innerHTML = '<pre>' + error + '</pre>';
};
bloggerService.getBlogPostFeed(feedUri, handleBlogPostFeed, handleError);
}
google.setOnLoadCallback(_run);
</script>
<div id="content" style="width:100%;">Loading...</div>
Get This Gadget at <a href="http://www.blogdoctor.me/2009/01/yet-another-table-of-contents-yatoc.html">Yet Another Table of Contents-YATOC.</a>
6. Paste in contents window on HTML gadget popup window.
7. Change 'MYBLOG' in the code to actual subdomain of your blogspot.
8. Save Gadget.
9. View Blog. Wait for page to load completely for gadget to load.
10. Enjoy your sitemap!
Make Sitemap Page in Blogger. |
This post is NOT about adding your blog sitemap to Google Webmaster Tools. It is about creating a sitemap page in Blogger which contains the links of all the post titles in your blog.
Such a sitemap page is commonly seen in other blogs and prominently linked to from the Main Page. Blogger does not have such a sitemap page. Instead it has the Blog Archives in the sidebar. To save space these show just the latest month posts and the rest can be accessed through drop down arrows. This hides most of your posts from the noobie viewer. Creating a sitemap page is then the only option to show all posts in one page................CREATE A PAGE IN BLOGGER
In Blogger there are no specifically designed 'pages'. Instead each post is put on it's own page by default. You should have Post Pages turned on in Settings------->Archiving. The Layouts template has this turned on by default. To create a page in Blogger :
1. Login at Blogger.com.
2. Click New Post button on Dashboard under blog title.
3. Post Editor will open.
4. Put title as "Blog Sitemap.".
5. In the post editor type in a few introductory words like I have done in my sitemap post.
6. Publish post.
7. Click Edit Post link to open post again for editing.
8. Click Post Options link in bottom frame of Post editor.
9. Change the date to any date in the recent past.
10. Publish Post.
11. The Post will not appear on Main Page since it has been backdated. This is the only way to change the post order in Blogger.CREATE THE SITEMAP GADGET
To create the sitemap gadget see How to create a Table of Contents with Post Preview for Blogger. Follow the instructions under this heading : "TOC for ONE BLOG".
This will place the Contents table gadget in your blog. Use Click and drag on Page Elements subtab to drag the gadget below the posts column.
The gadget is now seen on ALL blog pages. The next step is to place it only on the Sitemap page. To do this first we need to get the permalink of the sitemap page we created in our blog. Look in the Blog Archives gadget and expand all the arrows to see the "Blog Sitemap" title we gave to the post. Click on the ttle to open the post page. Copy the permalink from the address bar of the browser.PUT GADGET ON SITEMAP PAGE
To put the gadget on the sitemap page we use conditional tags. To do this :
1. Login at Blogger.com.
2. Click Layouts link under blog title on Dashboard.
3. Click Edit Html subtab of Layouts tab.
4. Click Expand Widgets Template checkbox on top of the Template Code box.
5. Wait for the page to refresh.
6. Scroll down to locate the code for the Table of Contents gadget.
7. Modify the code as shown below (Put in the red lines of code) :
<b:widget id='HTML1' locked='false' title='' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == "BLOG_PAGE_URL"'>
WIDGET CODE
</b:if>
</b:includable>
</b:widget>
Replace the CAPS : BLOG_PAGE_URL with the permalink of your blog sitemap post.
8. Save Template.LINKING TO SITEMAP PAGE
To link to the sitemap page from Main Page first you will need to create CSS navigational menu in your header. Then get the permalink of the Blog Sitemap post and put it in the code for the navigation menu tabs.
Rotating Post Titles Gadget. |
This is a smaller version of the Random Rotating Post Gadget. This shows only the post titles linked to their posts in the blog. It has less height and saves more space. It would look good just below the blog header or above the posts column. See picture below :
It shows all post titles in the blog by rotating through them. If you hover the mouse over it the titles will pause rotating. It is also based on Google AJAX code. Here is how to install it......................INSTALLATION STEPS
1. Login at Blogger.com.
2. Click Layout link on Dashboard under blog title.
3. Click Add Gadget link in sidebar on Layout----->Page Elements tab.
4. Scroll down in popup window and click on Html/Javascript gadget.
5. 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: 20px;
font-weight : bold;
color : #3366cc;
background-color: #E5ECF9;
line-height : 1.0em;
overflow : hidden;
white-space : nowrap;
text-align : center;
margin-bottom:40px !important;
}
.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;
width:600px;
height:40px;
}
.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: 16px;
color: #9CADD0;
}
#feedGadget2 {
margin-top : 5px !important;
float:left;
width : 440px;
color: #9CADD0;
}
.feedGadget2 {
}
#big {
width : 440px;
font-size: 10px;
}
</style>
<script src="http://www.google.com/jsapi/?key=PASTE AJAX KEY HERE"
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:'BLOG_TITLE',
url:'http://MYBLOG.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=999'},
];
new GFdynamicFeedControl(feeds, 'feedGadget',
{numResults : 1000, horizontal : true,
});
}
google.load("feeds", "1");
google.setOnLoadCallback(showGadget);
</script>
<div id="big">
<div id="feedGadget">Loading...</div>
<div id="feedgadget2">Gadget by <a href="http://www.blogdoctor.me" target="_blank">The Blog Doctor</a>.</div></div>
6. Paste it in Contents window of the HTML gadget popup window.
7. Change "BLOG_TITLE" to actual title of blog. Also change "MYBLOG" to actual subdomain of your blogspot. Also sign up for an AJAX key for your blog. Then paste the key where it says "PASTE AJAX KEY HERE".
8. Save the HTML gadget.
9. Click on the HTML gadget in the sidebar and drag it to top of posts column.
10. Click Save button at top of sidebar.
View Blog. Wait for page to load fully before gadget starts to operate.
Enjoy!
Table of Contents Autoscroll Gadget. |
Here is another gadget for those who wish to display all their posts in as little space as possible. The Random Rotating Post Gadget shows only one post at a time. The Table of Contents Autoscroll gadget shows all posts in you blog scrolling automatically in a small place. You can see it in action above the posts in Tips for Bloggers. (Wait for page to load fully) See picture below :
The Table of Contents is from Beautifulbeta. To save space I have added autoscrolling function to it. Features of the gadget are : .....................FEATURES
INSTALLATION
To install it in your blog follow these steps :
1. Login at Blogger.com.
2. Click Layouts link on Dashboard.
3. Click 'Add Gadget' link in sidebar on Layout>>Page Elements subtab.
4. In popup window scroll down and click Html Javascript gadget.
5. In Contents paste the following code :<script type="text/javascript">
// <!--
var speed = 2;
function init(){
var el = document.getElementById("marquee_replacement");
el.style.overflow = 'hidden';
scrollFromBottom();
}
var go = 0;
function scrollFromBottom(){
var el = document.getElementById("marquee_replacement");
if(el.scrollTop >= el.scrollHeight-150){
el.scrollTop = 0;
};
el.scrollTop = el.scrollTop + speed;
if(go == 0){
setTimeout("scrollFromBottom()",50);
};
}
function stop(){
go = 1;
}
function startit(){
go = 0;
scrollFromBottom();
}
// -->
</script>
<script style="text/javascript" src="http://blogging-tips-gadget.googlecode.com/files/TableOfContentsJS.js"></script>
<script src="http://MYBLOG.blogspot.com/feeds/posts/default?alt=json-in-script&max-results=999&callback=loadtoc"></script>
<script type="text/javascript">showToc();</script>
<style type="text/css">
#marquee_replacement{
border:1px solid #000;
width:100%;
height:250px;
overflow:auto;
background:#fff;
}
#marquee_replacement p.spacer{
height:150px;
}
</style>
<div id="marquee_replacement" onmouseover="stop();" onmouseout="startit();">
<div id="toc">
</div></div><div id="feedGadget">Gadget by <a href="http://www.blogdoctor.me" target="_blank">The Blog Doctor</a>.</div>
In above code change "MYBLOG" to the url (subdomain) of your blogspot and save.
Enjoy!
Random Rotating Post Gadget with Excerpt. |
If you have a blog with more than 20 posts than this gadget is just the thing your blog needs :
Click on above picture to enlarge it. You can see it above the posts column in this blog when the page is completely loaded. Features :
- 1. Shows one post title at a time.
- 2. Links to the post.
- 3. Shows post excerpt also.
- 4. Every 5 seconds shows a new post.
- 5. Cycles through all the posts in the blog.
- 6. Starts a new cycle at the end of the list.
- 7. Once loaded continues cycling even when not connected to the Internet.
- 8. Uses official Google AJAX technology.
- 9. Can be used on other blogging platforms (not tested).
- 10. Hovering with mouse cursor over the post title halts the rotation till mouse moves off the gadget.
Bloggers with plenty of posts in their blogs face a major problem in showing all of them to the viewers. Some solve this by changing the settings to show all the posts in Main Page. This slows down the loading speed of the blog and can turn away visitors.
The Blog Archive gadget which comes as a default with the standard Blogger Layouts shows only the posts in the blog for the present month. The rest of the posts are hidden and can be seen only by clicking the black arrows to expand the archives. This saves the real estate on the blog page but to the new visitor hides the previous months blog posts.
One can eliminate the dates in the Blog Archive and show all your posts in a blogger gadget but this makes a very long sidebar and if you have posts with little content this may make the blog seem lopsided.
To save space and yet show all posts one by one this gadget uses official Google AJAX API Feed technology and the Dynamic Feed Control. It fetches the post titles and data from your blog and displays it in the gadget. To install this on your blog :
1. Login at Blogger.com.
2. Click Layouts link on Dashboard.
3. Click Add Gadget link in sidebar on Page Elements subtab of Layout tab.
4. In popup window scroll down and click Html/Javascript gadget.
5. In Contents window copy the code below and paste after modifying it :
<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;
}
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=PUT_AJAX_KEY_HERE"
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>
<div id="feedGadget">Loading...</div>
<div id="feedGadget">Gadget by <a href="http://www.blogdoctor.me" target="_blank">The Blog Doctor</a>.</div>
In the above code make changes in the following parts :
<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."});
}
Change "MYBLOG" to actual blog subdomain and "BLOG_TITLE" to actual title of your blog. Then paste the modified code in the Html gadget and save the gadget.
Get your AJAX API key and put it in above code instead of 'PUT_AJAX_KEY_HERE'.
Lastly click and drag the HTML gadget from the sidebar to above the posts column. See picture below.

This is because the width of the gadget is more suited for the posts column than the sidebar. Save the Layout. View Blog.
If you do not want to save space you can show the whole Table of Contents with post preview.
The Labels Gadget for Classic Templates in Blogger. |
Happy Holidays, Merry Christmas and a Happy New Year to all readers of The Blogdoctor! As a sort of gift to all Ye Olde Classic Template users out there I decided to release The Labels Gadget for Classic Templates.
There are many bloggers who still persist with Classic templates for various reasons. It has been their oft repeated demand for a Labels gadget in the sidebar as can be added in the Layouts template. In Classic templates though the labels appear below the posts their links have to be added by manually coding in HTML in the template.
Those with Classic templates can do this by upgrading to Layouts. Those who wish to keep their classic templates can use this method to add Label links to the sidebar.........ADD LABELS GADGET TO TEMPLATE

Follow these steps to add the Labels Gadget to Classic templates :
1. Login at Blogger.com.
2. Click 'Template' link on Dashboard under Blog Title. If there is a 'Layout' link instead then you can easily add the Labels Gadget to the sidebar.
3. On Template----->Edit Html subtab scroll down in Template Code box to the code for the sidebar. Depending on whether it is an official Blogger template or a customized one the code will differ. In the official Blogger Minima template the sidebar begins with this code :<!-- Begin #sidebar left-->
<div id="sidebar-l"><div id="sidebar2">
Paste the code given in the next step immediately after the above code. You can also paste it immediately above this code :<h2 class="sidebar-title">Links</h2>THE LABELS GADGET CODE
The Labels gadget code depends on the Google Dynamic Ajax Feed Control which was used to create the Ajax Blog List Gadget with Post Preview.
Copy the code below into a Notepad file. Then modify it as shown below the code and paste it in the Classic template :<h2 class="sidebar-title">Labels</h2>
<!-- ++Begin Dynamic Feed Wizard Generated Code++ -->
<!--
// Created with a Google AJAX Search and Feed Wizard
// http://code.google.com/apis/ajaxsearch/wizards.html
-->
<!--
// The Following div element will end up holding the actual feed control.
// You can place this anywhere on your page.
-->
<div id="feed-control">
<span style="margin:10px;padding:4px;">Loading...</span>
</div>
<!-- Google Ajax Api
-->
<script src="http://www.google.com/jsapi?key=notsupplied-wizard"
type="text/javascript"></script>
<!-- Dynamic Feed Control and Stylesheet -->
<script src="http://blogging-tips-gadget.googlecode.com/files/gfdynamicfeedcontrolMod2.js" type="text/javascript"></script>
<style type="text/css">
.gfg-root {
width : 200px;
height : auto;
position : relative;
overflow : hidden;
text-align : center;
font-family: "Arial", sans-serif;
font-size: 12px;
border: 1px solid #BCCDF0;
}
.gfg-title {
font-size: 14px;
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: 12px;
font-weight : bold;
color : #3366cc;
background-color: #E5ECF9;
line-height : 1.4em;
overflow : hidden;
white-space : nowrap;
margin-bottom : 5px;
}
.gfg-subtitle a {
color : #3366cc;
}
.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;
}
.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: 14px;
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;
}
</style>
<script type="text/javascript">
function LoadDynamicFeedControl() {
var feeds = [
{title: 'Labels',
url:'http://pipes.yahoo.com/pipes/pipe.run?_id=e7af483f40bb1d94a064bb2612e844f4&_render=rss&urlinput2=http://MYBLOG.blogspot.com'
}];
var options = {
stacked : false,
horizontal : false,
title : ""
}
new GFdynamicFeedControl(feeds, 'feed-control', options);
}
// Load the feeds API and set the onload callback.
google.load('feeds', '1');
google.setOnLoadCallback(LoadDynamicFeedControl);
</script>
Gadget by <a href="http://www.blogdoctor.me">The Blog Doctor.</a>
<!-- ++End Dynamic Feed Control Wizard Generated Code++ -->
Replace "MYBLOG" with actual name of your blog.
Save Template and View Blog.FEATURES
The Labels Gadget for Classic Templates has the following features :
1. Label Links added automatically. There may be a slight delay till the post feed is published.
2. Labels linked to their label pages.
3. Labels arranged in order of frequency.
4. It can be customized by changing the CSS code between <style type="text/css"> and </style >
Enjoy!
Shows All Posts Blogger Gadget Installer. |
The Blogger Archive Gadget shows only the post titles of the latest month (in Hierarchy mode). The rest of the months and post titles are hidden behind small black arrows which have to be clicked to reveal them. The code generated in Step 2 is in HTML. It will work if you paste it directly in a HTML gadget in your blog. However we need to provide it to our readers in a gadget to place on their blog. To do this we need to convert HTML characters like '>' and '<'. You can do this the hard way by converting each character or the easy way by using sites which provide this service free. Copy the code generated in Step 2 and paste it in the box provided at the HTML escape site. Click the Encode button. A fresh code text box will appear lower down. Copy the code in it.
The Feed Gadget shows only the latest five posts if used along with your blog feed. Here is The "Shows All Posts Blogger Gadget Installer" which when added to your blog enables your blog readers to add/show ALL your blog posts in their blog.
This gadget can increase traffic to your blog and also after installing it on your blog you can with one click add all your post titles as a blog archive on your own blog.........1. MODIFY FEED TO JAVASCRIPT CODE
Paste the code below in the place shown in Step2 after modifying it as follows :
Change 'MYBLOG' to the actual subdomain of your blogspot blog. That is if your blog address is http://example.blogspot.com put in 'example' in place of 'MYBLOG' in the code below :
<div style="text-align:left !important;">
<script language="JavaScript" src="http://itde.vccs.edu/rss2js/feed2js.php?src=http%3A%2F%2FMYBLOG.blogspot.com%2Ffeeds%2Fposts%2Fdefault%3Fstart-index%3D1%26max-results%3D999&chan=n&num=1000&desc=0&date=n&targ=y" type="text/javascript"></script>
<noscript>
<a href="http://itde.vccs.edu/rss2js/feed2js.php?src=http%3A%2F%2FMYBLOG.blogspot.com%2Ffeeds%2Fposts%2Fdefault%3Fstart-index%3D1%26max-results%3D999&chan=n&num=0&desc=0&date=n&targ=n&html=y">View RSS feed</a>
</noscript>
<a href="http://www.blogdoctor.com">Gadget by The Blogdoctor.</a>
</div>
This code converts your site feed (1000 posts) :
http://MYBLOG.blogspot.com/feeds/posts/default?start-index=1&max-results=999
into Javascript code at this site.2. CONVERT ABOVE CODE TO ESCAPE HTML
3. CREATE GADGET INSTALLER
To add the gadget installer to your blog copy the code below and paste it in a HTML gadget in your blog AFTER :
a) Changing "MYBLOG.COM" to your actual blog name.
b) Copy code given in Step 2 above after the encoding process and paste where it says "PASTE CODE FROM STEP 2 HERE."<form action="http://beta.blogger.com/add-widget" method="POST">
<input value="All Posts From MYBLOG.COM" name="widget.title" type="hidden"/>
<textarea style="display:none;" name="widget.content">
PASTE CODE FROM STEP 2 HERE.
</textarea>
<input
value http://www.blogdoctor.com="name=" infourl type="hidden"/>
<input
value = name="logoUrl" http://www.blogger.com/img/icon_logo32.gif type="hidden"/>
<div style="text-align:center;">
<input src="http://i52.photobucket.com/albums/g7/vinayak06/add2blogger_lg-1.gif" name="image" type="image"/>
</div></input
value></input
value></form>
<div style="text-align:center;">
<p>Click above button to get ALL posts from this site on your blog</p>
<li><a href="http://www.blogdoctor.me/2008/12/shows-all-posts-blogger-gadget.html">Click here to Get Similar Gadget for Your Blog.</a></li>
</div>
Put the title of the HTML gadget as "Get ALL Posts from THIS BLOG."
Save the HTML gadget. It will look like this :
4. TEST GADGET INSTALLER
Lastly test the Gadget installer. Click on the "Add to Blogger" button and you will get the "Add Page Element" window. Select your blog and add and you will see a complete list of your blog posts in the sidebar (upto 1000 posts).
Enjoy!
The Meta Gadget for Blogger. |
Wordpress has a meta widget which can be added in the sidebar. It contains links to login, logout, feed links and the link to Wordpress.org. Blogger does not have such a gadget. Instead it has the Blogger Navbar which can lead you to nasty blogs.
Here is a Blogger Meta Gadget and a Google Meta Gadget which you can add to the sidebar :
Google Gadget. | Blogger Gadget |
Since feed links are better shown at the top of the blog I have omitted them from above gadgets which are placed at the bottom of the sidebar.........
The Blogger Meta Gadget.
To add the Blogger Meta Gadget to your sidebar click the button below :
The Google Meta Gadget
Click this link to open the Customize Gadget page. Copy the code after customization and paste in a Html gadget in your blog.

Click above button to add "BLOGGER META" to your iGoogle page.
You need not worry that someone will click on the Login links to login to your blog. That does not happen in Blogger unless you have invited them to be team members of your blog. Besides without your password and user email they cannot login to your blog.
Enjoy!
How to Change Slideshow Size? |
The slideshow gadget in Blogger is quite small and may look minuscule in larger width templates. If you have a large width sidebar and wish to increase the size of the slideshow within it here is how you can do it.........
Step 1. Add Slideshow Gadget to sidebar :
Login at Blogger.com.
Click Layout link under Blog Title on Dashboard.
On Add Page Elements tab click 'Add Gadget' link.
In popup window click 'Slideshow.
Configure your slideshow.
Click Save button below.
View Blog.
Step 2. Find width of your sidebar.
To increase the width of the slideshow you have to first find width of the column containing it. To do this go to Layout----->Edit Html subtab. In Template Code box scroll down to the CSS code for the sidebar which may look like this :#sidebar-wrapper {
width: 220px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
See the number in the width line '220px'. That is the width of the sidebar. You cannot have your slideshow inside the sidebar with more width than this or else it may break the template and your blog sidebar may fall down below the posts column.
Step 3. Define slideshow size in CSS part of template.
The last step is to define the new size of the slideshow in the CSS part of the template. In your Template Code box paste the code given below immediately above the ]]></b:skin> tag :.slideshow-container {
width: 200px !important;
height: 400px !important;
}
Preview and adjust the width and height numbers. Save Template. View Blog. Enjoy slideshow!
Ajax Blog List Gadget with Post Preview. |
Last week Blogger enabled Google Gadgets for Layout Blogs. You can now add a Google Gadget directly by login at Blogger.com, click Layout link on Dashboard and click 'Add a Gadget' link. This replaces the 'Add a Page Element' link.
The first gadget on the Basics subtab in the popup window is the Blog List gadget. This gadget shows off what you read with a blogroll of your favorite blogs. It shows the latest post title on the blog linked to the post with a post snippet and the date of last update. Since many have reported this gadget to malfunction here is the much better Ajax Blog List Gadget : (See picture below)
As you can see it can be customized to show ANY NUMBER of posts from any public blog. The top pane shows a post preview which cycles through all the posts listed below continuously. The time period and the styling of the widget can also be customized. To install it in your blog..............
login at Blogger.com and click Layout link on Dashboard. On Page Elements subtab of Layouts tab click the 'Add a Gadget' link. In popup window scroll down and click the Html/Javascript option. In it paste the following code under contents :
<!-- ++Begin Dynamic Feed Wizard Generated Code++ -->
<!--
// Created with a Google AJAX Search and Feed Wizard
// http://code.google.com/apis/ajaxsearch/wizards.html
-->
<!--
// The Following div element will end up holding the actual feed control.
// You can place this anywhere on your page.
-->
<div id="feed-control">
<span style="color:#676767;font-size:11px;margin:10px;padding:4px;">Loading...</span>
</div>
<!-- Google Ajax Api
-->
<script src="http://www.google.com/jsapi?key=notsupplied-wizard"
type="text/javascript"></script>
<!-- Dynamic Feed Control and Stylesheet -->
<script src="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js"
type="text/javascript"></script>
<style type="text/css">
/* Root */
.gfg-root {
width : 80%;
height : auto;
position : relative;
overflow : hidden;
text-align : center;
font-family: "Arial", sans-serif;
font-size: 20px;
border: 5px solid #BCCDF0;
}
/* Feed Title */
.gfg-title {
font-size: 35px;
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: 25px;
font-weight : bold;
color : #3366cc;
background-color: #E5ECF9;
line-height : 1.4em;
overflow : hidden;
white-space : nowrap;
margin-bottom : 5px;
}
.gfg-subtitle a {
color : #3366cc;
}
.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;
}
.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('http://www.google.com/uds/solutions/dynamicfeed/garrow.gif');
background-repeat: no-repeat;
background-position : center left;
}
/*
* FeedControl customizations.
*/
.gfg-root .gfg-entry .gf-result .gf-title {
font-size: 25px;
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;
}
</style>
<script type="text/javascript">
function LoadDynamicFeedControl() {
var feeds = [
{title: 'BLOG1_TITLE',
url: 'http://BLOG_1.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=5'
},
{title: 'BLOG2_TITLE',
url: 'http://BLOG_2.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=5'
},
{title: 'BLOG3_TITLE',
url: 'http://BLOG_3.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=5'
},
{title: 'BLOG4_TITLE',
url: 'http://BLOG_4.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=5'
}];
var options = {
stacked : true,
horizontal : false,
title : "MY BLOGS"
}
new GFdynamicFeedControl(feeds, 'feed-control', options);
}
// Load the feeds API and set the onload callback.
google.load('feeds', '1');
google.setOnLoadCallback(LoadDynamicFeedControl);
</script>
Widget by <a href="http://betabloggerfordummies.blogspot.com">Betabloggerfordummies.</a>
<!-- ++End Dynamic Feed Control Wizard Generated Code++ -->
In above code replace BLOG1_TITLE, BLOG2_TITLE,....with the respective blog titles. Also replace BLOG_1, BLOG_2,.. with respective blog names. If you wish to show more posts then replace the last number '5' in these lines :
http://BLOG_4.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=5
with the number of posts you wish to show. Save gadget. Here is what mine looks like :
To change the styling of the above gadget
apply the css parameter lines to this code in it :
/* Root */
.gfg-root
/* Feed Title */
.gfg-title
/* Entry Section - Note the contents are generated from the
FeedControl, see documentation or the css here to style.
*/
.gfg-entry
/* Feed List */
.gfg-list
/* List Entries, support highlighting, and odd and even behaviors */
.gfg-listentry
.gfg-listentry-highlight
.gfg-listentry-odd
.gfg-listentry-even
Save gadget.
If you want to add more blogs to the list
add as many code blocks like this one as you want :
{title: 'BLOG5_TITLE',
url: 'http://BLOG_5.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=5'
},
in the following code block in the whole code :
var feeds = [
{title: 'BLOG1_TITLE',
url: 'http://BLOG_1.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=5'
},
{title: 'BLOG2_TITLE',
url: 'http://BLOG_2.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=5'
},
{title: 'BLOG3_TITLE',
url: 'http://BLOG_3.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=5'
},
{title: 'BLOG4_TITLE',
url: 'http://BLOG_4.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=5'
}];














