ask-kp

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.

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.

Have you wondered how these little icons appear next to the web addresses, like the one you see above? When you visit the sites or bookmark them, these icons will make these URLs stand out. These are “Favicons” or “Favorite Icons”.

You would first need to have an icon which you would like to use, bearing the extension .ico format. If you search your hard disk, you might find some icons which are generic. I would suggest that you create one to represent your own unique identity. There are quite a number of free icon editor software which you can download from the net.

As for myself, I went to Download.com site and downloaded a very small program called Imagicon which can transform images into .ico format. I created an image using Photoshop. You can use any image or pictures if you do not wish to create one. Next, run the program. It is rather simple to use. While you can create icons in 2 sizes – 16×16 and 32×32 – I would think a 16×16 icon is preferable since it is readable in most older browsers.

If you do not wish to download any software, you may also try creating an icon online. Just enter the keywords “online icon generator” into your Google search bar, and you should be able to find several programs that you can try.

Once you have created an icon, save it into your hard disk. The next step of attaching the icon is a little tricky. Ideally, all you need to do is to save it in the root directory of your blog site. Nevertheless, there is no way this can be done. For one, if you try to upload an icon image, Blogger will reject it. Two, any file that is uploaded will not go into the Blogger root directory.

The only method to use will be to upload the icon into some web folder, and create a link.Once you have done that, take note of the URL of your icon. If you are using Google Page Creator, hovering your mouse over the link, you will see that the file is stored under a directory which looks like this http://yourname.googlepages.com/iconname.ico
where “yourname” is your Gmail account name, and “iconname” is the file name. Copy this URL.

Go back to your Blogger dashboard and under the Template tab, go to “Edit HTML”. Near the top you will see a line like this:-

Update:

Copy and insert the following code below the line:-

Inserting this will also work but the former is preferred:-

Remember to type in the “URL of your icon file”.

Save the template. When you refresh your blog site, you should see your nice little Favicon next to the blog address.

Other image types

The .ico image format has been used by many but you can also create an image under the .png or .gif format. Ensure that the size of the image is either 16×16 pixels or 32×32 pixels.

If you have a PNG format image, the link to insert is:-

If it is a GIF format image, the link is:-

External Domain

For those who have hosted sites in external domains, insert the link in the root directory as well. Otherwise, you can upload the file into the root directory and name it favicon.ico

As an example, if your domain name is www.domain.com, the URL of the favicon will be www.domain.com/favicon.ico

This method is not preferred but a number of browser versions are able to process the icon. Since we do not have external domains to try out this alternative, you may want to see if it works for you.

Compatibility

While you can see the Favicon in Mozilla Firefox, many have problems seeing the Favicon in Internet Explorer. This is a known problem and has been a sore point with many IE users. In some versions of IE, bookmarking the site will display the Favicon. This is not necessarily so in IE7 that we are using. In fact, when we bookmarked the highly popular search engine sites, their Favicons don’t show in our IE bookmarks too although they show well in Firefox. Perhaps this is one more reason to download Mozilla Firefox if you have not already done so.

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.