ask-kp

The internet was abuzz with talk that Blogger.com site got hacked and was compromised. Blog owners suddenly found fake spam Posts in their Blogs which contained links to virus downloads and data mining sites. Some were faced with inexplicable web page load times and yet others noticed odd codes appearing in their templates. The natural reaction is to blame all these on the people responsible for the viral attacks, even though that might not be the case. In this article, we shall share with you some tips that we have learned on internet security and protection. This include the actions we can take to prevent or minimize the possibility of having Blogger blogs hacked or hijacked.

Is Blogger.com safe?

The article in BBC, Bloggers battered by viral storm, reported that the latest incidents were the work of a group of hackers who had been mounting attacks since January. They used spam messages posted on bogus sites or sent through email to trick users to download malicious programs. The links can sometimes be couched as Youtube links or digital greeting card links. Also, the email subjects contained informal internet jargon which led recipients to think that the mail came from their friends.

In an official response yesterday, Eric of the Blogger team had confirmed that “Blogger was not compromised. Instead, the blog posts are from bloggers whose machines were compromised by a Trojan horse. These bloggers had their mail2blogger email addresses in their computers’ address books … so when the malicious software spammed every address in their address book with its content, a copy of that email was posted to their blog.”

In short, the Blogger platform is safe and if any, the Blog owners should ensure that their own computers are checked and protected against malware. Where then does this leave us?

How the virus got into Blogs

Before we look at the preventive actions to take, we may want to know how these fake posts made their way into our Blogs. When you are logged into Blogger, you can see under Settings -> Email a “Mail-to-Blogger Address” feature. This enables you to post to your Blog by emailing the Post content to a mail-to-blogger address.

For those who have not used this feature, you can set up the address by entering a word or characters into the part in red. This will be the address to which posts can be sent.

If you have checked the “Publish” box, any message that is sent to this address will automatically get published in the Blog. If the “Publish” box is unchecked, the message will be saved and you have to log in to your Blogger account to publish it. The email subject heading will appear as the Title of the Blog Post.

Although this is a useful feature for people on the go, it is also one that can be exploited. All it takes is for anyone to post an email to this address and whatever is in that email will appear in your Blog. It is therefore imperative that this address remain secret and confidential and anybody who is not authorized to post on your Blog should not know about it.

The moment a virus takes root in your computer, it can send malicious posts to the email addresses saved in your system’s address book. If the above email address is one of them, you will see the post in your Blog. Since your Blog is legitimate, your readers and friends may read the post and click some of the links thinking that you would not put harmful material on your Blog. Once they do that, their computers may inadvertently be infected with the malware and they in turn have malicious links appear in their own blogs, and the cycle continues.

Preventive Steps to ensure Blog Security

1. Scan Computer and Protect against Threats

This sounds obvious and yet there are many who do not see the need to protect their systems against viral threats. Some may find the scanning time long (stretches to an hour for a full scan) or do not have a habit of scanning their systems. Others may find it costly to pay for an anti-virus software license. Always consider the alternative – the risk of losing all your data or having to reformat your hard drive – and you would probably agree that a little effort goes a long way to ensure a peace of mind.

If you don’t have an updated antivirus software installed in your computer, make it a point to scan your computer using one of the free online virus scanners, such as:-

a. Trend Micro Housecall
b. BitDefender Online Virus Scanner
c. Kaspersky Online Scanner
d. F-Secure Online Virus Scanner
e. Symantec Security Check

If you Google “online scanners”, you may see many sites which claim to provide free online virus scans. While many are authentic, there could well be a few which are not. Check them out if you’d like and stick to the tried-and-tested sites for future scans.

You can also download and install the free Google Pack and include the Norton Security Scan which eliminates viruses and the Spyware Doctor which removes spywares, adwares, trojans and keyloggers.

Another free software that we highly recommend is AVG Anti-Virus software. Go for the Free Edition. For a complete protection, install as well ZoneAlarm Firewall if you are not using your MS Windows Defender. These softwares update their programs and definitions regularly and the reviews on them have been very positive.

2. Configure Mail-to-Blogger Address

If you see a need to post to your blog via email, or think that others know your mail-to-blogger address, go back to Settings -> Email and pick/change the address into something that nobody can easily guess. Since the intent of this function is to have posts published without having to log in to Blogger, ticking the “Publish” option makes sense. After saving the Settings, go back to your email software e.g., Outlook Express, Eudora. Remove that mail-to-blogger address from the address book. By making no mention of it anywhere, even if the virus sends out mail to all the addresses in the address book, nothing will be sent to your Blog.

3. Create different email and login addresses

Out of convenience, many people stick to one name for all their logins, emails and signatures. For example, they may have these:-

If people are bent on hacking your Blog, it is easy for them to figure out what your login name is and use programs to crack your password. When you create your next blog, consider assigning different names or not using your actual name:-

4. Set browser security

In Internet Explorer -> Tools -> Internet Options, set the Security level for Internet zone to Medium-High or High. Also, in the later versions, you can turn on the Automatic Website Checking feature in the Phishing Filter settings.

If you are using Firefox, go to Tools -> Add-ons and click the “Get Extensions” link. Look for a popular extension called “NoScript”. What it does is to block JavaScripts and executable files and only allows those that you trust. It makes surfing the net a lot safer, and lessens the chance of unintentionally running malicious scripts.

5. Use third party scripts with care

JavaScripts make our websites dynamic and vibrant, but malicious scripts can cause a great deal of harm. In our eagerness to place nice-looking widgets and interactivity into our sites, we sometimes overlook the fact that third party service providers are not always trustworthy. Some domains last a few days, just enough for the hijacker to place downloadable widget scripts on the sites and to back out of the domain purchase after the cooling-off period. Blogs can also list harmful scripts, some of them blindly copied from other sites while others intentionally created to trick readers.

For instance, you may come across an application that you like and are given a code to place into your template. This code typically contains a link to a file ending with .js extension. When your Blog page is loaded, this script is retrieved from the site where the file is stored and it runs in the background. Some prudent Blog owners do take the trouble to go through the script language and ascertain that there is nothing wrong with it. However, because the file is hosted in that provider’s server, if they should decide to change it later and throw in something extra, you would have unknowingly introduced that into your Blog.

For the same reason, we have cautioned readers against downloading ready-made and customized templates from unknown or untested sources. Since not all of us are technical experts, we may not notice an undesirable script hidden somewhere in the template. Hence, for our guides such as the three columns template guides, we prefer to show you how to DIY and customize your own template. In this way, you know what goes into it and can easily reverse the change in future.

6. Watch what we say or write

We thought we should add this. Many of these people either do it for the challenge or out of spite. Just as wearing skimpy clothes invites unnecessary attention and opening our door invites thieves, words and actions can give hackers the excuse to compromise your site. Observe basic courtesy and net etiquette. Be modest about your site. Every site can be the target of hijacks, including ours; no site is invulnerable.

What to do if Blog is hacked?

Despite all the security and preventive steps, if the day should come when the Blog contents disappear, the first thing to do is to scan the computer for viruses and malware. Do not login to your email or other accounts since this might open up more doors for the virus. Once the system is completely scanned and rendered safe, you may login to your Dashboard and view the Settings. Take note of the information that has been altered.

It is also possible that you are unable to login because the password has been changed, or that the Blog and Blog Posts are deleted. Write to the Blogger Support Team using another email account. Give them as much details as possible and allow them time to investigate the cause. Since Google servers would have backed up our data, it should be possible for them to reinstate your Blog upon proof of ownership.

Where the contents cannot be entirely retrieved, you may have to re-create the Blog. In moments like this, you would appreciate the importance of keeping backups of the template source codes and saving copies of the articles you have written.

Further reading:-

As mentioned, if the Blog page load takes longer than usual, it is not necessarily caused by a virus. Blogger.com could be experiencing a downtime, or the external sites where information is retrieved from may be causing the delay. This usually happens when we put a number of third party applications and widgets into our site, such as advertising services, gadgets and scripts.

The Blogger or Blogspot Navbar is a default feature that appears at the top of every Blogger powered blog. It is a useful navigation tool which allows readers to search the blog for targeted content, mark the blog as objectionable, and randomly view other member blogs.

The Navbar can be disabled for users who publish contents via FTP, but it will appear on all freely hosted BlogSpot blogs. While the feature is undeniably useful, some people find that its position at the top of the page looks obtrusive even with a choice of 4 colors. Some therefore pick a template with a black background to blend well with a black navigation bar. There are also parents and educators who find the ‘view random blogs’ feature inappropriate, as their children may inadvertently view objectionable blogs.

Nevertheless, this article is not a discussion on the merits or demerits of a Navbar. That is for you to decide. Here, I am assuming that you have made a conscious decision to hide or remove the Navbar. Having so decided, this is the guide on how you can do it.

Log into your dashboard, go to Template -> Edit HTML. Scroll to anywhere on the template and insert the following CSS style definition in red within the head section.

Preview the template. You will notice that the Navbar is no longer displayed, and (depending on your template) your contents might shift upwards to take up the space reserved for the Navbar.

[Update:

This code display:none no longer works. Those who have used this may want to try out the other 2 methods (height and visibility) instead.]

Now, try this style definition:-

This will reduce the Navbar height to zero, effectively removing the Navbar. You can also explore this other style:-

You will notice that your contents do not shift upwards. The space is still reserved for the Navbar, but the Navbar is now hidden and not visible.

Either one of the above codes would do. You can also combine them if you’d like. For example, giving a numerical value for the height of the Navbar and hiding the visibility will give you a margin at the top and yet without the Navbar. Choose one that best fits your blog design. If you change your mind in future, and wish to have back your Navbar, simply remove the style definition.

Search Box

If you decide to remove the Navbar. This is one of the great features in the Blogger Navbar.

Feedburner is a very popular feed aggregator and provides a host of services which you can tap on to publicize and promote your Blog. One widely used service is their FeedCount Chicklet which displays your Blog Feed’s circulation statistics. The chicklet can be static (displaying the number of “readers”) or animated (showing the number of “readers” via feed). Although you can change the background and text color for the graphic display, there is no option for you to change the text. This hack will explain how to change and personalize the FeedCount Chicklet text as well as to change the animation settings so that it rolls the text more than once.

For those who have yet to sign up for a Feedburner account, consider doing so right away. Now that it is under the Google family, there is an easy way for you to channel all your Blogger feed subscribers to Feedburner. Login to Blogger, and under Settings -> Site Feed, enter your Blog’s Feedburner Feed address into the box beside “Post Feed Redirect URL.” Readers who click the “Subscribe to: Posts (Atom)” link or the RSS icon in their browsers will be redirected to your Feedburner Feed.

FeedCount Chicklet

When you are logged into Feedburner account and are viewing your Feed details, click the Publicize -> FeedCount tab. This is where you can generate a code to display a chicklet in your Blog which shows the subscriber count. Whether or not you already have a high number of subscribers doesn’t really matter. A nice chicklet can draw readers’ attention and make it easy for them to click the Feed link.

Choose the custom colors of the body and text and click “Activate”. You will be given a HTML code for the Chicklet. We have to edit this code. Open MS Notepad (usually found under All Programs -> Accessories in Microsoft Windows) or a word processor program. Copy and paste this code.

Static FeedCount HTML Code

The static FeedCount code will look something like this:-

This is the standard FeedCount chicklet you see:-

To change the word “readers” to some other text such as “Viewers”, insert this other code (shown in red). You can change the word “Viewers” to other text, but because of the space constraint, keep it to no more than 7 characters.

The FeedCount chicklet now looks like this:-

You can change the text to capital letters or include characters, e.g., “*FANS*”, and your new FeedCount Chicklet will look like this:-

Animated FeedCount HTML Code

The animated FeedCount code is rather similar except that the animation value is set as “1” instead of “0”.

When the page is loaded, viewers will see a one-time rolling text of number of “readers” via feed.

The word “readers” can be changed to other text like “Members” by inserting the code (shown in red):-

This is the new FeedCount Chicklet you will see. Insert the relevant text that suits your Blog.

Animation to play more than once

Other than the change in text, you can also set the animation to play more than once by changing the anim value to something greater than 1. Since readers are unlikely to stay on a page for too long, it need not be too big a value. When the page is refreshed, the animation count will start all over again.

Our animated FeedCount Chicklet will now look like this:-

Further reading:-

Another useful service that Feedburner has is their Headline Animator. You can create a nice animated banner that automatically displays the titles of your recent posts.

There is now an icon in your Post Editor allowing you to upload a video into your post, in the same manner as you would for photos. At the moment, the feature is only available in the Post Editor and not as a Page element. However, we shall explain how you can insert the video into the Sidebar Page Element and not merely have it in the Post. As well, you will learn how to resize and align the uploaded Blogger video.

Upload Video

When creating a New Post, you can see a new “Add Video” icon in the toolbar:-

Write the post and when you want to add a video, click this link. You will be asked to upload a video file from your computer. This file has to be in AVI, MPEG, QuickTime, Realplayer, and Windows Media formats and should not exceed 100MB in size. We don’t know if there are bugs but we tried uploading 10 videos in different formats and were not successful in 8 of them. If you do see an error message, you can report it to Blogger Support citing the incident ID and try to upload it again. At the same time, assign a title to the video.

Video Upload Terms and Conditions

At the bottom, you will have to check the box to indicate that you have read and agreed to the Upload Terms and Conditions. These are the terms imposed by Google Video which Blogger is using for their video upload function. Most of us would not have bothered to read the standard terms. Nevertheless, from a layman’s perspective, some salient terms are worth noting:-

1. Google has a non-exclusive, world-wide, royalty-free license to use your name, logo and brand for advertising or promotional purposes.

2. If Google offers a service whereby you may charge end users to download or view your videos, you will receive only seventy percent (70%) of the gross revenues.

3. You warrant that you have the right to use and upload the video. Among other things:-

a. You are at least 18 years of age and are legally allowed to enter into the Agreement and grant license rights.

b. The video is not, in whole or in part, pornographic or obscene.

c. You own all the necessary rights, such as copyrights, trademark rights and rights of publicity in the videos.

d. The display or use of the videos do not and will not violate any applicable laws or regulations and will not be in breach of any rights of persons or intellectual property. (Bear in mind that YouTube has faced many threats of actions and lawsuits by notable figures around the world for illegal videos uploaded onto their site.)

4. If there should be any liability imposed on Google, you have to indemnify them.

Storage Space for Videos

Once you are done, the upload process will start, and since the files are usually big, it will take much longer than photos. You can in the meantime continue to work on the remaining contents of your Post. There is a 1GB storage limit for photos and images uploaded into your Blog. Since videos are hosted under Google Video and not Picasa Web Album, the video files will not be taking up this storage space. The Google Video terms do not seem to stipulate a storage limit for uploaded videos.

Resize Video

The Blogger video has a width of 320px and a height of 280px. This should fit nicely into the Blog Post segment of all standard Blogger templates. Some people may have customized their Blog layouts and reduced or extended the width of the Blog Posts. To adjust the size of the uploaded videos, after uploading it, view the post under “Edit HTML” mode instead of “Compose” mode.

Locate the video code. It should look something like this:-

You can change the width and the height (shown in red). Just ensure that the width does not exceed the width of the main post column, which is usually found under the #main-wrapper or #main-wrap of the template source code.

Align Video to Center or Right

By default the video is aligned to the left of the post. If you want it in the center, you may add this code (in blue) to the above video code.

Change the word “center” to “right” if you want it on the right side of the post.

Place Video in Sidebar

As mentioned above, there is presently no “Add Video” option under “Add a Page Element”. To have a Blogger video in the sidebar, we have to first create a post. It can be a temporary post which you can delete later. Upload the video and follow the above guidelines to resize it to a small screen. For example, we resized our test video to a width of “200″ and height of “180″. Publish the post.

Refresh your Blog. You should see the temporary post together with the small video. View the source code of your Blog. For Firefox users, in your browser toolbar, go to View -> Page Source or press Ctrl+U. For Internet Explorer users, View -> Source. Next, press Ctrl+F, enter the word “video” to search for the video code. It is a rather long code and looks something like this:-

Block copy this entire piece of code. Now go to Template -> Page Elements -> Add a Page Element in the sidebar, and choose “HTML/JavaScript”. Paste this code. If you want the video to be in the center of the sidebar, add the alignment tags outlined in the earlier section. After saving, drag and drop the element to the part of the sidebar where you want it to appear and Save the Template. You may go to Posting -> Edit Posts to delete the temporary post. View your Blog to see the Video in the Sidebar!

With this guide, you would be able to add a background image or picture to your Blog, customize the position of your image, and have a static background image that stays in place when you scroll through the contents of your blog.

You will need to create an image. Find a picture you like. If you need a free photo editing tool, you can either search the net for one or use Google’s Photo Editing Software Picasa. You can also use a small tile-size image which can be repeated so as to cover the entire page. Try not to have an image file that is too large as your page may take a little longer to load.

After creating a picture, you will need to upload it onto a free picture host.Next, log in to your dashboard layout; under Template -> Edit HTML, scroll to where you see this:-

Change background color

If you would like to change the background color of your blog to a very unique color, you can manually specify the color value. take a look at the HTML Color Chart to see if you can find your desired color. For example, if you have chosen a color code #B38481, change the above code to this:-

If you are changing the background color of your sidebar only, add the color code under the relevant sidebar heading.

Similarly, if you want a different color for your main post column, add the color code as follows:-

Note that different templates may label their stylesheets differently. The #sidebar-wrapper may be called #side-wrap or something to that effect.

In some templates like the TicTac Template, the background color you see is due to a background image and inserting a color code into the template will not help. To have a different color, this background image will have to be edited. For more details, read the article on Background Color of TicTac Template.

Add a background image

The code to insert is this:-

Remember to insert the URL address of your image in the brackets.

Insert the URL of this test image into the above brackets and Preview your blog.

You can also have a background image just for your sidebar. Locate the style and add the background image code accordingly.

For a background image to your main post body only, add the code here:-

Repeat background image

By default, the image is repeated to fill up the entire background of the page. If you have a small or tile-sized image, it will appear like a print pattern in the background. Sometimes, you may choose not to have the image repeated. If that is the case, you can insert this code:-

Alternatively, you may only want the image to be repeated horizontally. The code is this:-

To have the image repeated vertically, the code is this:-

Position background image

If you have an image that is not repeated, you may like to specify the exact position of this image on your page. The HTML code to be inserted is this:-

Your image will appear at the top left corner of your page. The other possible values that you can use to replace “top left” are:-

top center;
top right;
center left;
center center;
center right;
bottom left;
bottom center;
bottom right;

If you do not want it entirely left, right or center, you can also define the horizontal and vertical alignments either in percentage or in pixels. Use either of these values instead, with x being the horizontal value and y being the vertical value.

x% y%;
xpx ypx;

Static background image

After that, you may specify whether you want your background image to remain in a fixed position when the contents of your blog are scrolled. By default, the picture scrolls with your content. To have it stay put, the code to insert is this:-

Putting it all together

The eventual CSS code that you will have for your customized template may look like this:-

You can also combine the attributes into one line and the shorthand code will look like this:-

Putting the above code into my blog, this is what you would see.

Of course, after having added the background image, you will need to adjust the colors of your text so that they stand out against the backdrop. Go to Template -> Fonts and Colors to do that.

This guide will give you an image background to your Blog. Sometimes, you may have several images, all of which are suitable for your Blog.

You would notice under Template -> Page Elements that there are options to add a Page Element to the sidebar and the footer. However, there is none for the Header and Blog Posts. Having a Page Element option to these latter two is useful. You may want to add a picture at the top, or a Google Adsense ad at the top or bottom of your blog posts.

To have an “Add a Page Element” option, under “Template”, click “Edit HTML”. Scroll down and towards the bottom, you will see these lines:-

Change them to this:-

This will give you 2 more page elements that you can add to your Header. You can increase this number if you want.

Right after that are these lines:-

Change them to this:-

You are now able to add Page Elements either before or after your Blog Posts.

Note:

1. In different templates, the ‘header-wrapper’ may be called ‘header-wrap’ or ‘header’ and so on. Scroll to where you see an option called showaddelement and you can probably figure out the rest.

2. We realized that in some templates like the Dots Template, there is no separate Header at the top. Instead, the Header is contained in the left sidebar and the main posts appear on the right. This is the template layout and it is probably the reason for your choosing this design. In such templates, you can Add Page Elements to the ‘main-wrapper’ but not at the Header. Nevertheless, you can still look at the guidelines below to Add Page Elements in the ‘crosscol-wrapper’ part of the template. This will give you the option to Add Page Elements right on top of both the sidebar and main posts. You can upload images, insert AdSense code, text or other scripts into this section.

Update:

There is an additional position where you can add Page Elements to. This is between the Header and the Blog Posts. When you add a Page Element in the Header section, it follows the Header styles (like font, color and margin settings) and similarly, if you add a Page Element in the Blog Posts section, it follows the styles defined for the Blog Posts. You might want to include a Horizontal Menu or Navigation Bar or AdSense Ad unit just below the Header but before the Blog Posts and sidebars.

To do that, scroll to here and change to the value (shown in red):-

This should appear in all new Blogger templates. If you don’t see this in your template, you can also add the entire code (shown in green). When you view your Template -> Page Elements, you should now see a new section in between the Blog Header and Blog Posts where you can insert Page Elements.

Once these are done, Save the Template. Click the “Page Elements” tab, and you will now see “Add a Page Element” option at the top of the Header and Blog Posts. Assuming you decide to add the element below the Header or Blog Posts, not to worry. Simply create whatever element you want and save. Next, drag and drop the element to the bottom of the Header or Blog Posts. Click the Save button at the top right hand corner of the page, and your settings have been saved.

This is a step-by-step guide to automatically place a real-time Digg count and vote button to every single blog post. Digg is a social content website where your readers or you can submit content to. If you have a good story, members will ‘digg’ the post and write comments. As a blog owner, you may want to make it easy for and encourage your readers to submit and digg your articles.

Automatic Count and Vote Button

Before you do that though, you would want to take note of the following:-

1. Your blog should be set to save Post Pages. Post Pages are archived blog posts published to their own web page. Each post will have a unique URL, which is required by Digg for the individual posts to be submitted. To verify or enable it, login to your Blogger Dashboard. Under Settings-> Archiving, set the “Enable Post Pages?” to “Yes” and save the settings.

2. This template hack will put a Digg button to every post. You are therefore not able to choose which post you want to include or exclude a button. If you would prefer to have a Digg button added only to some posts, read the later part of this article on “Button for selective posts.”

3. The code reads the URL of the individual blog page and this shall be the URL used for submission of the story to Digg.

Under “Template”, click the “Edit HTML” tab. Block copy the entire HTML code for your site and save it in a text file. You can also click the “Download Template” link. This is one of the two necessary steps whenever you want to change the template. The second step is of course to “Preview” the new changes, and save the changes only when you are satisfied. The backup you have saved in a text file will come in handy when you accidentally click to save the changes without previewing them. With a backup, you can easily restore the template to the prior state if need be.

Click the box next to “Expand Widget Templates”. Scroll about two-thirds down the template to look for the code that reads:-

If you want the button to show at the top right corner of your post, replace the above code with this.

If you would like the button to appear at the end of your post, replace with this following code instead.

If you want to have the button at the top left corner of your post, change the alignment.

Digg has another compact button. If you insert this code:-

You can also change the background color of the button to blend with your site. For example, a code like this:-

You can insert the color code of your choice into the red portion. For a list of color values to insert, you may refer to the Hexadecimal HTML color code list.

Automatic Count Button in Blog Footer

[Update] This segment is added in response to user’s request to have the Digg button in the Blog footer, i.e., after the labels. If you scroll through your template, you will see this chunk of code which gives the labels in your Blog footer.

If you want a Digg button to appear just after the labels, add the appropriate Digg button code right after the above code. For example, if you want the compact Digg button, add this code below the labels code:-

Move the Digg button code above the labels if you’d like. Experiment a little. Just remember to preview the template and not to save it unless you are satisfied.

Digg Button in Blog Footer

If you do not want to see an Automatic Count button, you can also place a link button into the template. This button will appear at the bottom right corner of every post and readers can click it to submit that post to Digg.

Scroll to this part of the template and insert the lines (in red):-

You can change the position of this button. Go through what we discussed earlier in this article to understand where to place the code if you should want the button to be at the top of the article.

The button 91×17-digg-button.gif is simply an example. As the following section explains, there are many buttons you can use. To change the button to another design, replace the image URL with that of the new button.

Button for selective posts

The methods of manually adding a Digg button to selective posts are rather tedious and complicated. The problem is that Blogger does not allow you to simply insert a JavaScript into a blog post. Since this blog is targeted at the majority of us who are not computer experts, I shall suggest a method that I think is simple enough for us.

First, go to the Digg tools site to select a Digg button that you like. You will see a wide selection of Digg buttons.

Take note of the image URL. For example, the image URL of this button is

Write a post and publish it. Next, refresh the page and click on the title of your post. This will bring you to the post page. Take note of the new URL of your story. Insert it into the orange portion of this HTML code. If you want a different image, insert the image URL into the blue portion of the code.

Now, go back to your article and Edit it. Choose the “Edit HTML” mode and not “Compose” mode. Copy the above code and paste it into whichever part of your blog article. “Preview” it, and if you are happy with it, “Publish” it.

For this article, I have manually inserted the Digg button.

The Google Navigation bar at the top of your Blogger blogs has an embedded search box. However, you may want to include a similar box in the main body of your blog (like what I have done), or the sidebar. Other than the convenience for users, the added advantage is that unlike Google search box, the search results of this Blogger.com search box appear in the main body of your Blog.

Under Template->Page Elements tab, click “Add a Page Element” at the place where you want your search box to appear. Select “HTML/JavaScript”.

There are several HTML codes posted on the net. I tried a few, and found the one that works as follows:-

Remember to change YOUR BLOG URL to the URL or web address of your Blog. Also, change the NAME OF YOUR BLOG to that which you want to call your site. For instance, if your Blog Name is long, you may want to write something like “Search Here” or “Search this site”.

You can also change the “Search” button to say, “Hit” or “Go”, by changing the Value.

Save the code and refresh your page. If you want a longer or shorter search box, you can play around with the size. The above example of a width size=”20″ and value=”Hit” will give you this:-

Whereas a width size=”30″ and value=”Go” will give you this:-

The size of the search box is a matter of appearance. You may have noticed that the maxlength=”255″. This indicates that a user may enter up to 255 characters in the search box, which I think is sufficient and need not be altered.

Image instead of Search button

Just for the fun of it, if you want readers to click an image instead of a button, you will first need to do up a small picture. You can also resize a picture you already have with photo editing tools like Google’s Picasa. After creating a picture, upload it onto a free server like GooglePages or Google Groups, or other free hosts that offer direct links to the image files. Take note of this IMAGE URL.

The HTML code to insert is this:-

Remember to insert into the code the IMAGE URL, where your picture is uploaded. You can align the image to the top, bottom or set a horizontal space between the bar and the image by using a hspace tag.

While it is alright to replace the button of your Blogger search box, you may not want to do that with the Google search box since their T.O.S. disallows any alteration of their code.