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!
Yet Another Table of Contents YATOC. |
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 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!
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'
}];
Add Myspace Layouts to Blogger Blogs. |
If you have a Myspace site and want your Blogger blog to be customized with the same look you can easily put your Myspace Layout on top of your Blog Layout. See picture of Blogger blog with a Myspace Layout on it below :
This is for Blogger blogs with Layout Templates. Those blogs with Classic Template should first Upgrade to Layouts Template...............LOAD THE MINIMA LAYOUT
The first step is to load the Minima Layout Template. This is because if your original Blogger Layout contains graphic images they will interfere with the Myspace Layouts which contain lots of graphics and prevent them from displaying properly.
To do this first BACKUP WIDGETS TEMPLATE DATA. When you change Layouts your original widgets are deleted and have to be added later after loading the new layout. You can also use this method to keep widgets and change Layouts Template.
Login at Blogger.com and click on Layout link on Dashboard. On Page Elements tab which opens click on 'Pick New Template' subtab of Template tab. Select the radio button for the Miima Template and click Save Template button at top.
The Minima Template is now loaded. Now add in the widgets code from the backup saved in the paragraph above. Paste the code in Html Page Elements. LOAD MYSPACE LAYOUT
To choose a Myspace Layout just Google for it. Go to the sites returned in the search results and choose the Layout you like. Copy the code for the Myspace Layout which is provided below the thumbnail preview. If you already have a Myspace Layout copy the code from the About Me box after login to your Myspace site.
Login at Blogger.com and click 'Layout' link on Dashboard. On the Page Elements tab click on the 'Add Page Elements' link in the top of the left sidebar. In the popup window choose Html/Javascript Page Element. In the contents window paste the whole code which you had copied of the Myspace Layout. DO NOT ADD A TITLE. Save.FINE TUNING LAYOUT
To fine tune the Layout switch to the Fonts and Colors subtab of Template tab. The Minima Template has dark fonts which you may need to make lighter if the Myspace Layout is dark. You can do this on this tab. Also you can adjust the background color so that it blends into the Myspace Layout. After previewing and making changes save them.
View Blog. Enjoy your Blogger blog with the Myspace Layout!!
Show Top Labels Only In Labels Widget. |
As you write more and more posts you will keep adding labels to them to categorize your posts. You can add more than one label to any single post. Labels are useful as they serve as keywords channelling traffic to your posts through search engines like Technorati.
However the list of labels in your blog can get to be very long stretching your sidebar until your blog post looks like a flag on top of a long sidebar. To prevent this you can modify the code of your Labels widget to show only the topmost labels in your blog..............LIMIT LABEL NUMBER
To limit the number of labels shown in your Labels sidebar widget login at Blogger.com and click 'Layout' link on Dashboard. The Page Elements subtab of Template tab will open. If you do not have a Labels widget in the sidebar Add a Labels Page Element to it.
After the Labels widget is added click on Edit Html subtab of Template tab. This will open the Template code box on the Edit Html subtab. Click the Expand Widgets Template checkbox on top of the Template code box to put a check mark in it. The Template code box will show the expanded widgets templates.
Scroll down in the Template code box to locate the code for the Labels widget. This will look like this :<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'>
<data:label.name/>
</span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
<data:label.name/>
</a>
</b:if>
<span dir='ltr'>(<data:label.count/>)</span>
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
REPLACE THE WHOLE ABOVE CODE WITH THE CODE BELOW :<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<ul>
<script type='text/javascript'>
var labelnum = 0;
<b:loop values='data:labels' var='label'>
if (<data:label.count/> > 2) {
document.write("<li><a expr:href='data:label.url + "?max-results=100"'
rel='nofollow'><span><data:label.name/></span></a>(<data:label.count/>)</li>");
}
</b:loop>
</script>
</ul>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
The code above will only show labels with more than two posts. To increase number of labels increase the number two in this code :if (<data:label.count/> > 2) {
Preview. Save Template. Clear Cache. View Blog.
In the screenshot at right you can see two label widgets.
The Modified Labels widget at the top shows only the top two most frequently applied labels. The Normal Labels widget at the bottom shows all the labels in the blog. If you have such a widget and lots of labels it can get terribly long making your blog stand on it's long sidebar!!LIMIT NUMBER OF POSTS SHOWN FOR LABELS
When a label is clicked in the sidebar the default number of posts loaded is 20. You can also decrease this number by modifying the code show above. Take a look at these code lines within the above code :<a expr:href='data:label.url + "?max-results=100"' rel='nofollow'>
Change '100' in the above line to the number of posts you wish to load. Remember that if you select a higher number the page will take too long to load and you may lose traffic.
Happy Blogging!
New Widgets from Blogger in Draft. |
Blogger in Draft has some new widgets which you may like to try out in your blog. Blogger In Draft (http://draft.blogger.com/) is a special version of Blogger where new features are tried out before releasing them to evryone.
You can add the widgets to your blog - they are fully functional - and experiment with them and give your feedback on them.........LOGIN TO BLOGGER IN DRAFT
To add the widgets to your blog first login at Blogger In Draft : http://draft.blogger.com/. Click on Layout link on the Dashbard and then click Add Page Element link on The Page Elements subtab of Template tab. Proceed in the same method followed in Blogger to add Page elements to your blog.
In the popup window you will see the new widgets. See picture below :
FEED SUBSCRIPTION WIDGET
Most of the new blogger layout templates carry a "Subscribe to Posts Atom" link at the bottom of the Main Page. Many bloggers especially newcomers are mystified by this link and it's purpose. See : What is subscribe to Posts Atom?
The only solution was to add a prominent Feeds and email Subscribe icons at the top of the sidebar. Now Blogger is getting ready to roll out it's own Subscription Links Page Element. You can add it from Blogger In Draft and test it. With this your viewers can add one-click subscriptions to six popular feed readers: iGoogle, Google Reader, Bloglines, Netvibes, NewsGator, and My Yahoo!.
There is also a comment feed subscription option which offers per-post comments on the post page and whole blog comments on the Main Page.GOOGLE GADGET PAGE ELEMENT
You can now add a Google Gadget from Blogger In Draft directly instead of going to the Gadgets home page. The Gadgets come from iGoogle Gadget directory which contains thousands of them for your selection. You can create your own Google Gadget and add it to the directory.SEARCH BOX PAGE ELEMENT
Adding a search box to your blog has become easier with this widget which adds a Google Custom Search Engine to your blog. It can be customized to search your blog, the web or the links you have added to your blog or all three together.
Enjoy!
Keep Widgets AND Change Layout Template. |
How can I change the Layout template of my blog and keep my widgets? This is one question which occurs frequently to any blogger. As Blogger does not offer any three column templates at present or a template with large amount of customization, many are forced to load layouts from third parties.
Layout templates are different from Classic Templates which can be easily loaded without losing your widgets. If you want to change your Layout template you are forced to first backup widgets template data which otherwise would have been lost in the change. The other method is to change the template and then reload your widgets which takes time if you happen to have tons of widgets like mine. Here is a simpler method to keep widgets AND change the layout template..........THE PROBLEM
Here is what happens when you get bored with the standard Blogspot templates :
1. You do a Google search for "XML Blogger Layout Template Free"
2. You find a site offering free Blogger Layouts.
3. You download the XML file to your PC.
4. You login at Blogger.com and click Layout link on Dashboard. Then you click on Edit Html subtab of Template tab.
5. Above the Template code box you click on Browse button to navigate to the XML template file on your PC. You select the file and click Open.
6. Then you click the Upload button to upload the selected file to Blogger.
WHAM! Blogger hits you with this warning message :Widgets are about to be deleted :
Please confirm that the following
widgets should be deleted. All the widgets' configuration data will be lost.
Image1
LinkList1
Label1
Profile1
See picture below :
If you click the 'Confirm and Save' button the widgets will be lost unless you had them backed up. If you click the Cancel button the new layout template will not load.
So you land up between the devil and the deep blue sea and the process is aborted.THE SOLUTION
1. IDENTIFY YOUR WIDGETS : First you have to identify your widgets code. In the Blogger Layout templates each Page Element is executed by widget code in the template. To see the widget code login at Blogger.com and click on Layout link on the Dashboard. Then click on Edit Html subtab of Template tab. DO NOT CLICK THE EXPAND WIDGETS TEMPLATE check box! Scroll down in Template code box :
The code for the widgets is in red. Each page element is represented by a single line of code in the unexpanded template like this :<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
2. OPEN THE NEW LAYOUT TEMPLATE : Open the downloaded layout template (XML) file in Notepad. Identify the NON_WIDGET portion in the file. This is shown in black in the example Minima template file above.
3. COPY_PASTE THE NON_WIDGET CODE : Carefully select the NON-WIDGET code from the top of the template to the first widget code line in the new Layout template. Paste it instead of the same code in your Template box from the top of your template to the beginning of the first widget code line. Repeat the process for the rest of the NON-WIDGET code between the widgets and below the last widget code line in your template.
If you have done this carefully you will have replaced the whole template AROUND your widgets while keeping them intact.
4. PREVIEW BEFORE SAVING : The last step is to click the Preview button below the Template Code box. If you have done everything correctly your blog will open in a new window with the new layout template. Otherwise it will give you an error message. This is the advantage of Preview as it does not save the errors, if any, and gives you the opportunity of correcting them.
Put a Widget on a Specific Page or URL. |
Widgets in the new Blogger are the code behind the new Page Elements. You can add Page Elements to your blog from the Page Elements subtab of the Template tab. To add widget or page elements to your blog login at Blogger.com and click on Layout link on Dashboard. Then click the Add Page Element link in the sidebar.
After adding a Page Element to your blog it can be seen on all your blog pages unless you wrap the widget in conditional tags. You can decide on which pages OR PAGE the widget should appear..............WIDGET ON POST PAGES ONLY
If you want to put the widget only on the post (item) pages then paste this line :
<b:if cond='data:blog.pageType == "item"'>
immediately after the main includable line of code in the widget :
<b:includable id='main' var='top'>
For this login at Blogger.com and click on Layout link on Dashboard. Then click Edit Html subtab of Template tab. Put a check in the Expand Wdgets Template checkbox at the top of the Template code box and scroll down to the widget code. Lastly in the widget code add a </b:if> before the immediate next </b:includable>. This is how the whole widget code will look like after the change :
<b:widget id='HTML1' locked='false' title='' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
WIDGET CODE
</b:if>
</b:includable>
</b:widget>
This widget will only appear on the Post Pages.WIDGET ON MAIN PAGE ONLY
If you want the widget to appear only on the Main Page of the blog use the code below :
<b:widget id='HTML1' locked='false' title='' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
WIDGET CODE
</b:if>
</b:includable>
</b:widget>
This widget will appear only on the Main Page.WIDGET ON SPECIFIC BLOG PAGE
There are some cases in which you may want the widget to appear only on a specific page. For example there may be some pages on your blog with heavy traffic and you may want to put some advertisements there. Create the advertisement widget by pasting the Ad. code in a Html widget. Then modify the code as shown below :
<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 post. As an example I have added two Amazon Ads. at the bottom of the middle column on the How to add Picture to Beta Blog Header page of this blog. They are not present on any other page.WIDGET ON SPECIFIC LABEL PAGE
You can specify a widget to appear only on specific label pages. This is useful when you want to represent your labels with icons. For example you may have posts on books and when the label books is clicked in your blog the sidebar will show a book icon. For such widgets you can use this code :
<b:widget id='HTML1' locked='false' title='' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == "http://BLOG_NAME.blogspot.com/search/label/LABEL_NAME"'>
WIDGET CODE
</b:if>
</b:includable>
</b:widget>
Replace BLOG_NAME and LABEL_NAME with actuals.
Increase Traffic | Create a Google Gadget. |
A Google Gadget is a small application which runs on any website as well as your Google Desktop and provides a specific practical purpose and function. This purpose could be anything from advertising your home site to providing information or running small programs.
Because these Gadgets can run on any site or Google Desktop they have a much wider reach than Blogger Widgets which are similar but can only run on Blogger Blogs. Create a Blogger Widget but as it can only be installed on Blogger blogs it has a limited audience. If you wish to make a Blogger Widget check out Blogger Buzz: Make Your Own Blogger Widgets
You can create a Google Gadget without any signup and directly online without having to download any program............
To create Gadgets use the Google Gadget Editor At the coding level a Google Gadget is a XML file in which you can put any existing web content or applications. For example the code for a Google gadget saying "Hello World!" would look like this :
The content and the Module Preferences code is contained within a <Module>. The Module code is placed after the XML declaration showing that it is an XML file. XML is a general purpose markup language. It describes structured data in a way that both humans and computers can read and write.
You can create Google Gadgets to show cool and dynamic content that can be placed on any page on the web. They can be submitted in any of the following categories : News, Tools, Communication, Fun & Games, Finance, Sports, Lifestyle and Technology.Creating Google Gadgets
As an example I have created a Google Gadget showcasing the Blogger Hacks demonstrated in this blog. For this purpose I took the label feed for my Label "Blogger Hacks" and used the 'Fetch Feed as JSON' template available in the Google gadgets API Scratchpad. See Picture below :
I selected the 'Fetch Feed as JSON' template by clicking the link pointed to by the arrow above. JSON (JavaScript Object Notation) is a lightweight computer data interchange format. It is a text-based, human-readable format for representing objects and other data structures and is mainly used to transmit such structured data over a network connection
First I 'burned' my Blogger hacks Label feed at feedburner using the Labels feed URL :
http://betabloggerfordummies.blogspot.com/feeds/posts/default/-/Blogger Hacks
The feed Url I got from feedburner was :
http://feeds.feedburner.com/BloggerHacksCollection
I pasted this URL within the following code of the template :
// Use the _IG_FetchFeedAsJSON() function to retrieve core feed data from
// the specified URL. Then combine the data with HTML markup for display in
// the gadget.
_IG_FetchFeedAsJSON(
"http://feeds.feedburner.com/BloggerHacksCollection",
After that I modified the <ModulePrefs...../> section and used the File Menu to save my gadget. Used the Preview tab to see how the gadget looks like. After saving the gadget it is hosted by Google on it's own servers. You get a URL or link to the Gadget. Google provides free hosting, free bandwidth and an easy way to submit your gadgets to the official directory, where users from all around the world come to find them.
Here is a diagrammatic representation of the code in my Blogger Hacks Google Gadget. See picture below :
As you can see it differs from the simple "Hello World" Google Gadget (see first picture in this post) in having a 'User Preferences' section.
When the code is pasted in a Web page it looks like this :
If you want to add it to your blog sidebar go to the Google Gadget Creator Page. Here you can modify the gadget size to fit in your sidebar. You can also choose how many hacks to display and whether to show descriptions or not. After using the Preview button to customize your gadget click on 'Get Code' button' . Copy and paste the code into a Html Page element in the sidebar.
In the next post we will see how to distribute Google Gadgets and syndicate them to increase traffic to your blog. As you can see below you can put a Google Gadget within your post which you cannot do with a Blogger Widget. This is because the blog post is itself a Blogger Widget and you cannot put one Blogger Widget into another.
Click the "+Google" button in the bottom frame of the above Gadget to add it to your personalized iGoogle page.
Recent Comments Widget for Blogger. |
There are many benefits to having the latest comments on your blog displayed on your main page. In Blogger comments are only seen on post pages so visitors coming to your home page cannot see them unless they click on the small "COMMENTS" link after every post. If you include a Recent Comments section in your sidebar or your posts column then visitors can immediately read them and hopefully become impressed enough to return or click on them to read the posts.
When readers see the importance you give to their comments by displaying them on the main page of your blog many will take that as an incentive to post a comment.
There are two ways to include a Recent Comments Widget on the main page : The easy method and the slightly difficult Geek method..............FEED WIDGET (EASY) METHOD
Blogger has the feed widget which you can add to your blog like any other page element. Blogger also puts out post, label and comment feeds. Combining these two we can construct a Recent Comments widget by pasting the URL of your blog comments feed into a feed page element.
To do this login to Dashboard of Blogger and click on Layout link for your blog. This will open the Page Elements subtab of Template tab. Click on 'Add Page Element' link in sidebar. In the popup window click on Feed widget. In the Feed page element window paste the comments feed URL of your blog which is :
http://YOURBLOGNAME.blogspot.com/feeds/comments/default
Instead of 'YOURBLOGNAME' put actual name of your blog. Choose the number of comments you want to show. The maximum is five at present and OK it. View Blog.
If you want to show comments only from one post put this URL in it :
http://YOURBLOGNAME.blogspot.com/feeds/THISPOSTID/comments/default
Replace the CAPS.
To get your post ID login to Dashboard and click on Posts. Click on Edit link of the post you want or place your mouse cursor over the link and look at the status bar of your browser bottom left hand corner. (Enable status bar from View--->Status Bar menu of your browser.) You will see something like this :
http://www.blogger.com/post-edit.g?blogID=xxxxxxxxxxxxxxxxxx&postID=7938018824060714868
Copy down the number after postID and paste it in your comment feed url. You will then get the comments from this post only. The disadvantage of this method is that you get five comments only. The advantage is it is easy.The FEED-TO-JAVASCRIPT (GEEK) METHOD
This is the second method and it is slightly more complicated. It enables you to have much more than five comments in your widget and also to customize it in the colors you want. It also includes a NOSCRIPT tag in case the viewer has Javascript disabled in his browser.
This method can also be used to add content from your other blogs or any other site which puts out a feed to your blog. Since the new Blogger layout templates do not have a Previous Posts section in the sidebar like the Classic Blogger templates you can use this method to add it.
For this go to http://www.bucks.edu/feed/build.php. In the URL field enter the url of your blog's RSS feed which is :
http://yourblogname.blogspot.com/feeds/comments/default?alt=rss
Substitute actual blog name in place of yourblogname. Verify the URL of your feed before using this form. You can do this by opening the above URL in your browser. It should show all your blog posts. If not check Settings----->Site Feed in your blog and verify that it is set to Short or Full.
Then selct the settings you want :
Show channel? (yes/no/title) Display information about the publisher of the feed (yes=show the title and description; title= display title only, no=do not display anything)
Number of items to display. Enter the number of items to be displayed (enter 0 to show all available)
Show/Hide item descriptions? How much? (0=no descriptions; 1=show full description text; n>1 = display first n characters of description; n=-1 do not link item title, just display item contents)
Use HTML in item display? ("yes" = use HTML from feed and the full item descriptions will be used, ignoring any character limit set above; "no" = output is text-only formatted by CSS; "preserve paragraphs" = no HTML but convert all RETURN/linefeeds to
to preserve paragraph breaks)
Show item posting date? (yes/no) Display the date the item was added to the feed.
Target links in the new window? (n="no, links open the same page", y="yes, open links in a new window", "xxxx" = open links in a frame named 'xxxx', 'popup' = use a JavaScript function popupfeed() to open in new window)
After selecting the settings you want click on Preview and check to see that content from your blog is being displayed. Then click on Generate Javascript button. Copy all the code. Login to your Dashboard and click on Layout. Click add Page element link in sidebar and choose Html/Javascript option. In the popup window paste the code, give it a Title and OK it. View Blog. See picture below :
Click on picture to enlarge it. Number 1 Feed is using the second method and shows much more comments than Number 2 Feed which has been added using the Blogger feed widget. To add a page element to the posts column you will have to alter the code as shown in 10 Quick Tips for Smarter Blogging.STYLE THE FEED WIDGET
You can change the colors of the feed widget added using the second method above. To do this go to Template------>Edit Html and scroll down to your sidebar code for the feed widget. It will look something like this :
<b:widget id='HTML5' locked='false' title='RECENT COMMENTS' type='HTML'/>
Look for the number id of the widget. In this case it is HTML5. You will use this to add code to CSS part of your template to style the widget. To do this add this code just before ]]></b:skin> tag in your template :
#HTML5 .rss_item {
padding:.5em 0em 1.5em;
width:500px;
}
#HTML5 .rss_items {
margin-left:5px;
}
The CSS classes are :
.rss_box defines the bounding div for the entire display- use to define borders, fill, etc.
.rss_title the title of the feed and link style if displayed. Use with variants of rss_title a:link, rss_title a:hover, etc for rollover styles
.rss_items defines the unordered list <ul>...</ul> for the feed items- use to define the padding/margins for items.
.rss_item display of each feed item description and title, <li>...</li> as well as the channel description, if displayed.
.rss_item a: variant for the item title and link style
.rss_date defines the display of item posting dates
Just add your widget id before the clases above which represent the elements in the feed.
Backup Widgets Template Data. |
Widgets are the modules which make up the New Blogger Template. For more information see What are Widgets. However the data they carry to and from your blog displayed in browser to the Blogger database is kept separate. When you backup the template this data is not backed up. When you copy widget code to another blog the data is not transferred along with it. If you upload a template with widgets to your blog the widgets are added without the data they carry........ Technorati Tags:widgets, backup, template, page element, data
To backup your blog you should backup the template also as described in How to change Template. The widgets are also backed up along with the template. For example my Link List widget is backed up in the template as follows :
<b:widget id='LinkList2' locked='false' title='BLOG RESOURCES' type='LinkList'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target' target='_blank'><data:link.name/></a></li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
However I have a long list of links within the widget which does not appear in it. They are retrieved from the Blogger Database the moment the blog is displayed in a browser using this code :
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target' target='_blank'><data:link.name/></a></li>
</b:loop>
To backup this link list, so that you need not type it out all over again should you require to change blog template, you have to look at the page source. For this open your blog in a browser and go to View---->Page Source(in Firefox) or View---->Source in Internet Explorer. The source file will open in Notepad and save this file as MyblogPageSource.txt. Scrolling down this file will give you the data in all the widgets in your blog. For example the Link List widget data appears as follows :
<div class='widget LinkList' id='LinkList2'>
<h2>BLOG RESOURCES</h2>
<div class='widget-content'>
<ul>
<li><a href='http://www.nutrocker.co.uk/3dheader.html' target='_blank'>3D HEADER</a></li>
<li><a href='http://www.google.com/addurl/?continue=/addurl' target='_blank'>ADD BLOG TO GOOGLE</a></li>
<li><a href='http://www.adfreeblog.org/' target='_blank'>ADFREE BLOG</a></li>
<li><a href='http://www.autopinger.com/' target='_blank'>AUTOPINGER</a></li>
</ul>
<div class='clear'></div>
Select only the links from the above code and copy and save to another Notepad file as LinksWidgetBackup.txt. See Below :
<ul>
<li><a href='http://www.nutrocker.co.uk/3dheader.html' target='_blank'>3D HEADER</a></li>
<li><a href='http://www.google.com/addurl/?continue=/addurl' target='_blank'>ADD BLOG TO GOOGLE</a></li>
<li><a href='http://www.adfreeblog.org/' target='_blank'>ADFREE BLOG</a></li>
<li><a href='http://www.autopinger.com/' target='_blank'>AUTOPINGER</a></li>
</ul>
Do this with other widgets to save their data.
Add Language Translation Flags With Mouse Clicks. |
There are many ways to add translation facilities to your blog. All of these require you to copy and paste code from various sites like Google Translate, World Lingo or Altavista. For the first time here is a widget using which you can add these tools to your blog simply using mouse clicks........... Technorati Tags:blogger hacks, widgets, translation tools
There is no code to be copied and pasted. ADD LANGUAGE TRANSLATION TO YOUR BLOG WITH ONLY TWO MOUSE CLICKS.
Just click on the buttons in the right sidebar. There is one for Google Translation and one for Alta Vista Babelfish. To add the Google Translation Flags click on the button which says Language Translation Widget. See the picture below :
Click on image to enlarge it. After clicking the Buttons you will see the following screen :
Click on image to enlarge it. Here if you want you can change the title. You can also click on the Learn more link which leads to this page. If you have knowledge of programming you can change the content and the template by clicking on Edit Content and Edit Template respectively, though I would not advise it. Lastly select the blog to which you want to add the widget if you have more than one blogs on the Dashboard. Click add Widget button when done. The Page Elements tab of your selected blog opens with the widget added in the sidebar. Click on View Blog to see the widgets. See Picture below :
There is no need to go to Template look for where to add code and all that.
Add Widget to provide Button-Link to your Blog. |
You can now add a widget to your blog with a button which when clicked adds a button link to your blog from the reader's blog. This is done automatically without the reader having to type in even a line of code..... Technorati Tags:button, button-link, link widget, page element, widgets
First create a button by going to http://cooltext.com/Buttons and create a button for your blog. Then upload this button picture to a freehost like Googlepages and copy down the url of the picture. Let us call it : URL OF YOUR BUTTON PICTURE.
To do this go to Layout from the Dashboard after logging in to your account. In the Page Elements section click on Add Page Element link in the sidebar. In the new pop up window which opens choose Html/Javascript option. In the content section paste the following code :
<form action="http://beta.blogger.com/add-widget" method="POST">
<input value="FAVOURITE" name="widget.title" type="hidden"/>
<textarea style="display:none;" name="widget.content">
</textarea>
<input
value="http://buzz.blogger.com" name="infoUrl" type="hidden"/>
<input
value="http://www.blogger.com/img/icon_logo32.gif" name="logoUrl" type="hidden"/>
<input value="LINK TO THIS SITE" name="go" type="submit"/>
</form>
<p>Click above button to get a button link to this blog</p>
In the middle code replace the Capital letters with the appropriate values. Add all the above code in blue including the code in the middle picture. Click on picture to enlarge it. Then save the widget.
View blog. You will see below button in your sidebar:
When a reader clicks on this button he is taken to a page where he has to select his blog where he wants to add the link to your blog as shown below : 
Here the reader can change the Title and edit the content if he/she wants. On clicking Add Page Element the link is added to the Page Elements tab in the sidebar of his blog. He/She can then rearrange its location in the blog by drag and drop method.
Using this method I have added it to my blog in the right sidebar at the bottom.
How to Customize your Header? |
To customize the header in a beta blog...........
start with BACKING UP YOUR TEMPLATE as described in How to Change Template.
The Blog Header in Beta blogs is described by two sections of code. The first section is in the CSS part of the template where the physical characteristics of the header are described. A sample header code in the CSS is given below :
/* Blog Header---------------------- */
#header-wrapper {
background:$titleBgColor url("http://www.blogblog.com/rounders3/corners_cap_top.gif") no-repeat
left top;
margin:22px 0 0 0;
padding:8px 0 0 0;
color:$titleTextColor;
}
#header {
background:url("http://www.blogblog.com/rounders3/corners_cap_bot.gif") no-repeat left bottom;
xxxxxxxxxxx
padding:0 15px 8px;
}
#header h1 {
margin:0;
padding:10px 30px 5px;
line-height:1.2em;
font: $pageTitleFont;
}
#header a,
#header a:visited {
text-decoration:none;
color: $titleTextColor;
}
#header .description {
margin:0;
padding:5px 30px 10px;
line-height:1.5em;
font: $descriptionFont;
}
As you can see all the physical characteristics of the header such as background, margin, padding, textcolor etc.are described here. Also the header heading is described in h1 and the description is described in #header .description. The behaviour of the header link is described in #header a and #header a:visited.
To customize the physical characteristics of the header you will have to modify the above code. For example to increase the width of the header you will have to add "width:750px;" line in the line signified by xxxxxxx. To increase its height add the line "height:100px;" in the same position. To customize somemore features add the following lines in the same place :
padding:0 15px 8px;
background-color:#003333;
border:solid thick ;
height:125px;
width:725px;
margin:10px 0 0 0;
Margin and Padding are described in clockwise order and the former is the space outside while the latter is the space inside the element. Background color is described here using hex number. A useful utility for determining the hex number of a color is the color picker from Iconico.com. NOTICE that all the lines end with a semicolon.
In the above code you will also see some properties described using variables like $descriptionFont, $titleTextColor, $pageTitleFont etc. These are the variables passed on to the top section under Variable Definitions and are responsible for executing the 'Fonts and Colors' page under the Template section. They enable customizing the template in a WYSIWYG or Graphical interface for the point-and-click user.
The second section of code is what executes the header on the web page and exists in the body. A sample headercode is given below. The header in beta blogs consists of single or multiple widgets which are contained within a header section which in turn is contained within a header-wrapper.
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='3' showaddelement='yes'>
<b:widget id='HTML2' locked='false' title='' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
</b:section>
</div>
The code "maxwidgets='3'" shows how many widgets are contained within the header. If you do not have this part in the second line of your header you will have to add it before adding anything like a picture or a banner-link to the header. After this is "showaddelement='yes'". You will have to add this so that your header will have an 'Add Page Element' link in the Page Elements section. After adding this save the template and switch to Page Elements view to see the link in action in the header.
You can now add as many widgets as you have specified under 'maxwidgets' to the header by going to Page Element view and clicking on Add Page Element. You can add a Banner Link, a Banner, Adsense and any other advertisements, Animated banners, Flickr Fonts, Logos or if you wish do away with the header completely. Creativity beckons you and you play with the muses.
To add Flickr Fonts go to here. Create the header and upload it to a free host like Googlepages. Click on Add Page Element link in header and choose picture element. In the popup window paste the url of the picture at Google pages and save. See below.
For animated banners try here : http://www.animationonline.com/S/display_templates.html
http://www.gifanimations.com
http://www.gifs.net/
For BLOG HEADERS see :
http://www.headerbar.com/templates/
For CUSTOMIZED BANNERS see :
http://www.customsigngenerator.com/
To add a horizontal menubar see :
http://beautifulbeta.blogspot.com/2006/10/adding-menubar-to-your-blog.html
To Randomise header graphic with Javascript see :
http://nofancyname.blogspot.com/2005/11/using-javascript-to-randomize-things.html
To Add a rotating picture to the header see :
http://freeyasoul.blogspot.com/2006/10/random-rotating-banner-hack.html
To make a Header with Title in the middle and two images at the side use a table structure as follows :
<table width="740" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="URL OF PICTURE FILE" width="128" height="120" align="left" /></td>
<td><div align="center">
<h1><strong>Beta Blogger for Dummies</strong></h1>
</div></td>
<td><img src="URL OF PICTURE FILE" width="128" height="120" align="right" /></td>
</tr>
</table>
Add this code to a Html/Javascript element obtained after clicking Add Page Element link in the header in Layouts section. See the result below :
Another hack for doing this is at :
http://beta-templatetesting.blogspot.com/2006/11/3-colum-header.html
CREATE YOUR OWN BLOG HEADER GRAPHIC See :
http://paulstamatiou.com/2005/11/06/how-to-make-a-blog-header-graphic/














