Calling all Newbie Bloggers!

Welcome to 2009 and your spanking new blog you created at Blogger.com. 

Photo by Ben30

What are the next steps you should follow to make blogging an instantaneous and painless experience? How to be a successful blogger using only point and click and some fast keyboarding? Here are some fast tips for the ultra n00b................

 

The first thing when creating a blog is to select a short and sweet URL or blog address. You can change this afterwards also by login at Blogger.com and then go to Settings>>Publishing>>Blog Address. If the address is not available you can get a Custom Domain Dot Com address for only 10$ US and also get rid of the 'blogspot' in the address.

Do not change the blog address if more than two months have elapsed because you will have to start all over again from scratch with respect to the search engines. You will also lose the traffic going to the old address!

 

After creating a blog speed up getting it on the search engines by submitting blog to them and verify ownership using Google Webmaster Tools.

 

Creating posts and inserting pictures in your blog is made easy thanks to Windows Live Writer.

 

For optimum blogging experience download Firefox browser on a PC with a broadband connection. For checking your emails use Thunderbird. To follow and subscribe to latest blog updates use Google Reader. All are free!

 

Never delete the account used to create your blog. DELETING ACCOUNT DOES NOT DELETE YOUR BLOG. 

 

After creating a post open the post page in browser by clicking on the post title. Then from browser menu click File>>Save Page As and save it to a backup folder on your hard drive.  You should also backup your entire blog periodically. Backup your blog template (Login>>Layouts>>Edit Html>>Download Full Template)and widgets in same folder. Periodically record the folder to CD or DVD-ROM to insure against hard disk failure. Invest in a USB drive and synchronize backup folders to it. This will prevent piling up of backup CD/DVD-ROMs.

 

Keep passwords secure with Keep Pass - a free password encryptor and manager.  In your Google or Gmail account settings enter a secondary email account.

 

Open a Paypal account and put in some donation links in your blog.

On the Main Page of the blog show only an expandable summary of the posts followed by a Read More link. This makes the main page load faster.

 

Burn your blog feed at Feedburner.com and copy the new feed url and paste it in Settings>>Site Feed>>Post Feed Redirect box and save. Now you will be able to know your full subscriber count. Put in a prominent Feed Icon at the top of your blog sidebar so viewers can subscribe to blog updates.

 

Lastly add content regularly at least thrice weekly.  Do not make very long posts and add pictures and videos inbetween to break the monotony. Add Labels and social bookmarks to all posts.

 

Enjoy!

Upgrade Classic Template without the "UPGRADE YOUR TEMPLATE" button.

Authentic Blogger Statement :

"I would like to change my 'Template' to 'Layout' but on the tab 'Customize Design' I don't even see the button of 'Upgrade', what should I do? "

Recently have seen many such appeals in the Blogger Help Group so I decided to investigate. Apparently the Blogger Team is working on a fix. Till then you can try out what I discovered..............


Blogger blogs have either Classic Templates or Layouts with widgets/gadgets. Classic templates are retained by those who wish to have the Ye Olde Blogger look. Layouts are preferred by those who do not want to be bothered too much with code and want a click and drag graphical user interface.


Those who wish to switch between Template and Layout could do easily using the UPGRADE YOUR TEMPLATE button (See picture below)



Many bloggers have reported the abscence of this button and hence the inability to upgrade their blogs to layout templates.

THE FIX

1. First Backup your blog to be on the safe side. This can be done using the export-backup function or the old backup method.

2. Backup blog Template using select-all-copy-paste from your Template Code box (Template---->Edit Html tab) to a Notepad file and save it on your disk.

3. Find your BlogID Number : This is essential as it will be used in the next step. To find it login at Blogger.com and click New Post button on Dashboard under the title of the blog you want to upgrade to Layouts. The Create Post page will open with a blank Post Editor. Copy the content of the address bar. It will look something like this :

http://www.blogger.com/post-create.g?blogID=BIG_NUMBER

Copy the BIG_NUMBER at the end of the address/URL.

4. Login at Blogger.com if you are not already logged in and open a new tab in your browser. Copy the URL below and paste in the address bar :

http://www.blogger.com/customize-template-choose.g?blogID=BIG_NUMBER&templateName=Minima

Replace BIG_NUMBER with your BlogID Number you copied in Step 3 above. Hit Enter key on keyboard.

If you have followed all steps correctly the Select New Template tab will open. Select your template and click the "Save Template" button.





NOTE : This is not same as picking another Classic template for your blog. The URL for that is :

http://www.blogger.com/template-choose.g?blogID=BIG_NUMBER

The URL for picking a new Layout is :

http://www.blogger.com/choosetemplate?blogID=BIG_NUMBER


Enjoy!

The Minimalist Minima Photoblog Template.

The Minima Template or Layout is used whenever you want to customize your blog any which way you want. There are no graphics used in the template as are used in the Rounders template. The Rounders and other templates with graphics are more difficult to customize as the images have to be resized to the new dimension.


Here I have attempted to simplify the Minima template further by making it a single-column template. This will enable bloggers to upload large photos or wide videos in their blog without worrying about the sidebar falling down!




This template is useful to bloggers who wish to show off their content without any distracting sidebars. The first step was to increase the width of the template :


This was done by simply getting rid of the sidebar code in the Template Code box :

  <div id='sidebar-wrapper'>
        <b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
</b:section>
      </div>

Then I increased the width of the main-wrapper in this code in the Template Code box :

#main-wrapper {
width: 660px;
....
}

This is the column containing the posts. If you want you can increase the width further depending on your monitor resolution. (Start button on Windows Taskbar---->Control Panel------>Display Properties----->Settings tab----->Lower left Screen Resolution in pixels).


Since the outer-wrapper contains the main-wrapper you have to increase width of former by same amount :

#outer-wrapper {
width: 660px;
...
}



The next step was to put in widgets in the footer. I have made three columns in the footer and you can add your widgets there. See picture below :





To outline the main column I have used a yellow color. If you wish to change the color you can change it in this code :

#main-wrapper {
width: 660px;
......
background:#ffff00 !important;
}

Change 'ffff00' to the hex number of the color you want and save template.


You can download the template here. Right click the link and choose "Save Link as" and save the XML template file to your desktop. Then upload template to blog.

This is a Layout template and cannot be used if you have a Classic template blog unless you upgrade blog to Layouts.

Making the COMMENTS Link more User Friendly.

The "0 comments" link at the bottom of the blog posts can hardly be called intuitive. Viewers fail to understand it's significance. That is why on this blog I have customized it to make it more viewer friendly.


If there are no comments on the post this is what appears "Be the first to leave a comment!". If only one visitor commented on the post viewers see "1 VIEWER CLICKED HERE TO COMMENT ON THIS POST. ADD YOUR COMMENT." If more than one visitor left a comment than you see "n VIEWERS CLICKED HERE TO COMMENT ON THIS POST. ADD YOUR COMMENT." where 'n' is the number of comments left.


This can be done by customizing the comments code.............

ENABLE COMMENTS

The first step is to enable comments in your Settings. There are three places where comments have to be enabled. Login at Blogger.com and click on Settings link on Dashboard. Follow all steps outlined in Tips on Blogger Comments to enable your comments.



This will make the comments show up on the Post Pages. On the Main Page comments are not shown since it would make the Main Page slower to load if there are many comments. If after enabling all comment settings they are still not seen then possibly your template code has been corrupted. To reset it first backup your widgets data and customization. Then login at Blogger.com and click Layout link on Dashboard. Click Edit Html subtab of Layouts tab. Scroll down to bottom of Template Code box and click on the "Revert Widget Templates to Default" link. This will lose any customization in widget templates which you can restore from the backup you had made first.

MODIFYING THE CODE

To modify the comments link code login at Blogger.com and click Layouts link on Dashboard. Click the Edit Html subtab of Layout tab. Click the 'Expand Widget Templates' checkbox on top right of the Template Code box. Wait for the page to refresh and scroll down to locate this code in the Blog Posts widget :

<span class='post-comment-link'>
        <b:if cond='data:blog.pageType != "item"'>
  <b:if cond='data:post.allowComments'>
   <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if 
cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> 
<data:top.commentLabelPlural/></b:if></a>
          </b:if>
        </b:if>
      </span>

Copy and paste the code below instead of the above code :

<p style='font-size:90%'>What have you to say?</p>
<span class='post-comment-link'>
   <b:if cond='data:post.allowComments'>
 <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if 
cond='data:post.numComments == 0'>
    <p style='font-size:90%'>Be the first to leave a comment!</p> 
 <b:else/> 
<b:if cond='data:post.numComments == 1'>
<p style='font-size:90%'>1 VIEWER CLICKED HERE TO COMMENT ON THIS POST. ADD YOUR COMMENT.</p>
<b:else/>
<p style='font-size:90%'><data:post.numComments/> VIEWERS CLICKED HERE TO COMMENT ON THIS POST. ADD YOUR COMMENT.</p>
</b:if>
</b:if></a>
          </b:if>
    </span>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<p style='font-size:90%'>Who has talked about this post?</p>
</b:if>

Preview and save the template. To increase the size of the letters increase '90%' in the code above.

You can see the modified comments link in action in this blog.

Enjoy!

Change Post Formatting According to Author.

If you have a Team Blog made up of two authors you can change the formatting of the posts written by one author to differentiate them from the other author's posts. In a Team Blog the About Me Profile widget is replaced by a Contributors List widget. This lists the name of the authors linked to their profiles.



Note down the names since we will use one of them in implementing this hack...........

Step 1. DEFINE THE STYLE

The style of the text and the background color are defined in the CSS Part of the Template. So we will paste the following code in the Template (You can add more style parameters if you want to) :


#author1 p{
margin:.25em 0 0;
color:#CC3300;
text-decoration:bold;
background:#aad4ff;
}


Login at Blogger.com and click Layout link on Dashboard. On Page Elements tab click Edit Html subtab of Layout tab. In Edit Html tab click Download Full Template link to backup your Template to PC. Copy and Paste the code given above immediately above ]]></b:skin> tag in the Template Code box. Save Template.

Step 2. IMPLEMENT THE STYLE

First step here is to expand the Widgets Template. To do this click the Expand Widgets Template Checkbox on top right of the Template Code box. Scroll down in Template Code box to this code in the Blog Posts expanded widget code :

<div class='post-header-line-1'/>
<div class='post-body entry-content'>
<div class='post-body'>
<p><data:post.body/></p>


CHANGE ABOVE CODE TO :


<div class='post-header-line-1'/>
<div class='post-body entry-content'>
<b:if cond='data:post.author == "vin"'>
<div id='author1'>
<p><data:post.body/></p>
</div>
<b:else/>
<p><data:post.body/></p>
</b:if>


Instead of 'vin' put in the profile name of an author of the blog EXACTLY AS IT APPEARS ON THE CONTRIBUTOR's LIST WIDGET ON THE BLOG.



Save Template. Clear Cache and View Blog.

Three Column Sand Dollar Template for Bloggers.

A reader wanted to modify the Sand Dollar Template to show three columns. This is a Fluid width template which resizes the blog according to the monitor resolution of the viewer's machine. It has two columns. The sidebar is at the left and occupies 31% of the screen width. The Main or Posts column is to the right and is sized at 66%.


View After Modification. Click on Picture to enlarge it.

Since a Fluid or Stretch Template occupies the full width of a computer screen we need not increase the width parameters in the template..........


Instead decrease the size percentages of the post column to accomodate the new sidebar. This is the opposite of the method we used in Three Column Template in Three Steps. There we had to increase the width of the outer-wrapper to add a third column.

1. FIRST STEP

First Backup the Template. Then login at Blogger.com and click Layout link on Dashboard. On Page Elements tab click Edit Html subtab of Layout tab. In Template Code box scroll down to this code :

@media all {
div#main {
float:$endSide;
width:66%;
padding-top:30px;
padding-$endSide:0;
padding-bottom:10px;
padding-$startSide:1em;
border-$startSide:dotted 1px $bordercolor;
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 */
}


Change the width line from 66% to 35%. This is because we will make the second sidebar of the same width as first sidebar (31%). Save Template. Next this Posts column is at the right ($endside). We want this to be in middle so we change the float line to ($startside). After modification the code will look like this :

@media all {
div#main {
float:$startSide;
width:35%;
padding-top:30px;
padding-$endSide:0;
padding-bottom:10px;
padding-$startSide:1em;
border-$startSide:dotted 1px $bordercolor;
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 */
}

2. DEFINE NEW SIDEBAR

To define a new sidebar copy the following code and paste it immediately after the code for the Main Column shown above in the first step :

div#sidebar2 {
margin-top:20px;
margin-$endSide:0px;
margin-bottom:0px;
margin-$startSide:0;
padding:0px;
text-align:$startSide;
float: $endSide;
width: 31%;
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 */
}

We have floated this new sidebar to the right (float: $endSide;). It has same width as the first sidebar (31%). Also it mirrors the first sidebar in other parameters.

3. MODIFYING THE BODY CODE

Scroll down to see the code after the <body> tag. Use Edit--->Cut (Ctrl+X) to cut out the code for the Posts Column (Main) :

 <div id='main-wrapper'>
        <b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
      </div>

and paste it after the first sidebar code block :

 <div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
</b:section>
      </div>

Save Template.

4. THE NEW SIDEBAR CODE

Lastly to show the new sidebar column on the blog copy and paste this code after the new position of the (Main) Post Columns code :

<div id='sidebar-wrapper'>
<b:section class='sidebar2' id='sidebar2' preferred='yes'>
</b:section>
      </div>

Save Template. Note the 'sidebar2' in the above code. Perform this step only AFTER completing the THIRD STEP.


Enjoy!

Equal Height Columns Template for Blogger.

Blogger has many templates which you can pick by going to Pick New Template under the Layout tab. At present all templates are two column templates. These have a main posts column and a sidebar at the right or left for your Profile and Archives and other widgets you wish to add.


They can be easily modified to add a third column in three steps. These column are however of unequal height. The height of the column depends on it's content. If you add more content to the sidebar it increases in length and then you have to add more posts so that the Main Column has a matching height. Other templates are available with faux columns to give an impression of equal height.


Here is a template with equal height columns : See picture below :



The columns do not end at their content...........


You can download template here. To download the template right click on the above link and choose 'Save Target As' in Internet Explorer and 'Save Link As' in Firefox browsers. Save the XML template file to your PC.


To load the template :

1. Login at Blogger.com.

2. Click Layout link on Dashboard.

3. Page Elements tab will open.

4. Click Edit Html subtab of Layout tab.

5. Edit HTml tab will open.

6. First Backup your Template. Then backup you widgets. Then click Browse button.

7. Explorer window will open. Navigate to where you hae saved the XML template file and select it and click Open.

8. Click Upload button.

9. You may get warning that "Widgets are about to be deleted!". No need to worry since you have already backed them up in Step 6 above.

10. After new template has loaded sucessfully you can readd your widgets. You can also try the alternative method of loading a template without deleting widgets.

Three Column Template in Three Steps.

Three column templates are popular because they make more use of the screen real estate. Adding another column to your blog enables you to add more widgets or advertisements to your blog.


In this post I will show you how to transform your blog into a three column blog in three simple steps. Have a look at the before and after screenshots below :

	--->
BEFORE		AFTER

To demonstrate this I have taken the Minima Dark Template of Blogger. I have shown the columns using colors to demonstrate them better...........

FIRST : INCREASE BLOG WIDTH

The first step is to increase the width of the blog. To do this follow these steps :


1. Login at Blogger.com.


2. The Blogger Dashboard page opens on successful login.


3. Click the Layout link under your blog title.


4. The Page Elements subtab of Layout tab will open.


5. Click the Edit Html subtab of Layout tab.


6. The Template Code box page will open. Scroll down in the box to this code :

#outer-wrapper {
width: 660px;
margin:0 auto;
background:#ff0000;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

Increase '660px' in the width line in the above code to '880px' and save template. We have increased the width of the outer-wrapper so that it will accommodate a third column. Since we want the second sidebar to have the same dimensions we have increased the width by the same width - 220px - as that of the original sidebar. This is how it looks now :


The outer-wrapper is the red column containing the main posts column (blue) and the yellow original sidebar. Space has now been created to add a third column.

SECOND : ADD THE CSS CODE.

Now that we have created space for the third column we need to define it in the template. This is done by adding code to the CSS part of the template. We want the new column to be exactly like the original sidebar on the right. We want it to be on the left og the posts column. So we add this code between <b:skin><![CDATA[ and ]]></b:skin> tags in the template :

#sidebar-wrapperL {
width: 220px;
float: $startSide;
background:#ffff00;
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 */
}

This is the same code as the original sidebar. To differentiate it we have added a 'L' after 'sidebar-wrapper'. It has the same width. Since we want it to be on the left of the posts column we have changed the float property to be '$startside'.


Since Blogger has enabled support for bidirectional languages the float:left and float:right have been replaced by $startSide and $endSide respectively.


Save template.

THIRD : ADD CODE IN THE PAGE BODY.

Lastly we need to add the code for the new sidebar in the <body> part of the template. Since it has to be the left of the posts column this code will come before it. Scroll down and paste this code :

<div id='sidebar-wrapperL'>
<b:section class='sidebar' id='sidebar2' preferred='yes'>
<b:widget id='HTML6' locked='false' title='' type='HTML'/>
<b:widget id='HTML7' locked='false' title='' type='HTML'/>
</b:section>
</div>

immediately above this line in the template :

<div id='main-wrapper'>

I have added two Html widgets to the code as examples. Preview and save template. You can change the background color of the columns if you want to. This is the final result :




Enjoy!!

You can also make a Three column Classic Template.

Fix the Page Elements Layout Editor No Scrollbar Problem.

The Page Elements subtab of Layout (previously - Template) tab is used to Add and Arrange Page Elements. Since 12 Feb 2008 there have been no scrollbars in it. This causes the Page Elements on wider templates to disappear below the right edge and bloggers cannot access the Edit button on them. See picture below :



This can be fixed by modifying the CSS part of the template for the wireframe layout editor..............


Follow these steps to modify the code :


1. Login at Blogger.com.


2. Blogger Dashboard page opens for successful login.


3. Click 'Layout' link under your blog title.


4 The Page Elements subtab of Layout tab will open.


5. Click 'Edit Html' subtab of Layout tab.


6. The Edit Html tab will open with the Template Code box.


7. Scroll down in the Template code box till this code : ]]></b:skin>


8. Copy this code :

body#layout #outer-wrapper {
width:760px;
margin-$startSide: 0px;
margin-$endSide: 0px;
}


9. Paste it in the Template Code box immediately above the ]]></b:skin> tag.


10. Save Template.


11. Switch to Page Elements subtab of Layout tab. You should now be able to see all your Page Elements :





Happy Blogging!

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!!

Make Three Column Classic Template.

Bloggers who are on ftp are forced to use the Classic Template as Blogger does not provide Layout Templates to blogs outside Google servers. A reader wanted to add a third column to his blog hosted on ftp and hence this post. Readers with Layout Templates can refer to How to Add Third Column To Blog.


In this example I was able to transform the two column Minima Classic Template into a Three Column template in only three steps. See picture below :


Click on Image to enlarge it.................

INCREASE BLOG WIDTH

The first step is to increase the width of the blog so that it can accomodate the space for an extra column. To do this login at Blogger.com and click Template link on the Dashboard. The Edit Html subtab of Template tab will open.



BACKUP TEMPLATE FIRST :First copy all the code in the Template Code box and paste into a Notepad file. Save that file as ClassicTemplateBackup.txt.


You can see the various columns in your blog by giving them temporary borders. In the Classic Minima template this is what they look like :


Click on Picture to enlarge it.



To alter the code in the Template Code box scroll down to this code :


@media all {
#content {
width:660px;
margin:0 auto;
padding:0;
text-align:left;
}
.......

CHANGE ABOVE CODE TO :

@media all {
#content {
width:880px;
margin:0 auto;
padding:0;
text-align:left;
}
.......

Notice that the width has been increased to 880px. Now I can introduce a new column sized upto 220px. This is because the 'content' container contains the posts 'main' column and the sidebar column. This is how it looks after increasing the width :

DEFINE THIRD COLUMN IN CSS

The next step is to define the size and name of your third column in the CSS part of your template. In your Template code box add this code :

#sidebarL {
width:220px;
float:left;
}

immediately after the code for the 'content' box altered in the first step above.

ADD THIRD COLUMN IN BODY

To add the third column in the body scroll down in the template till you come to this line :

<!-- End #main -->

Immediately after the above line paste the following code :

<!-- Begin #sidebarL -->
<div id="sidebarL">
<p>Spacefiller Nonsense Text to Outline New Column</p>
</div>
<!-- End #sidebarL -->

Preview and Save Template. Clear Cache and View Blog. This is how it will look like :




If you want you can increase the width of the header by increasing the width in this code :

#header {
width:660px;
margin:0 auto 10px;
border:1px solid #ccc;
background:#ff0000;
}

Use Preview to see what it looks like before saving.

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.

The Rounders Three Column Template Mod.

Many bloggers have been hampered by the absence of three column templates in the Official Blogger stables. They feel that the two column templates fail to exploit the wide screen resolutions on today's monitors. One solution is to increase the width of the blog. However, merely increasing the width does not provide space for additional widgets or advertisements which can be done by using a third column.


Increasing the width of the template also has it's limitations if your blog has an audience using lower resolution monitors. A solution to this is to use a Fluid width template which resizes to match any standard monitor.


The Rounders Template has graphics making up its' rounded corners. Hence adding an additional column means that you have to download, resize these graphics and upload them back. I have been able to do this as you can see below :




You can see the demo here. I have kept the first column as the posts column as it is important in search engine optimization. Here is the method for those of you wishing to customize it more for your own blog........

THE MAKING OF THE THREE COLUMN ROUNDERS TEMPLATE

WIDEN THE TEMPLATE

The first step is to increase the width of the template. To do this first go to Template---->Pick New Template----->Check the radio button for the 'Rounders 3' Template and click Save. Remember to backup your first template before this.


Then go to Edit Html subtab of Template tab and scroll down to this code :

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 680px;
.......
}

Increase the width to whatever you want keeping in mind the monitor resolution of your viewers which you can get from Google Analytics.


Then scroll down to this code :

#main-wrap1 {
width:450px;
......
}

#sidebar-wrap {
width:200px;
float:right;
.......
}

Change the widths of the above two columns to your specifications. Leave space for your third column. Change the float:right property to float:left for the sidebar-wrapper.

DEFINING THIRD COLUMN

To define a third column add this oode just below the above code :

#rightsidebar-wrap {
width:200px;
float:left;
margin:15px 0 0;
font-size:97%;
line-height:1.5em;
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 */
}

This column width should be such as to occupy the remaining space.

CREATING THIRD COLUMN

Now that the third column has been defined above you have to add code in the <body> of the page to create it. For this scroll down and paste this code :

<div id='rightsidebar-wrap'>

<div id='sidebartop-wrap'><div id='sidebartop-wrap2'>
<b:section class='sidebar' id='sidebartop1'>
<b:widget id='HTML1' locked='false' title='Rounders Mod by :' type='HTML'/>
<b:widget id='Text1' locked='false' title='ABOUT THIS TEMPLATE' type='Text'/>
</b:section>
</div></div>

<div id='sidebarbottom-wrap1'><div id='sidebarbottom-wrap2'>
<b:section class='sidebar' id='sidebar3' preferred='yes'>
<b:widget id='Label1' locked='false' title='Labels' type='Label'/>
<b:widget id='Poll1' locked='false' title='Template Features Wishlist :' type='Poll'/>
<b:widget id='BloggerButton1' locked='false' title='' type='BloggerButton'/>
</b:section>
</div></div>

</div>

Save Template.

RESIZING THE GRAPHIC ROUNDED CORNERS

You have to download and resize the rounded corner images to match the widths you have specified for the columns.


If you want to maintain the same width as in my demo blog you can download the template file and the graphics here.


After resizing the images upload the images to Photobucket.com or to your account at Googlepages and paste their links in the CSS code to form the background images of the blog column corners.


Enjoy!

Cool Blue Web 2.0 Fluid Template for Blogger.

Here is the Cool Blue Web 2.0 Template for Blogger. The main features of this are :



1. Widget Ready.



2. Layout Template.



3. Rounded Corners for columns Header and Footer.



4. Fluid Width for any resolution.



5. Graphics provided in WinZip file. Create an account at Googlepages or Photobucket. Upload images there and copy their link and paste it instead of these links in the template :

div.rounded {
background: #c3d9ff url(http://ezeeblog.googlepages.com/bl_24_c3d9ff_356aa0.gif) no-repeat bottom left;


div.rounded * {
background: #c3d9ff url(http://ezeeblog.googlepages.com/br_24_c3d9ff_356aa0.gif) no-repeat bottom right;


div.rounded h1, div.rounded h4 {
color: #356aa0;
background: #c3d9ff url(http://ezeeblog.googlepages.com/tr_24_c3d9ff_356aa0.gif) no-repeat top right !important;
display: list-item;
list-style-image: url(http://ezeeblog.googlepages.com/tlc_24_c3d9ff_356aa0.gif) !important;


You can do this by clicking on Layout on Blogger Dashboard after login at Blogger.com. Then click Edit Html subtab of Template tab to make above changes in template box and save.


REMEMBER to Backup Previous Template to PC and also Backup Widget Template data before changing templates.



6. Web 2.0 colors.



7. Three Columns with posts column first for better SEO.





Checkout the Demo Blog.



Download template Link : Cool Blue Web 2.0 Template. Do keep the credits intact.

Fluid Width Three Column Blog Template.

Many bloggers have been asking for a three column template. So I brushed up on my XML and XHTML and made a fluid width three column template.



A fluid width template is one which fits all screen resolutions without breaking. The columns expand and contract as the window is resized. You can test it out by going to The Fluid Width Three Column Blog and then type this in address bar of the browser without the quotes :

"javascript:top.resizeTo(800,600)"

and press ENTER on keyboard. The window will resize to 800 x 600 resolution without having a horizontal scrollbar at the bottom..........


You can see the full view of the blog below :


The widgets seen above are not loaded with the template. You have to add your own widgets after uploading this template. Remember to backup your widgets first before changing templates. After resizing it looks like this :


Download Link : Fluid Width Three Column Template. As you can see there is no horizontal scroll.


Right Click the above link and choose 'Save link as' and save it on your PC. Upload to your blog as shown in How to Change Template.



I have also included a Navigation Bar at the top where you can add links to your important posts. To do this login at Blogger.com and click on Layout on Dashboard. Then click Edit Html subtab of Template tab and scroll down to this code in the template :

<div id='Nav'> <a href='BLOG_URL'>Home</a> | <a href='LINK TO SUBSCRIBE POST'>Subscribe</a> | <a href='LINK LABEL 2'>Label 2</a> | <a href='LINK LABEL 3'>Label 3</a> | <a href='LINK LABEL 4'>Label 4</a> | <a href='LINK LABEL 5'>Label 5</a> | <a href='LINK LABEL 6'>Label 6</a> </div>

Change the code in red to the respective links to your posts. You will have to create and publish these posts first and then copy their links and paste them in the above code.



At the bottom of the template are links to 'About Us', 'Contact', Sitemap and Privacy Policy which you can modify in the template by scrolling further down to this code :

<div id='siteInfo'> <a href='LINK TO ABOUT US POST'>About Us</a> | <a href='LINK TO SITEMAP POST'>Site Map</a> | <a href='LINK TO PRIVACY POLICY POST'>Privacy Policy</a> | <a href='LINK TO CONTACT US POST'>Contact Us</a> | <a href='http://betabloggerfordummies.blogspot.com'>Blog Design</a> | 2007 Company Name </div>
<br/></div>

Change the parts in red in the same way as before. I know you will be gracious enough to leave the credit intact.



Another version of this template for those who do not want the stretch version looks like this :



The download link is Fluid Width Central template.

Search Engine Optimized Advantages

This template is optimized for the search engines as :

1. The posts column comes first and hence the search spiders first feed on the content.

2. NO JAVASCRIPT in the template making all the links in text and indexed by the search engines.

3. Follow further tips for SEO for blogs to further customize this template.

Adsense, Amazon Within Blog Posts.

Ever since the debut of the New version of Blogger with the Layout Template, bloggers have been struggling to find ways of inserting Google Adsense and or Amazon Advertisements within blog posts.



The difficulty arose from the fact that most of the advertisements use Javascript code which needs to be pasted within the Blog Posts. In the New Blogger Layouts template Html/Javascript Page Elements were introduced so that Ads. could be put in them. These could then be added to the Header, Footer, Sidebar and the Main Posts column. However, the Blog Posts Page Element being a widget in it's own right does not accept another Html widget inside itself. Check out the Amazon Advertisement to the right --->. I have given it a title : "Amazon Ads." but that can be omitted to make it blend more with your post's content. You can see that it is not a picture/image by hovering your mouse cursor over the links. It will change to a hand icon and the amazon link to the product will be displayed in the status bar of your browser at the bottom.



Thus bloggers were able to add Google Adsense Ads. all round the blog posts and now in between ( Inline Adsense )the posts also. Some hacks were developed to incorporate Adsense within the blog post but most involved modifying the advertisement code which went against the Google Adsense TOS.



Here is a method to incorporate any advertisement within your blog post so as to fully blend in with your content without modifying the code..........

GETTING THE CODE

The first step is to get the code from the respective sites. For this login to your Google Adsense or Amazon account and navigate to the code generating section. Customize your advertisement to the size ( It should fit the width of your posts column. )and color you want and copy down the code provided. You can select the channels you want in Adsense and the Advanced Settings tab for Amazon Omakase Ads. allows you to set upto five keywords or phrases to target your Ads.

MAKE A GOOGLE GADGET

Paste the code obtained in a new Google Gadget. Follow the same steps as shown in "Increase Traffic | Create a Google Gadget". Load the sample "Hello World" Google Gadget and replace the "Hello World" with the code obtained from Adsense/Amazon. See picture below :




Delete "Hello World" and paste the code instead. Click on picture to enlarge it.
Save the Google Gadget and publish it to get the code. Copy the code for the Google Gadget which you have created.

PUT GOOGLE GADGET IN BLOG POSTS

Go to Blogger Home and login to the Blogger Dashboard. Click on 'Posts' link and it will open your list of Blog Posts. Click 'Edit' link next to the post you wish to insert the advertisement in. The post will open in Post Editor. Click on Edit Html tab in the top frame of Post Editor. Paste the Google Gadget code where you want it. If you wish to float it left use the following code :

<span style="float:left;">
GOOGLE GADGET CODE
</span>

To put it to the right of your text use 'right' instead of 'left'. Replace the CAPS with actual code for the Google Gadget. The gadget will not be seen on Preview. Publish the post and click on 'View Blog' to see your Advertisement. Check out my Google Gadget with Amazon Advertisements in this post. To blend it within the post content first make sure that you choose "No borders" while customizing the code for the advertisement in Step 1 above. Then when you generate the code for the Google Gadget you will get something like this :

<script src="http://gmodules.com/ig/ifr?url=http://hosting.gmodules.com/ig/gadgets/file/115706042431009629871/AmazonAd.xml&synd=open&amp;amp;amp;w=305&h=255&title=Amazon+Ads.&border=%23ffffff%7C1px%2C3px+solid+%23999999&output=js"></script>

Change the numbers for the borders to 0 px in the code above to delete the border for the gadget. This will make your advertisement blend in effectively within your posts.

ADVANTAGES OF THIS METHOD

1. The advertisement code need not be modified.

2. Advertisements blend in with the posts.

3. You can target each advertisement to the specific content of that post.

4. You can put Google Analytics within the Google Gadget to track it's statistics.

Interchanging Templates and Layouts in Blogger.

The advent of the new version of Blogger introduced the term Layout instead of Template for the new blogs. If you had started a blog in the old Blogger then you had a template. The new version of Blogger migrated your blog while retaining the old template. You then had the option to upgrade to the new layouts or keep to the old template.


The new Layouts are responsible for the new features in Blogger and since they require dynamic publishing cannot be used on ftp blogs. Old timers prefer to stay with what they know best and can edit easily like the old HTML templates. Newbies on the other hand love the Labels and new Archives features of the Layouts which enable them to categorize posts easily. However those wishing to interchange easily between Templates and Layouts are stumped. Here are some diagrams to help these Blogger users..............



If you start a new blog now you automatically get a new Layout for your blog. Layout is a term used to refer to the Graphical User Interface Blogger has introduced to enable bloggers to edit the template using click and drag rather than making changes to the XHTML code of the template. Here is a Web definition for "Layouts" :

Put visual elements into a pleasing and readable arrangement.

To access this login to your Blogger dashboard and click on Layout link next to your blog name. This will open the Page Elements subtab of Template tab where you can see all the sections of your blog and can drag and drop widgets to wherever you want. You can also add other widgets to any section of your blog from this page.


However there are some who wish to use Classic Blogger (HTML) templates. These people have to first revert to classic template in their blog and then load the classic template they wish to use. To do this login to Dashboard and click on Layout. Then click on Edit Html subtab of Template tab. Scroll down to end of this page below the template box. There you will see a "Revert to Classic Template" link. Click that link and your blog will revert to classic template. See picture below
:

Follow the instruction on the left to revert to classic template. If you wish you can download this diagram and use it as a flash card to remind you of the method. Just right click the picture and choose 'Save Image as' to save it to your disk.



If you attempt to paste a HTML template into the new Blogger layout you will get an error message :

Your template could not be parsed as it is not well-formed. Please
make sure all XML elements are closed properly.

Error messages in Blogger Templates explains the error messages and their correction.

UPGRADE TO LAYOUTS

Those people who wish to take advantage of new Blogger features like Labels should upgrade from classic template. To do this login to Dashboard and click on Template for your blog. Then click on Customize Design subtab. This page contains the Upgrade link to upgrade blog to Layouts. See picture below :


Follow the route on the right to upgrade to layout. You can steal the above graphic to keep as a reference.



Remember the two : HTML templates and XHTML/XML layouts are incompatible with each other and do not try and paste one into another.

Template or Layout Which is Better?

There are many HTML templates for Classic Blogger on the Internet which the newbie blogger comes across while searching for new templates.


Unfortunately these are incompatible with the new Blogger layout templates and will give error when pasted in the template box.


This causes much confusion even for experienced bloggers who are used to switching their blog templates in the blink of an eye. Hence here are some tips and tricks to know the difference between templates and layouts and the pros and cons of choosing either..........

The new Blogger debuted with the layout templates which were designed to introduce dynamic publishing and Labels. These layout templates are in XHTML/XML which is different and less forgiving then HTML. If you have started blogging in the old blogger you are used to Classic templates in HTML. After migrating to the New Blogger you had the choice to upgrade to the new layouts template.

ADVANTAGES OF LAYOUTS :

1. No need for republishing. Everything published immediately.

2. Labels can be used to categorize your posts according to keywords.

3. Increased traffic due to use of Labels.

4. One click access to editing widgets.

5. WYSIWYG (GUI) layout interface to arrange/edit your widgets on the PAGE ELEMENTS subtab of Template tab.

6. One click access to Layout/Page element tab from Dashboard.

7. Navigation Links at the bottom of each post.

8. Subscribe to Posts Atom (feeds) link at the bottom.

9. Way of the future as the Web gravitates to XHTML/XML and widgets.

DISADVANTAGES OF LAYOUTS :

1. Learning Curve to master XHTML/XML.

2. XHTML/XML more strict and spews out more errors than HTML.

3. Data separate from template code.

4. Widgets data not transferred along with widgets code when loading a new layout. After loading a new layout you have to enter widgets content separately.

5. At present not many XHTML/XML layouts are available free but many developers are coming out with new designs. Till then hack into your own layout to customize it.

6. No Previous Posts section. All posts in the Archives widget. Previous Posts section in sidebar can be added as a hack.

7. Many Javascript codes do not work here unless they are XHTML valid.

8. The expanded widget templates code is voluminous and difficult to navigate. This makes it more difficult to add a hack.

9. Difficult to add Adsense code within a post.

10. Many do not like/understand the Subscribe to Posts Atom link at the bottom.

11. Customizing each widget is more difficult. Though there is a Fonts and Colors tab it does not allow you to change colors of everything.

Only those variables described in the 'Variable Declarations' section at the top of the template can be changed. You can manually add more customization but that requires more knowledge of CSS and variables.

12. Cannot be edited in WYSIWYG web editors as it is in XHTML/XML.

13. Cannot be used on ftp blogs as they need to be hosted on Blogger servers.

ADVANTAGES OF HTML TEMPLATES :

1. Easier to learn.

2. Easier to change with less errors.

3. Data and template code loads in combination on loading a new template.

4. No need to backup widgets data separately.

5. Many ready made templates available on the Internet.

6. Previous Posts section present in the sidebar.

7. Javascript codes for adding the blings to your blog still work.

8. Adding a template hack is simpler.

9. Easier to add Adsense code within a post.

10. Customizing colors more simpler.

11. Can be edited in WYSIWYG web editors even by those having rudimentary HTML knowhow.

DISADVANTAGES OF HTML TEMPLATES :

1. Label links need to be added manually to sidebar like other links.

2. Labels below posts are present but cannot be customized.

3. Likely to be phased out in the future but not very soon.

4. Navigation links to Previous Post, Next post and Home have to be added via a hack.

5. Feed links have to be configured manually.

6. Cannot be ported to a Layout without a big headache. You have to load a similar looking layout and then hack it to resemble your old template.

HOW TO IDENTIFY YOUR TEMPLATE/LAYOUT?

If you create a new blog now it will have the layout template as default. You can know it is the Layout template when you load your blog in a browser and it shows :

1. An Archive widget in the sidebar with drop down arrows.

2. No Previous Posts section in sidebar.

3. Navigation links below the post on post pages.

4. Subscribe to Posts Atom link below the posts.

5. If you are logged in to Blogger you will see your email address in the Navbar at the top and the spanner-screwdriver quickedit icons at the corner of widgets. You will not see the address and editing icons when viewing other people's blogs.

6. When you go to Template----->Edit Html and look at the template code you will see tag at the top in a Layout template and <style type="text/css"> tag in a Classic HTML template. If you cannot see these tags just do a Select All in the Template box and then copy and paste the code in a Notepad file and use Ctrl+F to search for 'skin' or 'text/css'.


7. To check a template in another blog go to View------>Page Source when you are viewing the blog and then if you see the skin tag <style id='page-skin-1' type='text/css'>; then it is a Layout template. If you see <style type="text/css"> then it is a Classic HTML template.

8. After login to Blogger Dashboard if there is a 'Template' link next to your blog title then the blog has a Classic HTML template. If there is a 'Layout' link then it has a Layout template.

9. XHTML/XML layout template files usually have the .xml file extension. When you download your layout template using the Download Full Template link on the Template------>Edit Html page it is saved as a XML file on your PC. Though they can also be in a text file.

ERROR ON PASTING WRONG TEMPLATE :

If you paste a Classic HTML template into the template box of a blog with Layouts you will get this type of error :


We were unable to preview your template
Please correct the error below, and submit your template again.
Your template could not be parsed as it is not well-formed. Please
make sure all XML elements are closed properly.

See Error Messages in Blogger Templates for more error messages, what they mean and how they can be corrected.


Now that we have seen the pros and cons of each layout or template which do you like the best? Just take the poll at the bottom of my right sidebar. Your vote is important! It may just help to increase the life of the Classic template!

Rounded Corner Headers for Blogger.

Here is the new header made from Cornershop utilizing rounded corner graphics CSS and HTML. See picture below
:

You can make your own corners complete with your choice of colors for the background and size. This will give a distinctive header to your blog which will stay in the visitor's memory and hence increase brand recall.............

To design your own header visit the Cornershop site and enter in your choices for Box background, Page Background, Corner Radius and Transparency. You can choose the hexadecimal number for your colors at this online color picker site. After entering your values click the Create Graphics button and four corner graphics are generated for you.



Right click each graphic and choose Save Image as and save them to a location on your harddisk. You cannot use these until you upload them to a freehosting service. For this you can use Googlepages or any other. Try not to upload them to Blogger posts as the URL/links can be difficult to extract with more chances of errors. After uploading to the freehosting copy down their links/URLs.



Then copy the CSS code generated at the Cornershop site. Login to Blogger Dashboard and click onLayout. Then click on Edit Html subtab of Template tab. Backup Template first. Scroll down and paste the code in the header section of the CSS template just below this line :

/* Header
-----------------------------------------------
*/

The CSS code will look something like this:

.box {
background: #000000;
}
.boxtop {
background: url(ne2.gif) no-repeat top right;
}
.boxtop div {
height: 100px;
background: url(nw2.gif) no-repeat top left;
}
.boxbottom {
background: url(se2.gif) no-repeat bottom right;
}
.boxbottom div {
height: 100px;
background: url(sw2.gif) no-repeat bottom left;
}
.boxcontent {
padding: 0px 100px 0px 100px;
}

REPLACE THE PICTURE NAMES (nw2.gif, se2.gif etc..) with the URL/links of the same graphics you uploaded to your freehosting.




Then copy the HTML code from the Cornershop site. Scroll down in your template and paste this code :

<div class='box'>
<div class='boxtop'><div></div></div>
<div class='boxcontent'>

immediately after this line :

<div id='header-wrapper'>

Then scroll further down till the end of the header-wrapper code :

</div>
<div id='main-wrapper'>

Paste the code below immediately before the above two lines :

</div>
<div class='boxbottom'><div></div></div>
</div>

Save Template. Refresh Cache. View Blog. Enjoy!

PICTURE IN HEADER SERIES

Add Picture to Header.

How To Customize Header.

Fixed Headers in Blogger.

Clickable Headers in Blogger.

Header for Dots Template.

Many Headers - One Blog.

Flash in Header.

Animated Gif In Header.

3-D Banner In Header.

Adsense Link Unit In Header.

Remove Title in Header.

Picture In Header- Update.