How to add a second sidebar to Blogger (blogspot)

Create your own 3 column blogger template by adding a second sidebar to your blogspot blog, you can place the sidebar in any side of the blog.
By adding a second sidebar to blogger (blogspot) your blog will look more professional and you will have more space for your gadgets and widgets. Follow the bellow steps with attention , and first of all backup your template.

1. Go to your Blogger dashboard
2. Layout
3. Edit HTML
4. Find the sidebar-wrapper code, it looks like this:

#sidebar-wrapper { width: 220px; float: $endSide; 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 */}

5. Add the following code right after it:

#sidebar-wrapper2 { width: 220px; float: $endSide; 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 */}

So it will look like this:

6. Find the following code:

<div id='sidebar-wrapper'>
<b:section class='sidebar'
id='sidebar' preferred='yes'>
<b:widget id='BlogList1'
locked='false' title='My Blog List' type='BlogList'/>
<b:widget
id='Label1' locked='false' title='Labels'
type='Label'/>
<b:widget id='Followers1' locked='false'
title='Followers' type='Followers'/>
<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>

Note: Look for the piece of code what i have marked in red, the middle of
the code is containig the first sidebar gadgets
7. Paste after it the following code:

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

It will look like this, but you have other gadgets:

8. Now edit the size of the template:
Find the following code :

#sidebar-wrapper {
width: 220px;
float: $endSide;
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-wrapper2 {
width: 220px;
float:
$endSide;
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 bold numbers are the size of the 2 sidebars , this is the standard
size , but you can change them.

Note: If you have the size of the sidebars we need to calculate:

This is the size of the blog:

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

This is the size of the header:

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

And this is the size of the posts:

#main-wrapper {
width: 410px;
float: $startSide;
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 */
}

These are the default sizes, now lets change them.

The posts body size is 410 , the size of a single sidebar is 220.The entire blog size is 660, the header is the same.

outer-wrapper = 660

main-wrapper = 410

sidebar-wrapper = 220

paddings and borders = 660 - (410 + 220)

Now add the second sidebar:

outer-wrapper = 410 + 220 + 220 + 30 = 880
So edit the outer and the header wrapper to 880

If you use other numbers recalculate it, it`s simple.

9. Save your template and go to Page Elements If you have followed all the steps it will look like in this picture.

10. Now just add some gadgets and please link to us! (Link to us with a text link or use the image code from my sidebar :D thx for your support)

related post:

• Adding The Sticky Floating Widget Next To Blogger Posts (1)
• Advanced Search Techniques for Google Search Optimization (1)
• Blogger Sticky Floating Widget (1)
• Hot girls photos (1)
• seo (3)
• SEO sitemap Tips for Blogger (blogspot) (10)
• SEO Tutorial - Search Engine Optimization Tips (2)
• SEO- off page (6)
• SEO- on page (4)
• SEO-tools (1)

Optimize posts title with H1 headings your blog

Headings are defining the size of the the text. H1 is the biggest and H6 the smallest one. The headings are important from SEO perspective, too. Search Engines like Google give more importance for H1 text, the mort important keywords are in the title of the posts so we need to use H1 for them.( The post title size is set by default to H2 or H3.) Here is how to:

1. Find the following code in your template:

<b:if cond='data:post.title'> <h3 class='post-title entry-title'> <b:if cond='data:post.link'> <a expr:href='data:post.link'><data:post.title/></a> <b:else/> <b:if cond='data:post.url'> <a expr:href='data:post.url'><data:post.title/></a> <b:else/> <data:post.title/> </b:if> </b:if> </h3> </b:if>

(some templates have h2 , change the red numbers to 2 and search again)

2. After finding the above code change the red h2 or h3 tags to h1

3. If you think the H1 is too big add this CSS code before ]]></b:skin>

h1.post-title, .post h1 #Blog1 h1, #Blog2
h1 { font-size:1.5em; }
(this is the size what i am using , but you can change it)

4. Save your template!

related post:

• Adding The Sticky Floating Widget Next To Blogger Posts (1)
• Advanced Search Techniques for Google Search Optimization (1)
• Blogger Sticky Floating Widget (1)
• seo (3)
• SEO sitemap Tips for Blogger (blogspot) (7)
• SEO Tutorial - Search Engine Optimization Tips (2)
• SEO- off page (6)
• SEO- on page (4)
• SEO-tools (1)

How to add different meta keywords to every page in blog

The meta keyword tag is a list of keywords for search engines. Unlike the meta description , we can generate automatically the meta keywords (We can generate automatically the meta description ,too but it`s better to write ). Usually the most relevant keywords of a post are in the title, so we can use the keywords from the title as meta keywords. It`s simple to do it , just follow these easy steps:
1. Go to Layout , Edit HTML
2. Find the following code:

<b:include data='blog' name='all-head-content'/>

3. Add the following code after it:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta expr:content='data:blog.pageName' name='keywords'/>
</b:if>

4. Save template
NOTE: Google do not place much weight on these keywords but yahoo and some search engines are using them.

related post:

• Adding The Sticky Floating Widget Next To Blogger Posts (1)
• Advanced Search Techniques for Google Search Optimization (1)
• Blogger Sticky Floating Widget (1)
• Hot girls photos (1)
• seo (3)
• SEO sitemap Tips for Blogger (blogspot) (2)
• SEO Tutorial - Search Engine Optimization Tips (2)
• SEO- off page (6)
• SEO- on page (4)
• SEO-tools (1)

Optimize blog posts title

The default form of the posts title is Blog title : Post title. This isn`t an efficient method because Google shows only 69 characters of the title tag and it`s better to place the most relevant keywords first. For a better SEO efficiency use a title form like Post title | Blog title or Post title - Blog title. Changeing the title tag is very simple ,just follow the steps bellow:

1. Edit your blog template HTML (go to Layout , Edit HTML) and search (Ctrl+F for FireFox) for this line :

<title><data:blog.pageTitle/></title>

2. Replace it with this code:

<b:if cond='data:blog.pageType == &quot;item&quot;'> <title> <data:blog.pageName/> | <data:blog.title/> </title> <b:else/> <title> <data:blog.pageTitle/> </title> </b:if>

3. The character in red is separating the post title from the blog title, you can use any other character or keyword instead.

• Adding The Sticky Floating Widget Next To Blogger Posts (1)
• Advanced Search Techniques for Google Search Optimization (1)
• Blogger Sticky Floating Widget (1)
• Hot girls photos (1)
• seo (3)
• SEO sitemap Tips for Blogger (blogspot) (2)
• SEO Tutorial - Search Engine Optimization Tips (2)
• SEO- off page (6)
• SEO- on page (4)
• SEO-tools (1)

Different meta description for each post..

The meta description as the name tells is a short description of your posts, the meta description is supported by almost all major search engines, e.g.: Google , Yahoo , MSN....If you google it probably you will found a code what is looking like this one:

<meta name='DESCRIPTION' content='A few words about the content of the page'/>

This is the basic code of a meta description but this is usually used for webpages not for blogs because this code will give the same description to every post of your blog. If we want to have a well SEO optimized blog we need to use different descriptions for each post. To use different description for every post complete the following steps:

1. Open the Layout panel and go to Edit HTML

2. Save your template by clicking on the Download full template button (to backup if something goes wrong)

3. Find the following code:

<b:include data='blog' name='all-head-content'/>

4. Add this code after the above code:

<b:if cond='data:blog.url == "http://help4seo24.blogspot.com/2011/09/top-ten-seo-tips-and-tricks-for-google.html"'>
<meta name='DESCRIPTION' content='Welcome to SEO Tips Blogger , my blog about search engine optimization tips and blogger template customization.'/></b:if>

5. Change the red marked url with the full url of your post.

6. Change the green marked text with the description of your post

7. Create a code like this for each post.

8. Save your template.

NOTE: Don`t use more than 150 characters in your description.
Add the code for a post and put the code for the next post directly after it. To add description to the main page change the red marked url with the homepage of your blog: e.g: http://help4seo24.blogspot.com/