Friday, February 29, 2008

Thank You for Supporting The Blogger Guide!

Thank You Very Much
for your
generous donation
to support
The Blogger Guide.

It's very nice of you to have done it
and
I really appreciate your contribution.

It is people like you
who give me the
strength and the ability to continue this blog.

Many Thanks,
ids.

Thursday, February 28, 2008

HOWTO: Monitor Visitors to your Blog

You start a new blog and then write up some content on it. Once you think that you've got enough posts for people to hang around, you let your friends, family and colleagues know about your blog. And now you want the whole world to visit your blog! Fair enough.

But how do you know whether these people actually visited your blog? How do you count the number of visitors to your blog? Well, it turns out that there's quite a number of ways of doing that. There are many traffic monitoring services available out there and in this article we will take a look at a few of them.

I have been using 4 such services to track the visitors to my blog. (Note, however, that you don't have to use that many to track visitors. Even a single monitoring service can do the job.) Feedjit, SiteMeter, StatCounter and Google Analytics are those 4 services and all of them are free services.

Feedjit offers two widgets to track visitors; a traffic feed which shows the 10 most recent visits to and exits from your blog and a miniature traffic map. Both widget are updated real time (i.e. as and when visitors arrive). The traffic feed shows the location (country, city) of visitors, the referring URL, the entry page and the exit page for each visitor (all these details are not available for certain visits). This is ideal to know who's visiting from where, but it doesn't readily give a count of your visitors.

SiteMeter and StatCounter both provide counts of visits and page views per visit. In fact, both provide almost identical data though with different presentations. The tracking code from these services, which you install in your blog also displays a count of visitors.

Registering with SiteMeter is simple and installing the tracking code in your blog is pretty easy. It offers a very good set of statistics in a neat, compact format. The presentation of information in SiteMeter is what I like most about it. With respect to each visit, the visitor location, the referring URL, entry and exit pages, duration of the visit, time zone information and a lot of system stats such as the browser used, screen resolution, color depth etc are provided. Many bar and pie charts that summarize the visits are also provided. Absence of the navigation path of each visitor (i.e. what pages were viewed other than the entry and exit pages) is one of the disadvantages of SiteMeter.

StatCounter, on the other hand, provides the navigation path of each visitor which is very useful to see what people actually read once they get in. Other than that, it's almost the same set of data as provided by SiteMeter. My personal preference, however, is SiteMeter for its neat, easily comprehensible presentation of data. (Besides, I don't like the ugly counter by StatCounter displayed on the blog once we install the tracking code)

Last but certainly not least, Google Analytics (GA) is the service which offers the most complex analysis of data. As with many Google services, the user interface (i.e. presentation) is excellent. You have a configurable dashboard and you can drill down on each item on the dashboard. Visitor trends, visitor loyalty and a lot more useful stats are provided. The difficult and time consuming installation (compared to the other 3), non real time data (stats are updated only once a day) and complexity can be stated as the primary disadvantages of GA. The complexity is because of the added focus towards AdWords customers. In my view, GA is useful if you have huge amount of visitors and you want to direct these visitors to targets such as increased sales from your site. Another problem with GA is the difficulty of excluding your visits (i.e. internal visits) to the blog whereas it is just a click of a button with the other 3 services.

One thing you must remember though is that the stats, especially the visitor counts and page views, from these 4 different services are very rarely in agreement. They differ from each other depending on factors such as the time interval that makes two adjacent visits from the same person count as two visits or one visit. For example, if the same person visits your blog more than once within a space of 'x' hours, all of that will count as one visit. But this 'x' differs from service to service.

In conclusion, I can say that I check my SiteMeter stats every so often and use Google Analytics to drill down for more complex stats.

Monday, February 25, 2008

3 Column Templates: Step by Step Guides

This is a series of articles providing you with step by step instructions on how to convert a given default Blogger template in to a three column template with either two right sidebars or with left and right sidebars.

(If you, however, prefer to know the internal details of three columns before following a step by step guide, then I suggest you to take a look at my other series, Blogger Three Column Templates Explained.)

Minima

Minima Lefty
Denim
Rounders
Rounders 3
Rounders 4
Son of Moto
Ms Moto
Scribe
Dots
Harbor
565


Last Update: 2009 Sep 21

Blogger Three Column Templates Explained

Three column templates are in high demand among most of the bloggers. This is evident from the frequency in which that question gets asked in the blogger forums. I have written up a series of articles that explains the under the hood details of converting a 2 column template in to a 3 column one.

If you are the type of person who likes to know what's happening underneath, before modifying your template, then this article series is for you. (However, if you are happy to do that by just following some steps almost blindly, then I suggest that you find a matching guide for your template from my other series, 3 Column Templates: Step by Step Guides.)

To change your template in to 3 columns with confidence, the first thing you should understand is the basic structure or the skeleton of a Blogger template. That is what the first article in the series, Skeleton of a Blogger Template, covers. The many wrappers such as the outer-wrapper, the sidebar-wrapper etc and their containment hierarchy are explained in that article with simple illustrations.

The second article is the longest in the series. Titled as Adding a Third Column, this article takes you through a step by step explanation of how a generic 2 column skeleton template is converted in to a skeleton 3 column template with two sidebars on the right hand side. The first 3 steps of adding a new CSS selector, providing a div placeholder in the body and expanding the parent containers to accommodate the new sidebar are explained by providing code snippets as well as figures of the intermediate and final steps.

The fourth step of converting in to 3 columns is fixing the wire frame editor to fit the new sidebar inside the Add and Arrange Page Elements view. (This is to correct a problem faced primarily by Firefox users). The third article, Layouts Wire Frame Editor, is focussed entirely on this step.

The fourth and final article, 3 Columns with Left and Right Sidebars, shows the differences between a template that has two sidebars on the right and one with left and right sidebars. In fact, the differences lie only in the first and second steps mentioned above.

So go ahead and read all of them if you really want to know the behind the scene details of 3 columns. However, keep in mind that this series is like a road map given to you when you want to go from point A to point B; but it isn't a set of driving directions that reads out as "take the turn to the right and to the left" and so on.

Sunday, February 24, 2008

3 Columns with Left and Right Sidebars

This is the fourth in a series of articles on 3 column templates. In the second article in this series, we looked at a generic two column template and converted that to a generic 3 column template with two sidebars on the right hand side. I use the word generic because these articles will not talk about any given Blogger template.

In this article, we'll see how we can create a generic 3 column template with sidebars on the left and the right hand side of the main post area.

Again we will start from the generic two column template. (For details, please read the second article). The steps are the same whether we create two right sidebars or left and right sidebars.

First step is to duplicate the existing sidebar CSS selector and create a new one. The code shown in red below is the duplicated selector.

#sidebar-wrapper
{
width: 220px;
height: 250px;
border: 1px dotted;
background: #a0cffd;
float: right;
}

#sidebar-wrapper-two
{
width: 220px;
height: 250px;
border: 1px dotted;
background: blue;
float: left;
}


We modify the float property to left as we want this second sidebar to be placed on the left hand side.

Next step is to introduce a new div element to the body of the template as a placeholder for this new sidebar. We place this div before the div for the main post area, as a child of the content-wrapper. The additions to our template are shown below.

<div id='content-wrapper'>
<div id='sidebar-wrapper-two'>
<p>Side Bar Two</p>
</div>
<div id='main-wrapper'>
<p>Main</p>
</div>
<div id='sidebar-wrapper'>
<p>Side Bar</p>
</div>
</div>

In the actual Blogger template, you have to copy the div and the <b:section> element as well.

That's the key difference in this layout with respect to the previous layout. When we want to have two sidebars to the right, we inserted the new placeholder after the existing sidebar. But when we want a left sidebar, we insert it before the main post area. And the relative positioning is achieved with the floating of those elements. We float the left sidebar and the main post area to the left and keep the existing right sidebar floated to the right as it was originally.

The other two steps of expanding the parent containers and adjusting the wire frame editor remains the same. For details of those two steps please have a look at the second and third articles in this series respectively.

Once we finish the four steps we have our finished 3 column skeleton with left and right sidebars as shown in the following figure.


The new sidebar we added to the left is shown in dark blue.

(Note: The complete HTML page for the above figure is available here. If you want to see the full code, right click on the above link and save the page to your disk. Then open it using an editor such as the Notepad.)

Saturday, February 23, 2008

3 Columns : Son of Moto : Left and Right Sidebars

Article Series: 3 Column Step by Step Guides

Here are the steps to convert a default 2 column Son of Moto template in to a three column template with sidebars on the left and right hand side 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 section (Do a Find using your browser)
  • Copy that full section and paste above the existing sidebar section (it doesn't have to above) and rename it to #left-sidebar
  • Change the float: $endSide to float:$startSide (See the code snippet below)
#left-sidebar {
width: 226px;
float: $startSide;
color: $sidebarTextColor;
word-wrap: break-word; /* fix for ... IE */
overflow: hidden; /* fix for ... float */
}

#sidebar {
width: 226px;
float: $endSide;
color: $sidebarTextColor;
word-wrap: break-word; /* fix for ... in 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 parent wrappers to accommodate the new sidebar
  • Locate the CSS section called #outer-wrapper
  • Change its width property to 918 pixels
#outer-wrapper {
margin: 0 auto;
border: 0;
width: 918px;
...
}

4) Do necessary adjustments to margins, padding etc
  • Locate the #main section
  • Insert a left margin of 14 pixels.
#main {
width: 400px;
margin-$startSide:14px;
float: $startSide;
...
}

5) Modify and expand the background images as necessary.
  • Add a template variable to define the image host location as explained here. (This step will open up in a separate window. Return to the next bullet point after that)
  • Locate the body section.
  • Replace the URL of the background image to the one shown in red below.
body {
...
background: #692 url($imageHost/sonofmoto_outerwrap_w.gif) top center repeat-y;
...
}
  • Locate the #outer-wrapper section.
  • Replace the URL of the background image to the one shown in red below.
#outer-wrapper {
...
background: #ffffff url($imageHost/moto_innerwrap_w.gif) top right repeat-y;
...
}

6) Modify the CSS rules for the wire frame layouts editor.
  • Locate the section that starts with "/** Page structure tweaks for layout editor wireframe */"
  • Replace that entire section with the following code.

/** Page structure tweaks for layout editor wireframe */

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

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

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

]]></b:skin>


Save the template. Switch to Page Elements view and enjoy your 3 column template! (Let me know if you come across any problems)

Note: You are free to use the image provided by me. But if you change your template according to this tutorial and use that image, please do a post in your blog linking to this article.

Thursday, February 21, 2008

HOWTO: Exclude your visits from Google Analytics

Introduction

In my view, one of the minuses of Google Analytics (GA) is the difficulty of excluding our own traffic (aka internal traffic) from the reports. As per this help article, there are two methods of achieving this. One is to set up a filter to exclude traffic from a given IP address or a range of addresses. This method is undesirable if you are using a connection that assigns dynamic addresses for each session.

The other method is to filter using a cookie installed in your browser. This method is more reliable and safer than using the first method. But the caveat is installing the cookie as it is not straight forward. And the second method described in the help page is flawed according to this discussion.

The Steps

Here are the tried and tested steps to exclude your traffic from GA.

1) Open your template in the Edit HTML mode and scroll right to the end where your tracking code is installed. Locate the script shown below and add the line shown in red.

<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-XXXXXXX-X");
pageTracker._initData();
pageTracker._trackPageview();
pageTracker._setVar("exclude_ids_bguide");
</script>

Replace the variable passed to the _setVar() function with something applicable to you. The string you provide here ("exclude_ids_bguide" in this case) is called the filter pattern and it will be used later when we create the filter.

2) Save the template and visit your blog from all the browsers that you want this cookie installed. For example, if you are using Firefox and IE, visit your blog's homepage from both the browsers. If the page is already loaded, make sure that you do a page refresh.

The next step is VERY IMPORTANT!

3) Go back immediately and remove the line added (i.e. the line shown in red) in step (1), from your blog template and save it again. If you leave this line, all visitors to your blog will also get the cookie installed and you will not have any visits. That's the danger here. Make sure that you remove it immediately after step (2)

4) Login to GA and create a Custom Filter for this cookie. Provide the values as shown in the figure below and select the profile (i.e. your blog address) that you want to exclude. Make sure that you copy the exact filter pattern that you gave in step (1) above.


You will have to wait about a day until you confirm that your visits are now excluded.

Reference:
The content of this article is based on this discussion thread on the Analytics Help user group. I thank all the contributors to that thread.

Wednesday, February 20, 2008

HOWTO: Ignore your visits from Feedjit

As I mentioned in one of the previous articles, Feedjit offers a simple yet elegant set of widgets to monitor blog traffic and page popularity. The power of those widgets is their simplicity. You can install them in no time, and they load up very quickly.

Another feature I liked most is the ease in which we can ignore our own visits (or internal visits as they are called sometimes) to the blog. Just at the click of a button, it will install a cookie and you are done.

Here's a simple illustration on how to do it.

Click on the "Options" link at the bottom of your widget.


Then click "Ignore my browser" and it will install the cookie to ignore visits from that particular browser.


Once you ignore, the link will change to "Stop ignoring me", which you can always use to stop ignoring your visits.

You will have to do this for each browser (i.e. Firefox, IE etc) that you use to visit your blog.

Related Posts Table using CSS

Introduction

This tutorial will show how you can add a custom CSS class (in fact, a set of classes) to your blogger template to display the related posts of a given article inside a neat table. I searched for a suitable Related Posts Widget which can do a similar job, but in the absence of such a widget, I decided to write a small CSS class as an alternative. Although this requires us to maintain the related post links manually, the look and feel we get from it is what I expected to get from a widget.

The Task

First of all, let us take a look at the kind of effect that this CSS class can bring in. The following figure shows a Before and After comparison of a set of related posts links.


As you can see in the After view, by applying a simple CSS class, we can get our related posts to be highlighted effectively. This way we can ensure that the related posts stand out from the rest of the article while being not too distant from it.

The Steps

The first step is to incorporate the following piece of CSS code in to your blogger template. You can simply insert this by going to the Edit HTML mode of the Blogger template editor. Just copy and paste the following code in to the skin area of your template. (See this article for a detailed explanation, with screen shots, of how to do it)

/*
Custom set of CSS classes to display related posts.
http://bguide.blogspot.com
2008 Feb 07
*/
.rel-posts
{
width:430px; height:auto; border:1px solid #B3B3B3;
margin-right:10px; float:left;
}
div.rel-posts p:first-child
{
background-color:#82a0bc; color:#ffffff; padding:5px;
font-size:100%; border-bottom:1px solid #B3B3B3; margin:0
}
div.rel-posts ul li
{
text-indent:0px; font-size:100%;
}

There are 3 underlined properties in the above code, which you can use to customize the table to match your blog's template. The width property controls the width of the table. The background-color is the color of the header row and color is the font color in which the table title (Related Posts in this case) is displayed. (See this article to learn a very simple technique to pick the color values from anywhere in your blog template)

Once you place the above code in your template, it is available to be used from within the Blogger editor. The next step is to apply the template to the related posts links in your article.

Before applying the CSS class, however, you have to manually create the set of related links as you would do normally. Insert them as a simple bullted list and then link them to the relevant posts using the Link button. For example, the related posts for this same article will be as follows.


After that you have to switch to Edit Html mode of the editor. At the end of your post, you will see the related posts you created inside a markup such as the following.

Related Posts
<ul>
<li><a href="...">How to add a ...</a></li>
<li><a href="...">How to customize ...</li>
</ul>

To apply the style, all you have to do is to put the bulleted list inside a div element. Don't feel intimidated even if you don't know much about HTML. It's very simple. While in the Edit Html mode, enclose the above bulleted list using the div element shown below.

<div class="rel-posts"><p>Related Posts</p><ul>
<li><a href="...">How to add a ...</a></li>
<li><a href="...">How to customize ...</li>
</ul></div>

The lines you need to add are shown in red. It is very important to note that you have to replace the existing Related Post line with the first line of the above code snippet. The title of the table is enclosed inside a paragraph (p) element. (Another thing to note is the fact that I have removed the newline between the p element and the ul element and also between the closing ul tag and the div tag. Blogger editor inserts a br element for every newline, so that inserts an additional line to our table. The newline is deleted to avoid that situation)

Switch back to the Compose mode and finish your article and publish it. You will see your related posts in a neat table as you saw in the first figure above!

If you are a non-technical person, do you feel that this article is too complicated? Please let me know.

Note: You are free to use the above CSS class. If you choose to do so, please link to this article from your blog/site.

Customizing AdSense Ad Units

Introduction

This is a simple tutorial on how you can customize the AdSense Ad Units to match your blog's template colors. The good news is that you don't need any advance image processing software or you don't need to be an image processing expert to do it. I will tell you how you can do it using very simple tools such as Microsoft Paint and the Calculator!

The Task
First let's take a look at the Before and After views of the Ad Unit that we are going to customize. (For this example, I have used a Link Unit but it doesn't matter)

The figure below shows a basic 180 x 90 Five Link Unit button, which you can easily add using the Add Page Element wizard in Blogger.

The Before view has a white background which does not match with the column's background color. It is also nice if you can match the text color to the color of the rest of the text in the column. The After view shows the customized unit.

The difficult part is to get the exact color match to those in the background and the text. Let's see how we can easily do this with the simple tools mentioned above.

Initial Work

Before we proceed, we need to decide which of the ad unit's color elements should be customized (Read this article to understand the 5 basic color elements available for customization). Since we are using a Link Unit, the Text and Url color elements are not relevant. We only have to match the Border, Background and the Title elements.

Next we need the exact match for the RGB color values. Each RGB color is represented using a number such as #6699cc and we can use the simple technique described here to find out those values of the colors that we need to match.

Using that technique we can find out the color values we need for the Background, Title and Border elements (If you customize an Ad Unit, you have to match the RGB values of Text and Url elements as well).

Now we can proceed and customize the ad unit.

Customize the Ad Unit

Armed with the RGB values for all the color elements, open the ad unit in edit mode and simply type the relevant RGB value for each color element. Click SAVE CHANGES and you are done. You will have an ad unit that blends in perfectly with the colors in your blog/site!


That's it. Hope you found this tutorial useful. Let me know what you think about it.

HOWTO: Find the RGB Values of a Color

When customizing our blog, we come across situations where we need the exact RGB value of a given color. This article explains a simple technique to find the RGB values using MS Paint and the Calculator applications that come as standard applications with your operating system.

The technique might seem a bit tedious, but the advantage is that it needs no specialist software tools or graphics applications. And even if you are not a graphics expert you can use it easily.

Here are the steps to find the exact RGB value of a given color.

1) View your blog using your favorite browser, scroll down until you see the color you want to find the RGB value and press the "Print Screen" button (in your keyboard).

2) Open MS Paint and click Edit -> Paste or simply Ctrl+V. What you saw in the browser will be copied as a new untitled image.

3) Select the Color Picker tool and click on an area that has the color you want to match. (For example, in the figure below we are going to pick the gray shading in the background)


4) Now go to Colors -> Edit Colors... option and click on the "Define Custom Colors >>" button. The color you picked will be selected on this palette. At the bottom right hand corner you will see the Red, Green and Blue values you need. Note down the R,G,B values (given in decimal).



5) Now we need to find out the hexa-decimal values that correspond to those decimal values. This is where we use the simple Calculator. Open the Calculator application from Program -> Accessories. Switch to the scientific mode by clicking View -> Scientific.


6) By default it will be in the decimal number mode. Enter the R value (238 in this example) and click on the Hex radio button. The corresponding hexa-decimal value (EE in this case) will be shown in the dial.



The selected color in this case has the same value for R, G and B. (In fact, all shades of gray has the same values for R, G and B.) Therefore, the RGB value of the background color that we need is #eeeeee.

Repeat step 6 to find out the hex value for the Green and Blue elements, if they are different.

Tip:
If you find it difficult to pick a color, zoom the image by pressing Ctrl+PageDown or using View -> Zoom -> Custom... option.

RGB Colors

When you try to customize your blog, you come across situations where you have to deal with some cryptic numbers that represent colors. For example, if you want to customize your AdSense ad units to match your blog's colors, you have to edit its various color elements.

These numbers are called the RGB color values and they are specified as hexa-decimal numbers (Hexa-decimal means the base 16 number system and in the absence of digits beyond 0..9, letters 'a' through 'f' are used for values '10' through '15'). RGB stands for the 3 basic colors Red, Green and Blue. A computer knows only to work with binary (i.e. 0 and 1) numbers. So what we write in the above cryptic form is actually a 24 bit color number.

The 24 bits are divided in to 3 equal parts of 8 bits, each representing one of the basic colors. 8 bits is 1 byte, so we have 3 bytes of information making up a color value. This is, in fact, the color used to paint an individual pixel (or picture element) on the screen. So a white background means a background where each pixel in that background is displayed using the color value #ffffff.

An RGB color value is specified with a leading '#' character. The '#' tells the computer that the proceeding number is a hexa-decimal number. The next 6 digits represent the color values for R,G,B using two digits for each. Each of the main colors are divided in to 256 different gradients and a number between 0..255 is assigned to each gradient. In binary, 255 is the largest number you can write using an 8-bit number (i.e. 11111111). Decimal '0' maps to binary 00000000.

A value that we write using 8 binary digits can be written using only two hexa-decimal digits. So the value 'fifteen' is written as 15 in decimal, as 1111 in binary and as ff in hex. This allows us to easily represent a 24 bit binary number as a 6 digit hexa-decimal number.

Therefore the number #6699cc tells the computer that the color values are 66 for R, 99 for G and cc for B. Those values map to the decimal numbers 102, 153 and 204 respectively. Another shortened form to right RGB colors is to use decimal numbers as in RGB(102,153,224).

This article explains a simple technique to find out the RGB color values of a given color.

Color Elements of AdSense Ad Units

An AdSense ad unit has 5 basic color elements. Having an understanding of these elements are useful when it comes to customizing an ad unit to match your blog's colors. The figure below shows a mapping of those elements to an actual ad unit.


The elements are Border, Background, Text, Title and Url. Border is the area where you see the "Ads by Google" part. This is in fact the background color of that rectangular area. The Background element is the background color of the area excluding the border. Each individual ad comprises of 3 elements, its title, the descriptive text and the ad URL. The Title, Text and Url elements correspond to these 3 elements of each ad respectively.

Whether you customize your ad unit using the Blogger Layout Editor or your AdSense account, these are the 5 color elements available for color customizations.

The actual color of each element is specified using a cryptic number similar to the #6699cc given for the Border element in the above figure. They are called the RGB color values. This article explains the RGB colors and a simple technique to find the exact RGB value for a given color is found here.

Monday, February 18, 2008

HOWTO: Add a custom CSS class to Blogger

The layout and the presentation (i.e. styling) of Blogger blogs are handled by cascading style sheets (CSS). If you ever found that the default styles available from the Blogger's editor are not enough for the type of content you write, you can easily add a custom style sheet in to your template.

Even if you don't know much about CSS and HTML, this illustrated tutorial will guide you on how to add a given style class to your Blogger template.

Here's how to do it. This tutorial will show you how to add a style class to display code snippets. The code for the CSS class given below is also styled using the same class.

/*
Custom CSS class to display code snippets.
http://bguide.blogspot.com/
2008 Feb 03
*/
.mycode
{
border:1px dashed #aaaaaa;
background:#eeeeee;
white-space:pre;
font-family:monospace;
font-size:9pt;
line-height: 10pt;
height:auto;
width:auto;
padding:5px;
margin-left:10px;
overflow:auto;
}

Firstly, the above CSS class must be added to your blog template. Open the Blogger Template Editor and go to the Edit HTML mode. Locate the skin element of your template that has all the CSS code.

<b:skin><![CDATA[/*

/* All CSS code goes in between here */

]]></b:skin>

Copy the above CSS class in to the template anywhere in between the above two lines.


Once you do this the CSS class mycode is available to all the posts in your blog.

The next thing is to apply this style in to the code snippet that needs to appear in your article.

Switch to the Edit Html mode in the Blogger editor and place the code snippet inside a div element, the generic container element of HTML. Then set the class attribute of the div element as mycode. The mycode CSS class will preserve all the whitespace and therefore make sure that all the whitespace of the code snippet are arranged according to the way you want.

<div class="mycode">

/* Paste the code snippet here */

</div>

The following figure illustrates the Edit Html mode and how the code snippet is put inside a div element.


Once you do that the code snippet will be styled similar to the snippets in this article. You can also add other style sheets by following the same steps given in this tutorial.

Note: You are free to use the above CSS class. If you choose to do so, please link to this article from your blog/site.

HOWTO: Get the Spam Blog status cleared

If your blog is marked as a spam blog you can submit a request to Google to get it humanly reviewed and cleared.

After blogging for nearly two months and a handful of posts, I had one of my blogs marked as a spam blog. All of a sudden I had to type in a verification word for every new post or edit I do. I thought it must be an additional step to ensure that it's a human indeed who's posting. One day I casually clicked on the red colored help icon (?) next to the word verification and then only I realized that my blog is marked as a spam blog.

The help page said that I can submit a request to get my blog manually reviewed by Google to get the spam blog status cleared. So I did and within two days I got a mail from Blogger Support that my blog is reviewed and cleared. So I'm back to posts without word verifications. :-)

I just can't think of a reason as to why my blog got marked as a spam blog. I did not post frequently and all my content was original and not just copy and paste work. Blogger Help states that blogs that perform link spamming get marked as spam, again something that my blog didn't do. Nevertheless the spam detection algorithm thought that it's a spam blog and I think Google should improve on it. However, the Blogger Support was quick to respond to my request and clear my blog.

If you, too, have to enter a word verification to post to a valid blog, go ahead and get your blog cleared.

Feedjit – Real time Web Traffic

Feedjit offers an exciting set of widgets to monitor the traffic to your blog or web site in real time. They are very lightweight and easy-to-install widgets and you can set up them in no time.

There are two main types of widgets.

  • Widgets that show Live Traffic
  • Widgets that help to guide your visitors to the best content in your site
Traffic Widgets
The traffic widgets either show a list or a map overlay of recent visits. The map widget is a miniature version and clicking on it will give you an expanded view of the same data.

The list view gives the city, country, and the source page of the incoming visitors and lists the last 10 visits.


The expanded map view which is an overlay over Google Maps shows the last 100 visits by country, and clicking on a given visit will show you the pages viewed from that visit.


Content Widgets
There are two content widgets; one that shows a Recommended Reading List and another which shows Page Popularity.

The Recommended Reading List is a good way to minimize your bouncing rate (i.e. visitor who leave your site from the page they entered itself) and the recommendations are derived from the viewing of past visitors. It is similar to Amazon’s “Customers Who Bought This Item Also Bought” recommendation.

The Page Popularity widget lists the 10 most read articles in your site and offers an effective method of guiding your visitors to your best content.

Once you install a widget you get a separate stats area for your site or blog in the Feedjit’s main site. The expanded map view of your site is available from this stat area.

Installing a widget is really simple. Blogger and Typepad users can do it with a single click.




Clicking on the Blogger button will take you to Blogger’s Import Page Element page and once you click ADD WIDGET it’s in your blog. Alternatively you can copy the Javascript and add it using Blogger’s add HTML/JavaScript element feature.

Compared to Google Analytics (GA), the Feedjit widgets are much simpler and easy to use. They offer you real time traffic updates whereas GA is updated once a day. GA offers a far more advance and comprehensive set of statistics but if you simply want to keep track of visitors to your site, Feedjit is ideal. What's more you can easily filter out your own visits to the blog at the click of a button. So you can track the actual external visitors, which is a real plus. You can also customize the color scheme and width of each widget to match your site.

Sunday, February 17, 2008

Layouts Wire Frame Editor

Introduction

This is the third in a series of articles on 3 columns. In the second article I said that you have to perform 4 steps to convert a 2 column template in to a 3 column one. However, I did not explain the 4th step, which is the tweaking of the Layout Editor. Let's see how we can do it.

This blog itself uses a Denim template customized in to 3 columns. You probably have noticed it already. For the purpose of this article, I will use the Wire Frame Editor of this blog as an example.

The Layout Editor

When you click on the Layout tab of your Blogger console, the default view is the Page Elements view. This is where you see the Add and Arrange Page Elements heading and you can use the drag-and-drop feature of the editor to rearrange your page elements.

Here's the default view of the Layout Editor.


All is well until you add your third column using the first 3 steps described here. But the moment you add your third column the Layout Editor gets skewed and some times you find that you can't even edit your first sidebar.

This is how my editor looked like immediately after adding the third side bar to the right of the existing sidebar.


This is not a desirable situation. There's little meaning in adding a 3rd column if you can't add page elements to it, isn't it?

How can we correct this? The answer lies in the body#layout CSS selector. Remember the ID selectors we discussed in the previous article? The body#layout is another ID selector but limited to the scope of the body element. However, we can do without a detail understanding of this selector.

Page Structure Tweaks

Usually the Blogger template has a section called the "Page structure tweaks for the layout editor wireframe". This is found right at the end of the skin of your template. (Some templates don't have it. For example, the default Denim template didn't have one)

This is where the body#layout selector is used to define the layout of our template for the wire frame editor. The notation seems a bit cryptic but this is what it does.

The main purpose of the "Page structure tweaks" section is to define the widths of the various wrappers (the components of the template skeleton) in our template. The best way to explain is to use an example.

Here's the tweak I added to my modified 3 column template.

/** Page structure tweaks for layout editor wireframe */

body#layout #outer-wrapper,
body#layout #content-wrapper,
body#layout #header,
body#layout #footer-wrapper {
width: 760px;
}

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

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

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

The first rule in this part tells the Layout Editor to use a width of 760 pixels for the outer, content, header and footer wrappers. (In the Denim template header is used instead of a header-wrapper). The actual width of the modified template is 1000 pixels. When the Layout Editor uses the actual width, we end up with the skewed Layout Editor that we saw above. Using this tweak we can ask the Layout editor to use a width that is less than the actual size. In other words, we tell the editor to use a scaled down version of our template.

Scaling down the outer wrappers is not sufficient. We have to do the same for the child containers (i.e. main and sidebar wrappers). The main-wrapper in my modified template is 504 pixels and the sidebars have widths of 240 and 200 pixels respectively. Those 3 add up to 944, which is more than the 760 we gave for the outer wrappers. So we define proportionately (this proportion can be approximate) smaller widths of 400, 150 and 150 for the main, first sidebar and the second sidebar respectively. Now they add up to 700 and therefore fits within our scaled down wife frame.

That's all to it. The finished result is shown below.


Note: You might have to do a little bit of trial and error with your particular wire frame editor to get it right. Adjust the widths of the various elements few times until you get it right.

Saturday, February 16, 2008

Adding a Third Column

Introduction

The standard Blogger templates are two column templates. One of the most frequently asked questions on the Blogger forums is "How can I add a third column to my blog?" Many bloggers want to have a third column because that gives more room above the fold, to play around with widgets.

This is the second in a series of articles on 3 column templates. In the previous article, I explained the basic skeleton of a Blogger template. If you are not familiar with the many wrappers (outer, content, sidebar etc.) in your blog template, I strongly suggest that you read it first.

This is not a step-by-step guide on how to modify a given Blogger template in to 3 columns, but this will give you the confidence to modify one, on your own. Trust me, once you finish reading this, you will feel pretty much comfortable with the idea of 3 column templates. (I'm afraid it's a very long post though. It could not be made any shorter)

2 Columns

First let's take a look at the normal scenario. A stripped off version of a 2 column template, with the basic page elements highlighted, is shown below.


This is the skeleton of your template. Of course, you don't see it because the sections are not highlighted as you see in this instance. Since a detailed discussion of this skeleton and the div elements that make up it was given in the previous article, I will not focus on the body element of the template here. Instead, we will dig a little deep in to the Cascading Style Sheet (or CSS) behind the skeleton.

The styling and the layout of the page elements such as the main post area and the sidebar are controlled using CSS rules. For example, it is a CSS rule that tells the browser to place the sidebar to the right of the main post area and not to its left. All the style sheet rules of a template are found inside the skin element of your template. Open your template in the Edit HTML mode and search for the string <b:skin> and scroll down. You will see something like the code given below.

#outer-wrapper
{
width: 682px;
}

#header-wrapper
{
width:660px;
}

#content-wrapper
{
width: 660px;
}

#main-wrapper
{
width: 410px;
float: left;
}

#sidebar-wrapper
{
width: 220px;
float: right;
}

#footer-wrapper
{
width: 660px;
}


(I have taken out some properties from the actual CSS of the skeleton page. The full page can be seen here. If you want to see the full CSS, right click on the previous link and save the page to your disk. Then open it using a text editor such as the Notepad)

The header-wrapper, content-wrapper and the footer-wrapper (yellow boxes in the figure), all have a width of 660 pixels. (i.e. 660px). Because I wanted to highlight the outer-wrapper (the gray box), I have given it a padding of 10 pixels. Hence the width of the outer-wrapper, the grand container which surrounds all other wrappers, has a width of 682 pixels (i.e. 660 + 20 pixels for the left and right padding + 2 pixels for the borders of child wrappers). Note, however, that a real template does not have this padding and therefore outer-wrapper will also have a width of 660 pixels.

Each of the sections in the above code snippet are called id selectors in CSS jargon. An id selector starts with a hash (#) character, then has some string id, followed with a set of rules enclosed within an open brace ( { ) and a closing brace ( } ).

Don't worry too much about it, this is what you need to know about it. When a browser find an HTML element that has the id property set to some id, it will search whether it can find a matching id selector from the CSS rules applicable for the HTML page. In our case, the HTML element is one of the div elements in the body section and the CSS rules are the ones defined in the skin of the blog template.

Consider the <div id="content-wrapper"> element. This div element has the id content-wrapper (note the absence of the # character) and when the browser finds this div, it will look for an id selector that looks like #content-wrapper. If an id selector is found, the style rules defined inside that id selector will be applied to the div. All the other div elements are also styled the same way.

Confused by now? Then take a break, read the first article and come back again.

Adding the Third Column

Now let's get down to the real job. We will take our 2 column skeleton and convert it in to a 3 column skeleton that has two sidebars on the right side. (For a 3 column template with left and right sidebars, look at the fourth article in this series.)

Before you convert a template in to 3 columns, you need to decide where to put the 2nd sidebar (i.e. whether you want the both sidebars to the right of the main post area or whether they should be on the left and right of the main post area). Having sidebars to the left of the post area can delay the loading of posts, as the page elements load in a left to right order. However, its up to you to decide where to put it.

Another important thing you must do is to check whether your template uses images in the header, footer and the background. Templates such as TicTac and Rounders do use images and therefore you need to do additional work to customize them. Minima and Denim, on the other hand, don't use images and therefore are easy to modify.

In this article, we will only focus on modifying templates that do not use images. I will later explain how to modify a template that does use images.

The Steps

You have to perform 4 steps to convert a 2 column template in to a 3 column one.
  1. Add a new id selector for the 2nd sidebar wrapper.
  2. Introduce a new div element, as a child of the content-wrapper, to be the placeholder for the 2nd sidebar
  3. Expand the width of the parent wrappers to accommodate the new sidebar
  4. Modify the CSS rules for the wire frame Layouts editor
First step is to add a new CSS id selector. Just copy and paste the existing id selector named #sidebar-wrapper (some Blogger templates just call this #sidebar) and rename it to something like #sidebar-wrapper-two.

The changes we do to the template skin are shown in red below.

#sidebar-wrapper
{
width: 220px;
float: right;
}

#sidebar-wrapper-two
{
width: 220px;
float: right;
}


The second step is to introduce a new div element to the body of the template. We place this div after the div for the first sidebar, as a child of the content-wrapper. The additions to our template are shown below.

<div id='content-wrapper'>
<div id='main-wrapper'>
<p>Main</p>
</div>
<div id='sidebar-wrapper'>
<p>Side Bar</p>
</div>
<div id='sidebar-wrapper-two'>
<p>Side Bar Two</p>
</div>
</div>

In the actual Blogger template, you have to copy the div and the <b:section> element as well.

After we complete the first two steps, our skeleton page will look like this.


Our skeleton looks a bit crammed, isn't it? Now what's wrong here? We just inserted the 2nd sidebar but we never provided room for it inside the parent wrappers. Therefore the sidebar we just added gets pushed down. (The full code for this crammed 3 column skeleton is available here)

When we complete step 3, this problem will be solved. We have to provide space for this new sidebar inside its parent container. Since we just copied from the existing sidebar, the 2nd sidebar also has a width of 220 pixels, the amount by which we should expand the parent container, content-wrapper.

#content-wrapper
{
width: 880px;
}


We increased its width to 880 (i.e. 660 + 220) and the result is shown below.


Oops! What happened? Increasing only the content-wrapper is not sufficient. Then our blog looks skewed. To balance out, we have to expand the header-wrapper, footer-wrapper and the grand parent, outer-wrapper by the same amount. Add 220 to all of them.

#outer-wrapper
{
width: 902px;
}

#header-wrapper
{
width: 880px;
}

#footer-wrapper
{
width: 880px;
}


Before we look at the result, there's another catch that I have to explain to you.

The existing sidebar is, by default, floated to the right. (Floating is the means by which we decide the positioning of page elements relative to other elements. We don't have to discuss it in detail here.)

In this example, we will float the new sidebar to the right of the existing sidebar. To keep the original sidebar on the left, we have to modify its float property to left. (In the Blogger templates, the two variables $startSide (which is by default left) and $endSide (which is by default right) are used instead of the actual values 'left' and 'right'). So that change is:

#sidebar-wrapper
{
width: 220px;
float: left;
}


When we do all this, we have the following 3 column skeleton template.


There it is! What you have been waiting so far. (Thank you for your patience if you read this long post this far). Starting from a 2 column skeleton, we modified it to a 3 column template with 2 sidebars on the right. The one in dark blue is the new sidebar.

Wait a minute. I didn't tell you about how to modify the wire frame editor, did I? No, I will not discuss it here as that will stretch this article even more. See this article to find out how to do that.

Summary

So in summary, we learned about
  • the skeleton of a 2 column template
  • how CSS rules are hooked up to the page elements through id selectors (Note, however, that there are many other types of selectors in CSS)
  • how to add a 3rd column to your Blogger template
  • how floating can be used to position the sidebars
If I managed to make you feel confident about changing in to 3 column templates, then I have achieved my objective. I would love to hear your feedback.

(Note: All the skeleton HTML pages used in this article are available here)

Thursday, February 14, 2008

Skeleton of a Blogger Template

Introduction

All the standard templates available on Blogger consist of only two columns; a main column where all your blog posts appear and either a left or a right sidebar where you can put various widgets such as About boxes and AdSense units.

2 columns are somewhat limiting with respect to the amount of content you can have above the fold. (i.e. in the area above the bottom edge of your browser that is readily visible without having to scroll down) If you can squeeze in an additional 3rd column, that gives you more room to play around with.

This article will explain the basic skeleton of a Blogger template and will lay the foundation for my next article Adding a Third Column. If your are comfortable with things such as outer-wrapper and content-wrapper, then you can skip this article and read the next article straight away. If not, I strongly suggest that you read this first.

The Skeleton

Before you do any changes to your template, you need to understand its basic structure. The key to being able to modify your template is to know how it is made up.

The skeleton of a Blogger template is made out of div elements, the magical generic container element of HTML. I used the word magical because of the amazing flexibility offered by the div element with respect to the layout of a website. You will see how flexible it is to change the layout of a blog using the div elements and a little CSS, in the next article.

The figure below shows the main compartments of a template.


As you can see, outer-wrapper is the highest level container that encompasses every thing else. Think of it as the grand parent of all the containers in a given blog and it is shown in a gray shading in the above figure. Next level, or the first level child elements (if I'm to use a technical term), consists of 3 containers. They are, from top to bottom, the header, the content and the footer wrappers and are shown in yellow. The light blue boxes are the lowest level of (or the inner-most) containers, and they form the main posts area and the sidebar. Those two are the grand children in this family of containers.

So that is the skeleton or the framework of your template. But we will take a look at a little bit of HTML to get an idea of how this is done in the code. (Don't worry, it isn't that hard)

A Stripped Off Template

Given below is a stripped off, minimalistic version of the body element of your Blogger template. When we take out all the widgets, sections etc. this is what we get. (The full HTML page, including the CSS styles, can be found here)

<body>
<div id='outer-wrapper'>
<div id='header-wrapper'>
<p>Header</p>
</div>
<div id='content-wrapper'>
<div id='main-wrapper'>
<p>Main</p>
</div>
<div id='sidebar-wrapper'>
<p>Side Bar</p>
</div>
</div>
<div id='footer-wrapper'>
<p>Footer</p>
</div>
</div>
</body>

Remember the div element which I mentioned above? The skeleton you see in the above snippet is made entirely out of div's. For each of the wrappers, there is a matching div and the grand parent outer-wrapper is the outer-most div. The others are nested (i.e. included within the <div> and </div> tags of its parent) according to the containment hierarchy we saw in the above figure.

The following screen shot shows how this skeleton page will render on a browser window.


Do you now see it? Your blog, too, has all these boxes. But they are invisible, because in a website, you don't usually highlight the div elements as I have done in the skeleton page. I have applied a background color and dotted borders to each of them, to make them look concrete.

I will not dig in to the CSS behind the skeleton in this article. But when you add a 3rd column to your blog, you have to tinker with the CSS a bit. Let's see how to do that in the next article.