Total Visitors

Archives

How to add META tags into your blog?

Do you want to improve your blog value, get more hits, and rank high on search engines? Then you must optimize how your blog is indexed in a search engine.

While there are lots of factors involved in building quality blogs that can draw huge traffic in, having simple things right in the beginning is as important. One of this simple thing is getting your blog indexed properly with the right description & keywords to optimize search engine rankings (known as Search Engine Optimization or SEO).

To get information, search engines use automated software agents called spiders, crawlers, robots, or bots to collect the a few words from a site or blog (typically the URLs, blog name, and blog description, and maybe some words in the early part of sentences or paragraphs) that will later be used as keywords to index the blog.

Because you cannot be certain which words are taken as keywords pertaining to your blog, it's most likely that your blog won't be indexed properly in search engines - in the worst case, your highly relevant keywords might not even be used to index your blog. When this happen, searches on keywords relevant to your blog may have your blog buried at the far end of the list of thousands and millions of pages. What a waste!

To have a control of what is read by crawlers on your blog to be indexed, you have to build what is called a META tag - basically a bunch of words that makes up the most relevant description and keywords of your blog. If the META tag exist, this is what the crawlers will read and index and get displayed on any searches related to your keywords.

Here's what a search on my blog looks like on Google. The description is exactly the one I have written in the META tag. The 1st search on the list shows the new META tag description that was made a few seconds before the snap. The old META tag is shown beneath it (22 hours ago).


There are basically 2 parts to a META tag: first is the META description and second is the META keywords. The description are what appears on a search. As you can see, if the description is too long, it'll be cropped as search engines only use a few lines to describe the blog. An optimum number of characters to use for META description is 150 (including spaces and dots).

For META keywords, you can use as many words as you want, but don't repeat the same word too many times (more than 5) to avoid keyword spam. Crawlers can identify keyword spamming easily - which won't make it good either for SEO.

To create a META tag, simply copy the code below and rewrite your META description and keywords (the red text):


Write your META description here. Keep it less than 150 characters.' name='description'/>
Write your META keywords here as many as you want separated with commas. Keep word repetition less than 5 to avoid keyword spamming.' name='keywords'/>


Then, place it in between the ..... section near the top part of your template XML code. It's best to put it just below the <data:blog.pagetitle/> code.

For more details:
Go to this Free META Tag Builder tool. It directs you easily to build a META tag, create the HTML or XHTML code, and guides to paste it into your blog template XML code.

Just for the fun of it, you can analyze your blog's original description and keywords by submitting your blog URL at the Free META TAG Analyzer before placing the new META tags in your blog - so that you can compare how it is indexed before and after the change.

http://www.ourblogtemplates.com/2008/01/how-to-add-meta-tags-into-your-blog.html

How to Add the Technorati Favorites Button?

Here's a few codes that you can implement to add the 'Add This Blog to My Technorati Favorites' button to your blog. The purpose for this button is to let your visitor s have an easier option to add your blog to their list of Technorati favorite blogs. This increases your blog popularity in Technorati listing.

I'll put down 3 codes for you to choose from, each with a different Technorati Fav buttons. Don't forget to change yourblogname.com to your own blog's URL.

Button 1:


yourblogname.com">
Add to Technorati Favorites


Button 2:
The Technorati image is rounder for this button.

yourblogname.com">
Add to Technorati Favorites


Button 3:

yourblogname.com">
Add to Technorati Favorites

How to insert Adsense directly into XML code?

Do you have problems inserting Adsense directly into your Blogger XML code without using the Page Element? For example, if you want to put it below the Post Title but above the post? Read a good instruction on how to do it here. If you want to put the code in the Post Page only but not in the main page, read how to do that here. Example: click on this post Title and see how the ads appear above this post (if you're not in the Post Page yet).

To do either of the above, you have to modify the Adsense code a bit. The modification is called parsing the code. Read more about it here and use this page to automatically parse your code.

Testing in different browsers using Browsershots.org

If you're a template designer or happen to redesign your blog on your own, you must want to know how it looks in other browsers than the one you're using.

It's easy enough to open up the few browsers you have installed in your computer and test your newly designed blog in it. But to know for sure that it works ok in all the browsers out there is next to impossible. Just to test in 2 different version of browsers, IE6 and IE7, are tough enough - as I've faced with previously.

I have the IE7 and can't have the IE6 installed in the same machine. There are options out there to install a virtual PC in your machine so that I can install IE6. But it requires quite a large space for the virtual PC alone, and there are some other things to get out of the way to get everything in place. So, thanks but no thanks!

Recently, a reader here mentioned about using Browsershots.org to test a new template in all the browsers out there. All of them! I tried it and basically this was where my testing problem ends. All the testing works beautifully.

Browsershots.org is an online free service that takes the URL of the blog to be tested and opens it up in all the different browsers on their machines. Screenshots, or snapshots, of the blog page in each one of the browsers are then taken and uploaded back within a a few minutes into the main page for your viewing pleasure/displeasure. From there, you can immediately see which browser works or not, and zoom in to a full page ( top to bottom of page) to see the details.

Here's the Browsershots.org main page:



Here're the screenshots (you can zoom each one to a full page):


There are limitations in that you can only have a number of screenshots (~300+) per day per IP, and ~60+ shots per website per day. Limitations can be lifted up by signing up into their service or paying for an extended period of priority processing.

At least for me, having only a few hundreds of screenshots is much better than not knowing how it looks in other browsers at all. My own experience is that almost all browsers work great with my templates - except IE5 and IE6. Since knowing this Browsershots service, all my new templates are good to go with IE5 or IE6.

In some cases, you may see that your new template doesn't open up well in one or two obscure browsers. Before you try to do more tweaking to solve the problem, check to see that browsers' usage statistics. It's not worth your effort to pull up your brain power just to make it look okay in a browser used by one person for every million internet users. W3schools can provide you a record of the current browser usage monthly statistics.

How to get rid of the Blogger navigation bar?


Here's a snapshot of a Blogger blog and the navigation bar (navbar) is at the top shown by the green arrow.

So, how do you get rid of it if you don't want it hanging on top of your blog? If you want to turn it on instead of off, read the section at the end of the post.

To Turn Off the Blogger Navigation Bar
Just copy the Navbar1 code below and paste it anywhere inside your blog XML file as a CSS code after the /* Variable definitions section. If you're not sure what this means, follow these steps:

#Navbar1 {
margin: 0;
padding: 0;
display: none;
visibility: hidden;
}

1. Login to your blog and click the Edit HTML tab inside the Template tab.
2. Inside the file, locate the section body { ..... } and paste the Navbar1 code below this section, after the closing bracket.
3. Click 'SAVE TEMPLATE'.
4. That's it. You're done.

Problems Downloading Templates

If you have problems downloading the templates here, follow these instructions:

  1. Download the XML file of the template that you want.
  2. Open the XML file in a text editor, like WordPad or Notepad++.
  3. Using the editor search function, find the text 'widget id'.
  4. All the widget id texts have lines that look like this: ''
  5. Change all the numbers to double digit numbers. E.g., change 'example1' to 'example11', 'example2' to 'example 22', and so on.
  6. Once you're done changing all the numbers in the widget id lines, save the template.
  7. Then upload the template into your blog from the Layout > Edit HTML > Upload button.
  8. You're done. Hopefully this works.
The idea is by changing the numbers to bigger numbers, you'll avoid having the widget numbers conflicted with the existing widgets with the same number.