Sunday, June 21, 2009

565 with a Wider Post Area

Article Series: Wider 2 Column Templates - Step by Step Guides

Here are the steps to increase the width of the main post area of the 565 template by a desired amount. If you need to upload images/embed videos etc that are wider than the default width of the post column, this modification will give you more room in your posts.

1) Decide the amount of pixels by which you want to increase the width of the post area. In this article, I will be expanding it by 200 pixels. (In fact, you can pick an arbitrary size and experiment to see if that is enough for you)

2) Increase the width of the post area

  • Go to Layout -> Edit HTML
  • Locate the #main-wrapper CSS selector (Do a Find using your browser)
  • Increase its width property by adding the amount of pixels picked in step (1). Here we change it to 660 by adding 200 to the default width of 460 pixels.
#main-wrapper {
width: 660px;
...
}

3) Increase the width of the outer wrapper to accommodate the expanded main wrapper.
  • Locate the CSS section called #outer-wrapper
  • Expand its width property by the same amount of pixels selected in step (1)
#outer-wrapper {
width: 744px;
...
}

That's it! Preview and experiment with different increments. Click SAVE TEMPLATE once you get the required increment.

You should now have more room to play around with, in your main post area.

Thursday, May 28, 2009

How I got a Page Rank of 4

Today is an important day for The Blogger Guide (TBG).  Its Google Page Rank has gone up to four 4! (It might have been updated a couple of days ago, but I noticed it only today). It took approximately a year and four months to get to this level. Of course, Page Rank will not simply go up as time goes by. One needs to put a significant effort to earn such a rank and, in this post, I will share some tips about how I got there.

Content with Value
In the SEO circles, it is said that content is king. Although good content alone won’t attract much success, it is a vital ingredient. All most all articles on TBG are written after lot of research to ensure accuracy and completeness. Simple copy-and-paste type of articles don’t really add any value to the readers and also don’t give any authority to a blog.

Good content is the key in attracting incoming links, which are vital for a good page rank.

Niche Blogging
This is another advice that bloggers hear very often. It is easier said than done, but staying focus on an adequate size niche increases the value of a blog.  I used the word adequate because, if your niche is too narrow, then you can soon run out of ideas to write content.

TBG’s focus, as the name suggests, has been on Blogger. While being more specific about Blogger, I have also touched upon more general topics that all bloggers are interested, such as monetization and blog promotion.

Use of Illustrations
A picture is worth a thousand words. Being a blog about technical stuff, it is very important that what I write is easily understood by the readers. Explaining technical stuffs in simple, non-technical language, amply supported by illustrations is another reason for the success of TBG. I spend quite a lot of time in developing these illustrations either by drawing from scratch or by annotating screenshots. (See the article series on the Blog widget for example)

Offering Genuine Help
Helping Blogger users in forums such as the official Blogger Help Group, Blogger Forum and Blog Catalog etc to solve their problems was another reason. Staying focused on a niche is advantageous here because most niches have online forums of users who are interested on that topic. You must locate the most active forums for your niche and participate in them. An active forum will drive you more visitors and leaving the URLs of your articles there will count towards your page rank as well. But be careful to not to spam the forum with unrelated URLs.

Respond to Readers
I reply to my readers who leave comments or directly email me, mostly within a day. Fast responses are really appreciated by them as evident from the replies I get back. Most of them really don’t expect me to reply that soon. Responding quickly tells the readers that this is a lively blog and that it is not an old unmaintained one.

Posting Regularly
Google doesn’t like blogs that don’t update frequently. Posting new content at least once a week is also required to run a successful blog. There was a period of 3 months in which I could not write a single article, and I noticed a sharp decline in visitors during that time.

Not Relying on Short Cuts
Last but certainly not the least, I relied on working hard based on the tips listed above and did not resort to short cuts such as spamming forums or other blogs, link exchange etc.  Today’s search engines don’t just look at the link, but they also evaluate the context in which it appears. If the link appears in a meaningful and relevant context, that will score more in their ranking algorithms. In contrast, they are also smart to identify blogs that employ short cuts such as the ones mentioned above.

That's it for now. I hope you will find them useful.

Sunday, May 24, 2009

3 Columns : 565 : Left and Right Sidebars

Article Series: 3 Column Step by Step Guides

This is a tutorial that gives step by step instructions to convert a default 2 column 565 Blogger template in to a three column template with two sidebars on left and right hand sides of the main post area.

(If you really want to understand what's happening here, read the article series Three Column Templates Explained.)

1) Add a new CSS id selector for the 2nd sidebar wrapper.

  • Go to Layout -> Edit HTML
  • Locate the #sidebar-wrapper section (Do a Find using your browser)
  • Copy that full section and paste below the existing sidebar section (it doesn't have to be below) and rename it to #left-sidebar-wrapper
  • Change the float: $endSide to float:$startSide of this newly copied section
  • Change the occurrences of $startSide in the background property to $endSide. (See the code snippet below)
#sidebar-wrapper {
background:$sidebarBgColor url("http://www2.blogblog.com/no565/corner_sidebar_$startSide.gif") no-repeat $startSide top;
width:254px;
float:$endSide;
padding:0;
color: $sidebarTextColor;
font-size: 83%;
word-wrap: break-word; /* fix ... in IE */
overflow: hidden; /* fix ... float */
}

#left-sidebar-wrapper {
background:$sidebarBgColor
url("http://www2.blogblog.com/no565/corner_sidebar_$endSide.gif")
no-repeat $endSide top;

width:254px;
float:$startSide;
padding:0;
color: $sidebarTextColor;
font-size: 83%;
word-wrap: break-word; /* fix for ... IE */
overflow: hidden; /* fix ... float */
}

2) Introduce a new div element, as a child of the content-wrapper, to be the placeholder for the 2nd sidebar
  • Locate the <div id='main-wrapper'> element.
  • Copy the code shown in red, above that section (this has to be above)
<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'/>
</div>

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

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

3) Expand the width of the other wrappers to accommodate the new sidebar
  • Locate the CSS section called #outer-wrapper
  • Change its width property to 1006 pixels
#outer-wrapper {
position:relative;
top:4px;
$startSide:4px;
background: #889977;
width:1006px;
...
}

4) Do necessary adjustments to margins, padding etc
  • Locate the #main-wrapper section
  • Insert a left margin of 12 pixels. (add the line shown in red)
#main-wrapper {
width: 460px;
margin-left:8px;

float: $startSide;
...
}

5) Modify the CSS rules for the wire frame layouts editor.
  • Locate the end of the skin denoted by "]]>"
  • Add the following code shown in red, above that line.
/** Page structure tweaks for layout editor wireframe */

body#layout #outer-wrapper {
padding-top: 0;
width:720px;
}
body#layout #header-wrapper,
body#layout #content-wrapper,
body#layout #footer-wrapper {
padding: 0;
width:720px;
}

body#layout #main-wrapper {
width:400px;
}

body#layout #sidebar-wrapper,
body#layout #left-sidebar-wrapper {
width:150px;
}

]]></b:skin>

Save the template. Switch to Page Elements view and enjoy your 3 column template! (The new sidebar may not be visible until some widgets are added to it)