Knowledge is good only if it is shared. As a new blogger, I had learned to change the Web template, and found out the tips, tricks, hacks, and tweaks of altering the Blogger template, customizing CSS, widgets, layout, blog design, inserting JavaScripts, HTML codes, Google AdSense, and other settings the hard way, through many trials and errors. For the purposes of this guide, I had started with the old Blogger “Minima” template. As I made the changes or learned something new, I had documented them. Before changing any template, please remember to save a copy of the current template. After editing the template, preview it, and save it when you are satisfied with the change. Hope this guide will help those who are finding the way around, just like me.

Search Tips for New Bloggers

We have extended our month-long vacation by a couple of days. We shall be posting articles the moment we return. We noticed that Google had updated the Page Ranks. New bloggers who have been waiting anxiously for this can check their blogs' Page Ranks. We have the PR checker link in our SEO Tools - Search Engine Optimization article.

The blog we created recently in Aug 2007, Blogger FAQ and Help, has also got its first Page Rank, a PR4. All our blogs are now ranked:-

Tips for New Bloggers - PR6
Business Fables and Management Lessons - PR4
Famous Motivational and Inspirational Quotes - PR4
Blogger FAQ and Help - PR4

Thanks to everyone for the support!

Jul 26, 2007

Digg This Story

Three Columns Rounders 4 Template

Here, we cover the steps taken to change a Blogger Rounders 4 template into a three column template. Unlike the other Rounders templates, Rounders 4 has an additional picture in the Header which should be enlarged to accommodate the new blog width. When you are at Template -> Edit HTML, look for “Blogger Template Style”. If the Name of your template is “Rounders 4”, follow this guide to customize your template and add a third column or new sidebar to your Rounders 4 template.

For other templates, please refer to our articles and guides on:-
1. Three Columns Denim Template;
2. Three Columns Dots Template;
3. Three Columns Minima Template;
4. Three Columns Rounders Template;
5. Three Columns Rounders 2 Template;
6. Three Columns Rounders 3 Template;
7. Three Columns Sand Dollar Template;
8. Three Columns Scribe Template;
9. Three Columns Thisaway Template (I);
10. Three Columns Thisaway Template (II).

Note: Some sites offer free three-column templates for download. If you are starting a new blog, you may look up these sites and use their templates. However, if you have an existing blog and merely want to expand the template to include another column, our guides would be helpful. What we do is to take the standard Blogger templates and show you how to add a new sidebar. This approach gives you total control over the changes, and if you have bookmarked this page, you can revisit it in future should you want to reverse the changes. It is also a safer method, since there could be a few out there who may introduce malicious scripts or blog virus into their customized templates without you knowing.


Other than the Header picture, if you right click on the Header to view the background image, you will see the corners_cap_top.gif or corners_cap_bot.gif which account for the rounded corners. These corners have a fixed width of 740px and are linked to your Blog via the blogblog.com server. Since we have to expand the width of the Blog to include a new sidebar, these images will be changed and linked through an image server. We have created these new rounded corner images for this article. The new three column Rounders 4 Template will look like this:-

Three Columns Rounders 4 Template

Before you begin to do anything, remember to backup your template. Go to Template -> Edit HTML. Click the “Download Full Template” link to save a copy of your template.



Rounders 4 Template

When you are logged in, go to Template -> Edit HTML and scroll to these lines:-


#outer-wrapper {
width:740px;
margin:0 auto;
text-align:left;
font: $bodyFont;
}
#main-wrap1 {
width:485px;
float:left;
background:$mainBgColor url("http://www.blogblog.com/rounders4/corners_main_bot.gif") no-repeat left bottom;
margin:15px 0 0;
padding:0 0 10px;
color:$mainTextColor;
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 */
}
#main-wrap2 {
float:left;
width:100%;
background:url("http://www.blogblog.com/rounders4/corners_main_top.gif") no-repeat left top;
padding:10px 0 0;
}
#main {
background:url("http://www.blogblog.com/rounders4/rails_main.gif") repeat-y;
padding:0;
}
#sidebar-wrap {
width:240px;
float:right;
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 */
}


The template defines 3 wrappers, namely:-

#outer-wrapper – referring to the entire blog
#main-wrap – referring to the main Blog Posts
#sidebar-wrap – referring to the right sidebar.

We shall include a left sidebar and name it newsidebar. The above code will therefore be changed to this (note the portions in red).


#outer-wrapper {
width:995px;
margin:0 auto;
text-align:left;
font: $bodyFont;
}
#main-wrap1 {
width:485px;
float:left;
background:$mainBgColor url("http://www.blogblog.com/rounders4/corners_main_bot.gif") no-repeat left bottom;
margin:15px 0 0 15px;
padding:0 0 10px;
color:$mainTextColor;
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 */
}
#main-wrap2 {
float:left;
width:100%;
background:url("http://www.blogblog.com/rounders4/corners_main_top.gif") no-repeat left top;
padding:10px 0 0;
}
#main {
background:url("http://www.blogblog.com/rounders4/rails_main.gif") repeat-y;
padding:0;
}
#sidebar-wrap {
width:240px;
float:right;
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 */
}
#newsidebar-wrap {
width:240px;
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 */
}
#newsidebar-wrap1 {
background:$bottomSidebarBgColor url("http://www.blogblog.com/rounders4/corners_side_top.gif") no-repeat left top;
margin:0 0 15px;
padding:10px 0 0;
color: $mainTextColor;
}

#newsidebar-wrap2 {
background:url("http://www.blogblog.com/rounders4/corners_side_bot.gif") no-repeat left bottom;
padding:10px 0px 8px;
}

#newsidebar {
background:url("http://www.blogblog.com/rounders4/rails_side.gif") repeat-y;
}

#newsidebar {
color: $bottomSidebarTextColor;
}

#newsidebar h2 {
color: $bottomSidebarTextColor;
border-bottom: 1px dotted $bottomSidebarTextColor;
margin-bottom: 0.5em;
}

#newsidebar a {
color: $bottomSidebarLinkColor;
}
#newsidebar a:hover,
#newsidebar a:visited {
color: $bottomSidebarVisitedLinkColor;
}


Let us now customize the Header and the Footer. As mentioned, we had created new images for the Header picture as well as the rounded corners of the Header and Footer based on this new width of 995px.

Look for this in the template:-

/* Blog Header

Amend the image locations from this:-


#header-wrapper {
background: #476 url("http://www.blogblog.com/rounders4/corners_cap_top.gif") no-repeat left top;


To this:-


#header-wrapper {
background: #476 url("http://www.blogpulp.com/imagehost/images/183638263.gif") no-repeat left top;


Also change this:-


#header-inner {
background:url("http://www.blogblog.com/rounders4/bg_hdr_bot.jpg") no-repeat left bottom;


To this:-


#header-inner {
background:url("http://www.blogpulp.com/imagehost/images/51814045.jpg") no-repeat left bottom;


Now look for the footer style definitions in your template:-

/* Footer

Change this code:-


#footer-wrap2 {
background: #476 url("http://www.blogblog.com/rounders4/corners_cap_top.gif") no-repeat left top;


To this:-


#footer-wrap2 {
background: #476 url("http://www.blogpulp.com/imagehost/images/183638263.gif") no-repeat left top;


And amend this:-


#footer {
background:url("http://www.blogblog.com/rounders4/corners_cap_bot.gif") no-repeat left bottom;


To this:-


#footer {
background:url("http://www.blogpulp.com/imagehost/images/563473306.gif") no-repeat left bottom;


We shall also change the layout editor to cater to the new sidebar. Scroll to where you see this:-

/** Page structure tweaks for layout editor wireframe */
body#layout #main-wrap1,
body#layout #sidebar-wrap,
body#layout #header-wrapper {
margin-top: 0;
}

body#layout #header, body#layout #header-wrapper,
body#layout #outer-wrapper {
margin-left:0,
margin-right: 0;
padding: 0;
}

body#layout #outer-wrapper {
width: 730px;
}

body#layout #footer-wrap1 {
padding-top: 0;
}

Update:

Replace all of the above with this:-

/** Page structure tweaks for layout editor wireframe */
body#layout #outer-wrapper,
body#layout #header-wrapper,
body#layout #footer-wrap1 {
width: 750px;
}
body#layout #main-wrap1,
body#layout .main .widget,
body#layout .main .Blog {
width: 400px;
}
body#layout #newsidebar-wrap {
width: 150px;
margin-top: 5px;
}
body#layout #sidebar-wrap {
width: 150px;
margin-left: 25px;
}


Next, scroll to somewhere near the bottom of the template where you see this:-

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

<div id='sidebar-wrap'>


Add the portion in red above the div id='main-wrap1'. The segment should look something like this:-

<div id='newsidebar-wrap'>

<div id='newsidebar-wrap1'><div id='newsidebar-wrap2'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
<b:widget id='NewProfile' locked='false' title='About Me' type='Profile'/>
</b:section>
</div></div></div>

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

<div id='sidebar-wrap'>


You can now click “Preview” to see the new layout, and if you like what you see, click “Save Template”. If you don't want the profile on the left, you can remove that page element after that. Refresh your page to see your new Three Columns Rounders 4 Blog.

Align Header Title and Description

Update: We have a more detailed guide on alignment of the Header Title, Description and background image. In the article, you would learn how to move these to the center, or towards the left or right of the Header. Check out the guidelines at Header Image and Title Alignment (I).

In the Rounders template, you would notice that the Header title and description are aligned to the left. If you want that to be in the center of the page, go to /* Blog Header and insert under it the text-alignment code (shown in red).

#header {
text-align: center;
}



Align Post Footer elements to Left

We noticed that the Post Footer elements e.g., Posted by, timestamp, comments, backlink icons, are aligned to the right in the Rounders template. If you want to align these elements to the left, change the text-alignment code (shown in red).

.uncustomized-post-template .post-footer {
text-align: left;
}


Note:

The Rounders 4 template we are working on is the present version available on Blogger. If you are using the old Blogger templates, or any other template, the style names may be different. For example, #header-wrapper may be called #head-wrap. If you are unsure, you may source the net for a guide specifically for your type of template. Otherwise, you may want to understand the way we change this template and adapt it to yours. As long as you backup your current template, and Preview the changes made, it should be alright for you to try some changes.

© Tips for New Bloggers

Found this article useful? Mention us in your post, subscribe to our feed, link to us, or bookmark this site. Thanks for your support!AddThis Social Bookmark Button

Jul 25, 2007

Digg This Story

Three Columns Rounders 3 Template

This is our tutorial specifically for those who are using the Blogger Rounders 3 Template and would like to add a third column or new sidebar into their template. To confirm what your template is, go to Template -> Edit HTML and look for “Blogger Template Style”. If the Name is “Rounders 3”, follow this guide to customize your template to a three column Rounders 3 template.

For other templates, please refer to our articles and guides on:-
1. Three Columns Denim Template;
2. Three Columns Dots Template;
3. Three Columns Minima Template;
4. Three Columns Rounders Template;
5. Three Columns Rounders 2 Template;
6. Three Columns Rounders 4 Template;
7. Three Columns Sand Dollar Template;
8. Three Columns Scribe Template;
9. Three Columns Thisaway Template (I);
10. Three Columns Thisaway Template (II).

Note: Some sites offer free three-column templates for download. If you are starting a new blog, you may look up these sites and use their templates. However, if you have an existing blog and merely want to expand the template to include another column, our guides would be helpful. What we do is to take the standard Blogger templates and show you how to add a new sidebar. This approach gives you total control over the changes, and if you have bookmarked this page, you can revisit it in future should you want to reverse the changes. It is also a safer method, since there could be a few out there who may introduce malicious scripts or blog virus into their customized templates without you knowing.


If you right click on the Header to view the background image, you will see the corners_cap_top.gif or corners_cap_bot.gif which account for the rounded corners. These corners have a fixed width of 740px and are linked to your Blog via the blogblog.com server. Since we have to expand the width of the Blog to include a new sidebar, these images will be changed and linked through an image server. We have created for you these new rounded corner images. The new three column Rounders 3 Template will look like this:-

Three Columns Rounders 3 Template

Before you begin to do anything, remember to backup your template. Go to Template -> Edit HTML. Click the “Download Full Template” link to save a copy of your template.



Rounders 3 Template

When you are logged in, go to Template -> Edit HTML and scroll to these lines:-


#outer-wrapper {
width:740px;
margin:0 auto;
text-align:left;
font: $bodyFont;
}
#main-wrap1 {
width:485px;
float:left;
background:$mainBgColor url("http://www.blogblog.com/rounders3/corners_main_bot.gif") no-repeat left bottom;
margin:15px 0 0;
padding:0 0 10px;
color:$mainTextColor;
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 */
}
#main-wrap2 {
float:left;
width:100%;
background:url("http://www.blogblog.com/rounders3/corners_main_top.gif") no-repeat left top;
padding:10px 0 0;
}
#main {
background:url("http://www.blogblog.com/rounders3/rails_main.gif") repeat-y;
padding:0;
}
#sidebar-wrap {
width:240px;
float:right;
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 */
}


The template defines 3 wrappers, namely:-

#outer-wrapper – referring to the entire blog
#main-wrap – referring to the main Blog Posts
#sidebar-wrap – referring to the right sidebar.

We shall include a left sidebar and name it newsidebar. The above code will therefore be changed to this (note the portions in red).


#outer-wrapper {
width:995px;
margin:0 auto;
text-align:left;
font: $bodyFont;
}
#main-wrap1 {
width:485px;
float:left;
background:$mainBgColor url("http://www.blogblog.com/rounders3/corners_main_bot.gif") no-repeat left bottom;
margin:15px 0 0 15px;
padding:0 0 10px;
color:$mainTextColor;
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 */
}
#main-wrap2 {
float:left;
width:100%;
background:url("http://www.blogblog.com/rounders3/corners_main_top.gif") no-repeat left top;
padding:10px 0 0;
}
#main {
background:url("http://www.blogblog.com/rounders3/rails_main.gif") repeat-y;
padding:0;
}
#sidebar-wrap {
width:240px;
float:right;
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 */
}
#newsidebar-wrap {
width:240px;
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 */
}
#newsidebar-wrap1 {
background:$titleBgColor url("http://www.blogblog.com/rounders3/corners_side_top.gif") no-repeat left top;
margin:0 0 15px;
padding:10px 0 0;
color: $titleTextColor;
}

#newsidebar-wrap2 {
background:url("http://www.blogblog.com/rounders3/corners_side_bot.gif") no-repeat left bottom;
padding:10px 0px 8px;
}
#newsidebar h2 {
color: $bottomSidebarHeaderColor;
border-bottom: 1px dotted $bottomSidebarHeaderColor;
}
#newsidebar a {
color: $bottomSidebarLinkColor;
}
#newsidebar a:hover,
#newsidebar a:visited {
color: $bottomSidebarVisitedLinkColor;
}


Let us now deal with the Header and the Footer. As mentioned, we had created new images for the rounded corners of the Header and Footer based on this new width of 995px.

Look for this in the template:-

/* Blog Header

Amend the image locations from this:-


#header-wrapper {
background:$titleBgColor
url("http://www.blogblog.com/rounders3/corners_cap_top.gif") no-repeat left top;


To this:-


#header-wrapper {
background:$titleBgColor
url("http://www.blogpulp.com/imagehost/images/65147785.gif") no-repeat left top;


Also change this:-


#header {
background:url("http://www.blogblog.com/rounders3/corners_cap_bot.gif") no-repeat left bottom;


To this:-


#header {
background:url("http://www.blogpulp.com/imagehost/images/1135478546.gif") no-repeat left bottom;


Now look for the footer style definitions in your template:-

/* Footer

Change this code:-


#footer-wrap2 {
background:$titleBgColor
url("http://www.blogblog.com/rounders3/corners_cap_top.gif") no-repeat left top;


To this:-


#footer-wrap2 {
background:$titleBgColor
url("http://www.blogpulp.com/imagehost/images/65147785.gif") no-repeat left top;


And amend this:-


#footer {
background:url("http://www.blogblog.com/rounders3/corners_cap_bot.gif") no-repeat left bottom;


To this:-


#footer {
background:url("http://www.blogpulp.com/imagehost/images/1135478546.gif") no-repeat left bottom;


We shall also change the layout editor to cater to the new sidebar. Scroll to where you see this:-

/** Page structure tweaks for layout editor wireframe */
body#layout #main-wrap1,
body#layout #sidebar-wrap,
body#layout #header-wrapper {
margin-top: 0;
}

body#layout #header, body#layout #header-wrapper,
body#layout #outer-wrapper {
margin-left:0,
margin-right: 0;
padding: 0;
}

body#layout #outer-wrapper {
width: 730px;
}

body#layout #footer-wrap1 {
padding-top: 0;
}

Update:

Replace all of the above with this:-

/** Page structure tweaks for layout editor wireframe */
body#layout #outer-wrapper,
body#layout #header-wrapper,
body#layout #footer-wrap1 {
width: 750px;
}
body#layout #main-wrap1,
body#layout .main .widget,
body#layout .main .Blog {
width: 400px;
}
body#layout #newsidebar-wrap {
width: 150px;
margin-top: 5px;
}
body#layout #sidebar-wrap {
width: 150px;
margin-left: 25px;
}


Next, scroll to somewhere near the bottom of the template where you see this:-

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

<div id='sidebar-wrap'>


Add the portion in red above the div id='main-wrap1'. The segment should look something like this:-

<div id='newsidebar-wrap'>

<div id='newsidebar-wrap1'><div id='newsidebar-wrap2'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
<b:widget id='NewProfile' locked='false' title='About Me' type='Profile'/>
</b:section>
</div></div></div>

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

<div id='sidebar-wrap'>


You can now click “Preview” to see the new layout, and if you like what you see, click “Save Template”. If you don't want the profile on the left, you can remove that page element after that. Refresh your page to see your new Three Columns Rounders 3 Blog.

Align Header Title and Description

Update: We have a more detailed guide on alignment of the Header Title, Description and background image. In the article, you would learn how to move these to the center, or towards the left or right of the Header. Check out the guidelines at Header Image and Title Alignment (I).

In the Rounders template, you would notice that the Header title and description are aligned to the left. If you want that to be in the center of the page, insert the text-alignment code (shown in red).

#header {

text-align: center;


Align Post Footer elements to Left

We noticed that the Post Footer elements e.g., Posted by, timestamp, comments, backlink icons, are aligned to the right in the Rounders template. If you want to align these elements to the left, change the text-alignment code (shown in red).

.uncustomized-post-template .post-footer {
text-align: left;
}


Note:

The Rounders 3 template we are working on is the present version available on Blogger. If you are using the old Blogger templates, or any other template, the style names may be different. For example, #header-wrapper may be called #head-wrap. If you are unsure, you may source the net for a guide specifically for your type of template. Otherwise, you may want to understand the way we change this template and adapt it to yours. As long as you backup your current template, and Preview the changes made, it should be alright for you to try some changes.

© Tips for New Bloggers

Found this article useful? Mention us in your post, subscribe to our feed, link to us, or bookmark this site. Thanks for your support!AddThis Social Bookmark Button

Jul 24, 2007

Digg This Story

Three Columns Rounders 2 Template

We had written an article on converting the Blogger Rounders template into three columns. Since the graphics for the Rounders 2, 3 and 4 are different, we shall in this article discuss specifically the changes to be made if you want to insert a third column into your Rounders 2 Template. If you are unsure as to what your template is, go to Template -> Edit HTML and look for “Blogger Template Style” and follow this guide if the Name is “Rounders 2”.

For other templates, please refer to our articles and guides on:-
1. Three Columns Denim Template;
2. Three Columns Dots Template;
3. Three Columns Minima Template;
4. Three Columns Rounders Template;
5. Three Columns Rounders 3 Template;
6. Three Columns Rounders 4 Template;
7. Three Columns Sand Dollar Template;
8. Three Columns Scribe Template;
9. Three Columns Thisaway Template (I);
10. Three Columns Thisaway Template (II).

Note: Some sites offer free three-column templates for download. If you are starting a new blog, you may look up these sites and use their templates. However, if you have an existing blog and merely want to expand the template to include another column, our guides would be helpful. What we do is to take the standard Blogger templates and show you how to add a new sidebar. This approach gives you total control over the changes, and if you have bookmarked this page, you can revisit it in future should you want to reverse the changes. It is also a safer method, since there could be a few out there who may introduce malicious scripts or blog virus into their customized templates without you knowing.


Let us reiterate what we mentioned in our earlier articles. In the Rounders 2 template, if you right click on the Header to view the background image, you will see the corners_cap_top.gif or corners_cap_bot.gif which account for the rounded corners. These corners have a fixed width of 740px and are linked to your Blog via the blogblog.com server. To expand the width of the Blog and include a new sidebar, these images will have to be changed and uploaded onto an image server. Otherwise, you will not have the rounded corners or may see that the background images do not fit into a wider layout.

For this tutorial, we have created new rounded corner images and uploaded them onto a free image server. The new three column Rounders 2 Template will look like this:-

Three Columns Rounders 2 Template

Before you begin to do anything, remember to backup your template. Go to Template -> Edit HTML. Click the “Download Full Template” link to save a copy of your template.



Rounders 2 Template

When you are logged in, go to Template -> Edit HTML and scroll to these lines:-


#outer-wrapper {
width:740px;
margin:0 auto;
text-align:left;
font: $bodyFont;
}
#main-wrap1 {
width:485px;
float:left;
background:$mainBgColor url("http://www.blogblog.com/rounders2/corners_main_bot.gif") no-repeat left bottom;
margin:15px 0 0;
padding:0 0 10px;
color:$mainTextColor;
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 */
}
#main-wrap2 {
float:left;
width:100%;
background:url("http://www.blogblog.com/rounders2/corners_main_top.gif") no-repeat left top;
padding:10px 0 0;
}
#main {
background:url("http://www.blogblog.com/rounders2/rails_main.gif") repeat-y;
padding:0;
}
#sidebar-wrap {
width:240px;
float:right;
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 */
}


The template defines 3 wrappers, namely:-

#outer-wrapper – referring to the entire blog
#main-wrap – referring to the main Blog Posts
#sidebar-wrap – referring to the right sidebar.

We shall include a left sidebar and name it newsidebar. The above code will therefore be changed to this (note the portions in red).


#outer-wrapper {
width:995px;
margin:0 auto;
text-align:left;
font: $bodyFont;
}
#main-wrap1 {
width:485px;
float:left;
background:$mainBgColor url("http://www.blogblog.com/rounders2/corners_main_bot.gif") no-repeat left bottom;
margin:15px 0 0 15px;
padding:0 0 10px;
color:$mainTextColor;
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 */
}
#main-wrap2 {
float:left;
width:100%;
background:url("http://www.blogblog.com/rounders2/corners_main_top.gif") no-repeat left top;
padding:10px 0 0;
}
#main {
background:url("http://www.blogblog.com/rounders2/rails_main.gif") repeat-y;
padding:0;
}
#sidebar-wrap {
width:240px;
float:right;
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 */
}
#newsidebar-wrap {
width:240px;
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 */
}
#newsidebar-wrap1 {
background:$mainBgColor url("http://www.blogblog.com/rounders2/corners_side_top.gif") no-repeat left top;
margin:0 0 15px;
padding:10px 0 0;
color: $mainTextColor;
}

#newsidebar-wrap2 {
background:url("http://www.blogblog.com/rounders2/corners_side_bot.gif") no-repeat left bottom;
padding:10px 0px 8px;
}

#newsidebar h2 {
color: $postTitleColor;
border-bottom: 1px dotted $postTitleColor;
}


Let us now deal with the Header and the Footer. As mentioned, we had created new images for the rounded corners of the Header and Footer based on this new width of 995px.

Look for this in the template:-

/* Blog Header

Amend the image locations from this:-


#header-wrapper {
background:$titleBgColor
url("http://www.blogblog.com/rounders2/corners_cap_top.gif") no-repeat left top;


To this:-


#header-wrapper {
background:$titleBgColor
url("http://www.blogpulp.com/imagehost/images/44575234.gif") no-repeat left top;


Also change this:-


#header {
background:url("http://www.blogblog.com/rounders2/corners_cap_bot.gif") no-repeat left bottom;


To this:-


#header {
background:url("http://www.blogpulp.com/imagehost/images/346852006.gif") no-repeat left bottom;


Now look for the footer style definitions in your template:-

/* Footer

Change this code:-


#footer-wrap2 {
background:$titleBgColor
url("http://www.blogblog.com/rounders2/corners_cap_top.gif") no-repeat left top;


To this:-


#footer-wrap2 {
background:$titleBgColor
url("http://www.blogpulp.com/imagehost/images/44575234.gif") no-repeat left top;


And amend this:-


#footer {
background:url("http://www.blogblog.com/rounders2/corners_cap_bot.gif") no-repeat left bottom;


To this:-


#footer {
background:url("http://www.blogpulp.com/imagehost/images/346852006.gif") no-repeat left bottom;


We shall also change the layout editor to cater to the new sidebar. Scroll to where you see this:-

/** Page structure tweaks for layout editor wireframe */
body#layout #main-wrap1,
body#layout #sidebar-wrap,
body#layout #header-wrapper {
margin-top: 0;
}

body#layout #header, body#layout #header-wrapper,
body#layout #outer-wrapper {
margin-left:0,
margin-right: 0;
padding: 0;
}

body#layout #outer-wrapper {
width: 730px;
}

body#layout #footer-wrap1 {
padding-top: 0;
}

Update:

Replace all of the above with this:-

/** Page structure tweaks for layout editor wireframe */
body#layout #outer-wrapper,
body#layout #header-wrapper,
body#layout #footer-wrap1 {
width: 750px;
}
body#layout #main-wrap1,
body#layout .main .widget,
body#layout .main .Blog {
width: 400px;
}
body#layout #newsidebar-wrap {
width: 150px;
margin-top: 5px;
}
body#layout #sidebar-wrap {
width: 150px;
margin-left: 25px;
}


Next, scroll to somewhere near the bottom of the template where you see this:-

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

<div id='sidebar-wrap'>


Add the portion in red above the div id='main-wrap1'. The segment should look something like this:-

<div id='newsidebar-wrap'>

<div id='newsidebar-wrap1'><div id='newsidebar-wrap2'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
<b:widget id='NewProfile' locked='false' title='About Me' type='Profile'/>
</b:section>
</div></div></div>

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

<div id='sidebar-wrap'>


You can now click “Preview” to see the new layout, and if you like what you see, click “Save Template”. If you don't want the profile on the left, you can remove that page element after that. Refresh your page to see your new Three Columns Rounders 2 Blog.

Align Header Title and Description

Update: We have a more detailed guide on alignment of the Header Title, Description and background image. In the article, you would learn how to move these to the center, or towards the left or right of the Header. Check out the guidelines at Header Image and Title Alignment (I).

In the Rounders template, you would notice that the Header title and description are aligned to the left. If you want that to be in the center of the page, insert the text-alignment code (shown in red).

#header {

text-align: center;


Align Post Footer elements to Left

We noticed that the Post Footer elements e.g., Posted by, timestamp, comments, backlink icons, are aligned to the right in the Rounders template. If you want to align these elements to the left, change the text-alignment code (shown in red).

.uncustomized-post-template .post-footer {
text-align: left;
}


Note:

The Rounders 2 template we are working on is the present version available on Blogger. If you are using the old Blogger templates, or any other template, the style names may be different. For example, #header-wrapper may be called #head-wrap. If you are unsure, you may source the net for a guide specifically for your type of template. Otherwise, you may want to understand the way we change this template and adapt it to yours. As long as you backup your current template, and Preview the changes made, it should be alright for you to try some changes.

© Tips for New Bloggers

Found this article useful? Mention us in your post, subscribe to our feed, link to us, or bookmark this site. Thanks for your support!AddThis Social Bookmark Button

Jul 23, 2007

Digg This Story

Three Columns Scribe Template

We have been receiving a number of queries by users who wish to insert a third column into their Blogger templates but are using other templates like Scribe, Denim, Thisaway, No. 897, and so on. We have therefore set up a test blog using a different template each time and converted them into three column templates. In this article, we shall outline how you can add a third column or a second sidebar into the Scribe template. We have done up new background images to cater to the wider format.

For other templates, please refer to our articles and guides on:-
1. Three Columns Denim Template;
2. Three Columns Dots Template;
3. Three Columns Minima Template;
4. Three Columns Rounders Template;
5. Three Columns Rounders 2 Template;
6. Three Columns Rounders 3 Template;
7. Three Columns Rounders 4 Template;
8. Three Columns Sand Dollar Template;
9. Three Columns Thisaway Template (I);
10. Three Columns Thisaway Template (II).

Note: Some sites offer free three-column templates for download. If you are starting a new blog, you may look up these sites and use their templates. However, if you have an existing blog and merely want to expand the template to include another column, our guides would be helpful. What we do is to take the standard Blogger templates and show you how to add a new sidebar. This approach gives you total control over the changes, and if you have bookmarked this page, you can revisit it in future should you want to reverse the changes. It is also a safer method, since there could be a few out there who may introduce malicious scripts or blog virus into their customized templates without you knowing.


The final three column Scribe template will look like this:-

Three Columns Scribe Template

Before you begin to do anything, remember to backup your template. Go to Template -> Edit HTML. Click the “Download Full Template” link to save a copy of your template.



Scribe Template

When you are at Template -> Edit HTML, scroll to these lines:-

#outer-wrapper {
background-color:#473624;
border-left:1px solid #332A24;
border-right:1px solid #332A24;
width:700px;
margin:0px auto;
padding:8px;
text-align:center;
font: $bodyFont;
}
#main-top {
width:700px;
height:49px;
background:#FFF3DB url("http://www.blogblog.com/scribe/bg_paper_top.jpg") no-repeat top left;
margin:0px;
padding:0px;
display:block;
}
#main-bot {
width:700px;
height:81px;
background:#FFF3DB url("http://www.blogblog.com/scribe/bg_paper_bot.jpg") no-repeat top left;
margin:0;
padding:0;
display:block;
}
#wrap2 {
width:700px;
background:#FFF3DB url("http://www.blogblog.com/scribe/bg_paper_mid.jpg") repeat-y;
margin: -14px 0px 0px 0px;
text-align:left;
display:block;
}


If you view the .jpg images by entering the URLs into the browser, you will see that these are the images that form the backdrop of your post body and sidebar. To expand the template and insert a third column, we will have to enlarge these images as well. Change the above code to these (note the portions in red):-

#outer-wrapper {
background-color:#473624;
border-left:1px solid #332A24;
border-right:1px solid #332A24;
width:900px;
margin:0px auto;
padding:8px;
text-align:center;
font: $bodyFont;
}
#main-top {
width:900px;
height:49px;
background:#FFF3DB url("http://www.blogpulp.com/imagehost/images/483717931.jpg") no-repeat top left;
margin:0px;
padding:0px;
display:block;
}
#main-bot {
width:900px;
height:81px;
background:#FFF3DB url("http://www.blogpulp.com/imagehost/images/529102364.jpg") no-repeat top left;
margin:0;
padding:0;
display:block;
}
#wrap2 {
width:900px;
background:#FFF3DB url("http://www.blogpulp.com/imagehost/images/437454966.jpg") repeat-y;
margin: -14px 0px 0px 0px;
text-align:left;
display:block;
}


We move on to the style definitions for the mainbody and sidebar. Scroll to these lines:-

#sidebar-wrapper {
clear:left;
}
#main {
width:430px;
float:right;
padding:8px 0;
margin:0;
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 */
}
#sidebar {
width:150px;
float:left;
padding:8px 0;
margin:0;
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 */
}


The present sidebar is on the left. We want to insert a new sidebar on the right. We can use the same sidebar settings and change the above code by amending or inserting the parts shown in red.

#sidebar-wrapper {
clear:left;
}
#main {
width:430px;
float:left;
padding:8px 0;
margin:0 0 0 30px;
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 */
}
#sidebar {
width:150px;
float:left;
padding:8px 0;
margin:0;
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 */
}
#newsidebar-wrapper {
clear:right;
}
#newsidebar {
width:150px;
float:right;
padding:8px 0;
margin:0;
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 */
}


Just below the Header and above the Footer, you can see a nice divider image. We have redone this image and replaced the divider.gif with this new image.

Scroll to:-

#footer {
clear:both;
background:url("http://www.blogblog.com/scribe/divider.gif") no-repeat top left;


Change the image location to this:-

#footer {
clear:both;
background:url("
http://www.blogpulp.com/imagehost/images/1182140476.gif") no-repeat top left;


Also, go to:-

#header {
background:url("http://www.blogblog.com/scribe/divider.gif") no-repeat bottom left;
}


And change the image URL to this:-

#header {
background:url("
http://www.blogpulp.com/imagehost/images/1182140476.gif") no-repeat bottom left;
}



We shall also change the layout editor to cater to the new sidebar. Scroll to where you see this:-

/** Page structure tweaks for layout editor wireframe */
body#layout #outer-wrapper {
margin-top: 0;
padding-top: 0;
}

body#layout #wrap2,
body#layout #wrap3 {
margin-top: 0;
}

body#layout #main-top {
display:none;
}

Update:

Add these lines after the above:-

body#layout #outer-wrapper,
body#layout #wrap2,
body#layout #wrap3,
body#layout #header,
body#layout #footer {
width: 750px;
padding: 0px;
}

body#layout #main {
width: 400px;
margin-left: 20px;
}


Further down the template, you will see this:-

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

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


Insert these lines (shown in red):-

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

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

<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
<b:widget id='NewProfile' locked='false' title='About Me' type='Profile'/>
</b:section>
</div>


What it does is to place your Profile on the right sidebar. If you don't want it there, you can remove the page element later. Now, “Preview” your template, and if you like the new three column Scribe template, click “Save Template”. Refresh your Blog to see your new three column Scribe layout!

Align Header Title and Description

Update: We have a more detailed guide on alignment of the Header Title, Description and background image. In the article, you would learn how to move these to the center, or towards the left or right of the Header. Check out the guidelines at Header Image and Title Alignment (I).

In the Scribe template, you would notice that the Header title and description are aligned to the left. If you want that to be in the center of the page, insert the text-alignment code (shown in red).

.Header {

text-align: center;


© Tips for New Bloggers

Found this article useful? Mention us in your post, subscribe to our feed, link to us, or bookmark this site. Thanks for your support!AddThis Social Bookmark Button

Jul 19, 2007

Digg This Story

AdSense Product Referrals in Blogger

If you have an AdSense account, this latest launch of Google AdSense Referrals 2.0 is something you must look at. In addition to the traditional Google products, there is now a very long and varied list of products that you can include in your Blogs and offer your readers. In contextual ad targeting, the AdSense ads that appear in your Blog may not always be relevant, especially if you do not have a consistent theme in your posts. With AdSense Referrals, you are now able to pick the specific products that you like, and are paid the referral fees. In Blogger.com, it is easy to insert an AdSense for content widget but not a Referral unit. This article will explain how you can fill the “shopping cart”, customize the ad colors, insert the code and have the Referral ads appear just before or after your Blogs posts.

Before we begin, we assume that you already have an AdSense account. If you don't, you can always sign up for a Google AdSense account. AdSense is by far one of the preferred ways of monetizing your Blogs and they have various features which can earn you that extra income and revenue through blogging.

Setting up the Referral ads

1. Country and Language

Login to your AdSense account, click the “AdSense Setup” tab and choose “Referrals”. Somewhere near the top, you will see the default country and language that your Referral ads will be based in. If your readers are mainly from another country or are using another language, change the preferences and click “Show”. Since this is a new feature, some of the languages may see fewer advertisers.

AdSense Product Referrals in Blogger

2. Ad Format

Although you can begin to view the products and add them to the Shopping Cart, it may be wise to set the ad format at this stage. Some advertisers have predetermined ad formats which may not fit into your desired size. Choose the “Ad format” size that you like.

3. Choice of products

It is time to go shopping for the relevant ads. There are three ways you can do that:-

a. Keyword

Enter a keyword that is in line with your theme. You will be shown a list of products that match the keyword (maximum of ten keywords). You can click “Add this keyword to cart.” When you use this option, Google AdSense will rotate the ads to match this keyword and new products will be added automatically without further action at your end.

AdSense Product Referrals in Blogger

b. Category

You can browse by category. View the products. If you find a suitable category for your Blog, you can add the entire category to the Shopping Cart. New products in the category will be automatically rotated to show the highest-paying product ads in your Blog. You can have up to ten categories added into the Shopping Cart.

AdSense Product Referrals in Blogger

c. Products

You can also choose the specific products (a maximum of fifteen) to be added to your ad unit. View the products and click the link. You will be shown the referral fees and the terms. There may be different text ad formats and image ad formats that you can choose from. Where the ad size does not fit into the ad unit format that you have earlier determined, you will see a message “This size not compatible with currently chosen ad format.” Choose the one that fits and the product will appear in your Shopping Cart.

AdSense Product Referrals in Blogger

4. Best performing ads

You can tick the “Pick best performing ads” option to have Google AdSense display ads that they believe will bring you more revenue. Since it is based on Google's contextual targeting and analysis, the ads you chose may not be shown.

5. Advanced Options

Click “Advanced Options” and you will be asked to choose a color combination and a channel. Most of us would like the colors to blend with our Blogs. If that were the case, do not use the “Default Google palette” but choose instead any of the “AdSense palettes.” We shall talk about changing the colors later.

You can specify a custom channel to track the performance of these ads. This is particularly useful if you have several blogs and you want to know how well the ads in each blog have performed. Some may want to try out different ad positioning and assign a tracking channel to each of the ad units to monitor the clicks.

AdSense Product Referrals in Blogger

6. Colors customization

Once you are done, click “Continue” and you will be shown the Referrals code that you can add to your web site. The code looks something like this:-

<script type="text/javascript"><!--
google_ad_client = "pub-0000000000000000";
google_ad_width = 160;
google_ad_height = 600;
google_ad_format = "160x600_as";
google_cpa_choice = "xxx";
google_color_border = "FFFFFF";
google_color_bg = "FFFFFF";
google_color_link = "0000FF";
google_color_text = "000000";
google_color_url = "008000";
//-->
</script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

The parts in red are the color codes. You can change the color values and assign different colors to the Referral ad border, background (bg), link, text or url. You may refer to the list of color codes and values or look at your template to find out what colors have been used for your Blog.

7. Placement of code

To insert the code into the Blog, go to Template -> Page Elements -> Add a Page Element either in your sidebar or post body area, and select HTML/JavaScript. Copy and paste the entire JavaScript code and save.

If you would like to have AdSense Referrals appear in every individual post, between your post title and post body, or between your post body and post footer, you may follow this guide AdSense Code in Blogger Post Body, parse the code and place it into the appropriate part of your template.

Under the current rules, you can place up to three AdSense Referral units and three standard AdSense for content units on a single webpage. Therefore, if you have placed the AdSense Referral code into your template, and there are five posts in your page, the ads will only be shown in the first three posts.

© Tips for New Bloggers

Found this article useful? Mention us in your post, subscribe to our feed, link to us, or bookmark this site. Thanks for your support!AddThis Social Bookmark Button

Jul 16, 2007

Digg This Story

Alert Message and Dialog Box

You can display an alert message box to give a special announcement, provide information, or warn the readers before they view the full contents of your site. The pop up box will contain your message and have an “OK” button for viewers to proceed, or a prompt or cancel button to redirect readers to another site. We can further customize our Blog by asking for the reader's name and inserting this input automatically into a welcome message. This tutorial will show you how the JavaScript for these alert and dialog boxes can be inserted into your Blog.

Do note that because JavaScript programs run the moment the page is loaded, many users may, for security measures, set their browsers to disable JavaScripts. Also, too many of these scripts may make your page slow to load. Insert this only if you think it appropriate or useful. Since these are system dialog windows, they may look different in different browsers and operating systems.

Alert Box with OK button

You can have a serious message for sites with adult contents:-

Alert Message and Dialog Box

Or a light-hearted humorous message just for the fun of it:-

Alert Message and Dialog Box

To create an alert message box, login to your account, go to Template -> Page Elements -> Add a Page Element in your left sidebar or post body area, and select HTML/JavaScript. Paste the code shown below:-

<script type="text/javascript">
alert('You are about to enter an extremely funny site. People who are prone to laughing fits ... Beware!')
</script>
<noscript>Enable javascript in your browser to view an important message.</noscript>


Substitute the words in red with the message that you want to have displayed when users view your Blog. The words in green are the alternative text which will be displayed if the users have turned off their JavaScript functions.

Alert Box with Confirmation button

Although free speech is the order for the day, as authors of Blogs, we should be sensitive to the ethics and morality concerns of the people all over the world. If the Blog contains contents that are explicit or unsuitable for a select group of people, give the readers a choice not to proceed to read your Blog. The JavaScript for this alert box shows two buttons – “OK” and “Cancel” – which the readers can select. If their option is to “Cancel”, they will be redirected to a safe site. For this example, we have used Google's site as the safe landing page.

Alert Message and Dialog Box

To insert the alert dialog box, login to your account, go to Template -> Page Elements -> Add a Page Element in your left sidebar or post body area, and select HTML/JavaScript. Paste the code shown below:-

<script type="text/javascript">
confirm('This site contains explicit contents. Are you sure you want to continue?');
if (confirm('This site contains explicit contents. Are you sure you want to continue?')) {
window.location = "http://tips-for-new-bloggers.blogspot.com/";
}
else {
window.location = "http://www.google.com/";
}
</script>


Your message appears in the red portion. Enter your Blog URL in the blue colored part of the code. This is where your visitors will go to if they click “OK”. In the orange part, enter the URL of the place to redirect your visitors to should they click “Cancel”.

Alert Box with Prompt field

Another type of dialog box prompts the user to enter some information. For instance, the prompt box can ask the reader for his name and use that to customize the web page. Be reminded that many browsers are configured to disable scripts that ask for information. Have fun customizing your Blog but don't make this a key aspect of the contents. For example, if you have a story that keeps mentioning the name of the reader, the parts where the name should be will appear “null”.

In Template -> Page Elements -> Add a Page Element we add a HTML/JavaScript and paste the following code:-

<script type="text/javascript">
var yourName = prompt("How can we address you?", "Reader");
</script>


The question can be changed. The user will be prompted to enter something in the dialog box. He can of course leave it blank and press “OK” or click “Cancel”.

Alert Message and Dialog Box

Below this JavaScript, in your main body, add another HTML/JavaScript page element. This time, you can type in this:-

Welcome back <script type="text/javascript">document.write(yourName)</script>! Feel free to look around. If you like what you read, mention us in your post or link to this site. Hope to see you again <script type="text/javascript">document.write(yourName)</script>


This is what will appear in your Blog, based on the input that the reader keys in.

Alert Message and Dialog Box

Change the wordings to suit you and wherever you want the reader's name mentioned, add the script (shown in red). Try to phrase the wordings such that if the user enters nothing and clicks “OK”, the blank space is not obvious. A prompt dialog box like this adds a personal touch to your Blog.

© Tips for New Bloggers

Found this article useful? Mention us in your post, subscribe to our feed, link to us, or bookmark this site. Thanks for your support!AddThis Social Bookmark Button

Jul 12, 2007

Digg This Story

Numbered List and Bulleted List

The Blogger's post editor gives you one number style for an Ordered (Numbered) list and one bullet style for an Unordered (Bulleted) list. Here, we shall let you know how you can change these styles to add variation to your posts. We shall also discuss how links can be incorporated into such lists and how a marquee tag can be added to make the list scroll.

Ordered (Numbered) List

We like to use ordered lists to assign numbers to a list of items or a step-by-step instructional guide. Inserting it into our posts is easy. When you are creating a post, choose the “Compose” mode and click the button in the toolbar that says “Numbered list”. Type your items and press Enter after every item. You will see numbers 1, 2, 3 and so on assigned to each item.

Numbered List and Bulleted List

Sometimes, you may not want numbers. For example, if you have a Table of Contents, you may want to use capital letters A, B, C to the list. If you have a long article with several lists, you may want to use Roman numbers I, II, III too. What you do after typing the list is to change the mode from “Compose” to “Edit HTML”. You will see the HTML that looks like this:-

How to bake a chocolate cake

<ol>
<li>Preheat oven.</li>
<li>Sift together flour, baking powder, baking soda, cocoa and sugar.</li>
<li>Add water and oil.</li>
<li>Add eggs, milk and vanilla.</li>
<li>Pour batter into pan.</li>
</ol>


The <ol> tag represents “ordered list” and each list item starts with <li> tags. Notice that they must have closing tags. After each list item, there is a </li> tag and after the entire ordered list, there is a closing </ol> tag. If I want the numbers changed to capital letters, I can add a type="A" into the code. The code will now be this:-

<ol type="A">
<li>Preheat oven.</li>
<li>Sift together flour, baking powder, baking soda, cocoa and sugar.</li>
<li>Add water and oil.</li>
<li>Add eggs, milk and vanilla.</li>
<li>Pour batter into pan.</li>
</ol>


When you click back to “Compose” mode, this is how the post will look:-

Numbered List and Bulleted List

The other possible types that you can use are the Lowercase letters, Roman numerals, and Lowercase Roman numerals.

type="a" will give you a, b, c
type="I" will give you I, II, III
type="i" will give you i, ii, iii

Unordered (Bulleted) List

Using the above cake recipe example, the ingredient list need not have any particular order. Instead of numbers, we will use “Bulleted list” in the toolbar to type in our ingredients. The standard Blogger style is a Disc bullet (a black colored dot).

Numbered List and Bulleted List

This time, when we view the code under “Edit HTML” mode, we will see this:-

Ingredients

<ul>
<li>all purpose flour</li>
<li>baking powder</li>
<li>baking soda</li>
<li>cocoa</li>
<li>sugar</li>
<li>water</li>
<li>oil</li>
<li>eggs</li>
<li>milk</li>
<li>vanilla</li>
</ul>


The <ul> tag means “unordered list”. The other styles you can change the bullets to are the circle and the square. Just like the ordered list, we can add within the <ul> tag the type of bullet. We can have:-

<ul type="circle">

Or

<ul type="square">

We have incorporated both of them into our sample to let you see how they would appear:-

Numbered List and Bulleted List

Link List

Instead of having just words, we can have text links within an ordered or unordered list. A detailed writeup of text link codes can be found at our article on Hyperlinks and Image Links. Put the text link code into the numbered or bulleted list. For example, this HTML code:-

<ul type="circle">
<li><a href="http://tips-for-new-bloggers.blogspot.com/" target="_blank">Blogger Tips</a></li>
<li><a href="http://quotes-motivational-inspirational.blogspot.com/" target="_blank">Famous Quotes</a></li>
<li><a href="http://fairy-tales-fables-business.blogspot.com/" target="_blank">Business Fables</a></li>
</ul>


Will give you this, with links opening in new windows or tabs when clicked.


You can also replace the text links with image links.

Scrolling Links

We can make the links scroll by combining the above code with the marquee tag. The various styles of scrolling text and their attributes were explained in our article on Scrolling Text – Marquee HTML Code.

If we take one of the specimen scrolls, this scrolling text code:-

<marquee direction="up" scrollamount="2" height="100px" bgcolor="#ffffcc">
<ul type="circle">
<li><a href="http://tips-for-new-bloggers.blogspot.com/" target="_blank">Blogger Tips</a></li>
<li><a href="http://quotes-motivational-inspirational.blogspot.com/" target="_blank">Famous Quotes</a></li>
<li><a href="http://fairy-tales-fables-business.blogspot.com/" target="_blank">Business Fables</a></li>
</ul>
</marquee>


Will give you a link list that scrolls upwards:-



© Tips for New Bloggers

Found this article useful? Mention us in your post, subscribe to our feed, link to us, or bookmark this site. Thanks for your support!AddThis Social Bookmark Button