Saturday, April 29, 2006

Blogger Categories: A Simple Method

Update: Please note that this is an old post written before Blogger Beta (now out of beta and referred to as New Blogger for want of a better name) was introduced. With New Blogger, Labels was introduced and labels is just the same as the Categories referred to by other blogging platform. Labels is an easier, automatic replacement of what had been described as Categories in this post. Refer to new labels for old classic Blogger template


What are categories. Basically it is a way of organizing your posts so that it can be easily found by categories or types. It may as well be called post directory or something.

Blogger is free and nice, but unfortunately has some shortcomings. One of them is the lack of a provision for doing categories. There exist many methods for doing categories and most of them involve tempering with the template. Here is one simple, straight forward method for doing categories for Blogger that doesn't require one to make any changes to the template except adding some hyperlinks to it. I got the idea for this method from the website "I want to be a millionaire".

First, you have to create an account for del.icio.us. Even if you already have a del.icio.us account, it is advisable to create a new one specially for this purpose. If you are not familiar with del.icio.us, you can read more about it here: "Introduction to del.icio.us". You will then have to tag each INDIVIDUAL post page (permalink) in your blog with the name of category (single word) to which you want the post to belong to. If it is a two or three word category, use underscore or hyphen to link them into a single "word". The categories that I intend to use for this blogs, are for example, Introduction, Basic, General, Blogger specific, etc. You can tag the post with more than 1 tag if you wish. For example, a post that is both basic and specific to Blogger can be tagged with the tags basic and blogger-specific. (Note: To get to the individual post page, click on the link in the PREVIOUS POSTS or the ARCHIVES section or click on the permalink (represented by a time stamp) at the bottom of the post in the index page).

Now all you have to do is to add this to the sidebar section of your template:

<h4>CATEGORIES</h4>
<a href="http://url-tagpage1.com">Tag 1</a><br />
<a href="http://url-tagpage2.com">Tag 2</a><br />

replacing the tagpage URL with the actual URL of your tag pages. For example, the del.icio.us account I created for this blog is bloggertricks and I have created 2 tags - general and blogger-specific. So the URL for tagpage1 is http://del.icio.us/bloggertricks/general and the url for tagpage2 is http://del.icio.us/bloggertricks/blogger-specific. The codes I will add to the sidebar section of the template will be

<h4>CATEGORIES</h4>
<a href="http://del.icio.us/bloggertricks/general">
GENERAL</a><br />
<a href="http://del.icio.us/bloggertricks/blogger-specific">
BLOGGER SPECIFIC</a><br />

If you have more categories, just add more hyperlinks.

(If you don't want to type the tagpage url yourself, just log into your del.icio.us account, then at the top-right hand corner, click on the tag and you will be taken to the tagpage. Just copy the url from the address bar)

Once you have these in place, and as you add more posts, all you have to do now is to tag the posts with the appropriate category and it will be classified in place accordingly.

NEWER POST    OLDER POST

Friday, April 28, 2006

Adding Google sitemap to your blog

NOTE: I am having serious doubts about Google sitemap for Blogger (blogspot) as we have no access to the servers and thus cannot do a true Google sitemap. The method given to us by Blogger is a workaround which uses the feed as a Google sitemap. I don't know how effective it is, especially if you set your feed to "short". There are others expressing doubts, and I have no time to do a proper research. So read this post with a pinch of salt.


Adding Google sitemap to your blog is an easy way to add your blog URL to Google index and get your blog crawled. With Google sitemap, you can get better crawl coverage and search results to help people find more of your web pages. You also get detailed reports about how Google directs traffic to your blog and how Googlebot sees your pages. (Note: there is some controversy over the usefulness of this Google sitemap. with Blogger, you have no access to Blogger's servers and thus have no chance to upload a real sitemap. Google came up with a way for bloggers using Google Blogger to add a kind of sitemap to their blog by making use of the feed. Note this this is in no way making a real sitemap, but I supposed it is still better than nothing. This would be especially true if you set you feed to "Short" and not "Full". I set my main blogs feed to short and am thinking a doing my own version of a sitemap which will consist of a post with links to all the posts in the blog and place a link to that post in the sidebar of the blog. In this way, there will be a links for the search engine spider to follow all the posts. However, this will involve updating the post each time you make a new post, and a lot of work if you frequently update your blog. Maybe I would do both. This is because although some doubt the usefullness of adding a Google sitemap for a blog this way, you will get a report of any problems that the Google spider may encounter when indexing your blog and having my own version of a sitemap in the sidebar will help the spider crawl all my posts.

How to add Google sitemap to your blog

To add Google sitemap to your blog, go to Google sitemap, and sign in with your Google Account (create one if you don't have one). In the Add site box, enter your blog url as shown in the screenshot below, and click OK. (In this post, there will be many screenshots. To enlarge them, click on the screenshot)


You will get a "Your site has been added to your account. Verify your ownership to view detailed statistics and errors for it" message and a button to verify your ownership.

Click the "Verify" text hyperlink, and you will be taken to a selection box to select your verification method.

Choose "Add a Meta tag". A meta tag will be generated for you.


Highlight this meta tag and copy it to clipboard. Sign into Dashboard, select your blog, click TEMPLATE tab and paste the meta tag in between the <head> and </head> tags. Save and republish. Check the "I've added the META tag in the home page of http://your-blog-url.com/" box and click the [verify] button.

There will be a message "We do not know about all the pages of your site. [Submit a Sitemap] to tell us more about your site. Click [Submit a Sitemap] and in the "Choose type..." selection box, select "Add General Web Sitemap".

Tick
[tick] I've created a Sitemap in a supported format. [?]
[tick] I've uploaded my Sitemap to the highest-level directory to which I have access.
[tick] My Sitemap URL is: [ ]

then enter the site feed URL into the "My Sitemap URL is: box. You can get the site feed url of your blog from SETTINGS. Click SETTINGS, SITE FEED tabs in the Dashboard. In the case of blogspot, just add /atom.xml to the end of the blog URL. (For example, the site feed URL of this blog is http://blogger-tricks.blogspot.com/atom.xml.) Then click "Add Web Sitemap" and you are done.

Update 22 April 2007: This post was written before New Blogger (formerly Blogger Beta) was introduced. If you are with New Blogger, use the feed URL. There are 4 possible feed URL for the New blogger:

http://yourblog.blogspot.com/atom.xml
http://yourblog.blogspot.com/rss.xml
http://yourblog.blogspot.com/feeds/posts/full
http://yourblog.blogspot.com/feeds/posts/default?alt=rss

substituting "your blog" with the actual name of your blog. The feed found by Feedburner for this blog are:

http://blogger-tricks.blogspot.com/feeds/posts/default
http://blogger-tricks.blogspot.com/feeds/posts/default?alt=rss


There is one further thing you can do, and that is to enable enhanced image search. At the bottom of the page, tick "Enhanced Image Search".

What does it mean to opt-in to enhanced image search? If you choose to enable enhanced image search, Google will use tools such as Google Image Labeler to associate the images included in your site with labels that will improve indexing and search quality of those images.

Ping Google sitemap

Now, whenever you update your blog, just ping Google sitemap by filling in the form below. Enter your blog feed url (***.blogspot.com/atom.xml) and click "Ping Google Sitemap" button.



Bookmark this page so that you can return to it whenever you want to ping Google Sitemap, which should be whenever you update your blog.

Update 11 July 2007: I think I need to draw your attention to My Advice on Google Sitemaps - Verify, but Don't Submit. There was a comment in that post which makes me want to rethink and hopefully do some research when I have time and if I remember.

For your convenience, I paste that comment from that site here:

"Hello i'd like to share my experience of sitemaps with you... i have a small site - 170 pages that i launced with a sitemap - after 3 months i was frustrated with only a handful of pages showing up in the SERPS - so i removed the sitemap and voila - within 48 hours 90% of my site was crawled and my traffic rocketed. I used a Google sitemap generator tool to create the sitemap in the first place - probably wasnt correctly formatted but it still verified ok with G. The moral of the story - IMO don't use a sitemap unless you A) Know exactly what you are doing and B) you have to."

You have any information or experience regarding this, I hope you will comment and let us know.

Books from Amazon

Blogging: Genius Stragies for Instant Web Content by Biz Stone, former Senior Specialist on the Google Blogger team

Complete Idiot's Guide to Creating a Webpage and Blog

101 ways to Boost Your Web Traffic: Internet Marketing Made Easier

NEWER POST    OLDER POST

Thursday, April 27, 2006

Tip: Getting Blogger to host your pictures for the profile, etc.

Update 8 February 2007: This tip no longer work for New Blogger (formerly Blogger beta). For instruction on how to do it with New Blogger see Getting New Blogger (formerly Blogger Beta) to host your photo for the profile, sidebar, etc.

picture of book cover of Blogger for DummiesWhen you prepare your profile for your blog, Blogger doesn't offer a provision to upload a photo, but only a box to enter the url of the photo already hosted on the web. Similarly, if you want to have an image for the heading of the blog, or as background of the blog, you can't simply upload it to Blogger. You must have it have it already hosted on the web.

Here is a tip on how to get Blogger to host the pictures for your profile, headings, etc. Simply publish it in a post, an empty one if you like, with only the picture. Then, you have 2 way to get the URL. One is to make sure you are in the EDIT HTML in the post editor of that post. Then look for the HTML for the photo, which should look something like this (click on screenshot to enlarge it):
HTML of photo uploaded via Blogger
You will notice two links in the HTML for the photo. One links to the full size image on its own page and the file size is larger. The second link (highlighted in blue) links to the photo you see on the blog page and the file size is smaller. You should copy the second one if file size is a problem (Blogger impose a maximum 50k for the profile photo). Otherwise, (like for example, you want it for your heading), copy the first link.

If you are not comfortable with HTML, there is another way. Go to that post where you have the photo on the web and click on the picture. It will take you to a page with only the picture. Copy the url from the address bar. The easiest way to do so is to highlight it, right-click and select copy. Try it by clicking on the fake book cover of my book "Blogger for Dummies" at the top left hand of the post.

If you are worried that posting the picture will interfere with your blog, there are various ways to make it inconspicuous. You can reduce its size, as I have done for the picture on this post. (To reduce the photo size, in the COMPOSE mode, grab the corner and drag it. This will keep the aspect ratio.) Or you can post it to a blog specially created to upload pictures. Or after you have obtained the url, you can simply resave it as draft or even delete it. The photo will still remain on the web.

BTW I welcome comments about whether the above instructions are easy or difficult to follow, as it will help me improve the blog.

NEWER POST    OLDER POST

How to make a picture as a background

Update: With the new Template Designer, it is now very easy to add or change background for your blog. Sign into Blogger.com

Dashboard > Template Designer > Background

and there you can change your background color or image at will without having to directly edit the template.


The first thing you have to do is to choose an image where the color of the image and the text of the blog are compatible and the color doesn't clash. Otherwise the text will be very difficult to read. Another thing is the size of the image. If the image size does not fit the whole background, it will normally repeat itself unless you choose not to do so (see last part of post). If it repeat itself, to make the background pleasant, you will have to ensure the repeated images merge properly. For my demo blog Self Improvements, I chose a cloudy sky with white and light blue as they merge into each other well while the black text on the light background will still be clearly readable.

When you have selected your image and have stored it in your computer, then to make the picture as a background, you first have to post the picture on the web somewhere or host the picture with a photo host like Photobucket. Refer to "Getting Blogger to host your pictures for the profile, etc." if you want Blogger to host the image. Get the url (example http://photo-url.jpg) of the picture, then sign into Dashboard, select the blog, click TEMPLATE tab, and look for this block of CSS code in the template. It will be somewhere in the beginning of the template:

body {
background:#fff;
margin:0;
padding:40px 20px;
font:x-small Georgia,Serif;
text-align:center;
color:#333;
font-size/* */:/**/small;
font-size: /**/small;
}


Then add this line of code
background-image:url("URL of photo");
to the above, as shown below (added code in red)

body {
background:#fff;
background-image:url("URL of photo");
margin:0;
padding:40px 20px;
font:x-small Georgia,Serif;
text-align:center;
color:#333;
font-size/* */:/**/small;
font-size: /**/small;
}

replacing URL of photo with the real url of the picture, for example
http://photos1.blogger.com/blogger/5611/753/1600/sky-19.0.jpg

If you don't want the image to repeat in the background, all you have to do is to add another line to the code: background-repeat:no-repeat;

So your CSS code become:

body {
background:#fff;
background-image:url("http://photos1.blogger.com/blogger/5611/753/1600/sky-19.0.jpg");
background-repeat:no-repeat;
margin:0;
padding:40px 20px;
font:x-small Georgia,Serif;
text-align:center;
color:#333;
font-size/* */:/**/small;
font-size: /**/small;
}

NEWER POST    OLDER POST

Find help, info, instructions, tips, tricks

Tip: Use search box below or this box, labels in the first right sidebar, archive, ctrl+F for this page or sitemap to find topics