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.