Customize Blogspot blog - delete Blogger navbar and change favicon

How can we customize our Blogspot blog?

Well, not all of us are techi enough to create a well-designed website or blogsite, or at least known to basic HTML coding, CSS editing or PHP programming to build one. Sometimes we just stick on free blog software like Blogspot or Wordpress in a way to create our own pages and be accessible in the Internet. Since it has an easy-to-use interface and a user-friendly hosting service, editing its appearance can be done by anyone around the globe. Of course, we a little bit of reading.

These services allow us to customize pages, write articles, post advertisements on areas of our page in a limited matter. Well what do you except from a free software, right? But there are a lot of information all over the web that would give us tips and guides on how to hack and tweak different sections of our blog and make it more professional than its default appearance.

To those who use Blogspot, you can modify the form of your blog site in a way that you like. You can reconstruct your page layouts from transforming font sizes and colors to reorganizing its entire background, themes and even the whole template. But as I mentioned earlier, it has limits especially when you use a customized template adapted from a Wordpress blog. Though, it is much better for the whole template to be revised. But let's not get into learning that yet.

Some blogspot users are used to its design interface and don't want to get things complicated by shifting to a different template. This matter has been answered. We could alter some areas on our blog such as creating your own blogger favicon and removing the top navbar but keeping the whole software functions intact. So, how can we do it? How can we develop a new page look by not uploading a customized template?

This is your default page looks like:

These are the 2 simplest ways to transform your blog and make it a little bit crafted. But first, you need to log in to your account and go to your Dashboard page.

Choose the blog that you wish to customize and click on Design.

And then go to Edit HTML

and do the following:

1. Change Blogger favicon.

Favicon is the personalize website icon location right before a website URL. It serves as the symbol or logo of your company or business. It is also called as URL icon, bookmark icon and shortcut icon. The easy way to alter the default Blogspot icon is by creating an image of at least 100x100 dimensions or down to the smallest which is 16x16 dimensions. It will be up to you what size of the image you are going to make. Then save it on your computer and register for an image hosting account available online such as Imageshack, Flickr, Picoodle, Photobucket, etc.. Upload the image file to any of these websites.

Then what you need to do is to copy these codes:

Then paste these codes just before the end head tag of your HTML blog template. Press CTRL + F and type this tag to save a lot of time looking for it.

Don't forget to change the 'favicon-link' with the URL of the image you uploaded from the image hosting service.

However,

I have found one of the easiest way to modify favicon of your blogger blog. First, save an image of your self-made favicon from 100x100 dimensions to 16x16 dimensions on your computer. Then go to IconJ free favicon hosting website and look for the field that looks like this:

Upload your saved image to iconJ and sharpen it up to level 3. Then click "Upload now" tab.

Copy the direct link and let IconJ host your favicon.

Paste the favicon direct link just before the end head tag of your blog HTML template just like how we did before.

Next:

2. Remove the Blogger navbar located at the top of the page.

It is annoying to see that the top navbar is always visible everytime your page opens. If someone enters your blogsite, they will see a navigational bar which looks unprofessional. They might accidentally leave your page by clicking the Blogspot icon or the next button to go to a different blog. Therefore, we have to get rid of it. Here's how.

First, copy this code right here:

Then paste it right after the Blogger template style name in your HTML template.

All done. Save your work by clicking the "Save Template" tab.

View your page and check all the revises you made.

Congratulations for a successful work. Also, Blogspot has a lot of owned-gadgets on its interface where you can add anytime you want. You can check these gadgets under the Design page and add a few for a much more personalized appearance.

Happy Blogging!!!

If this guide helped you or not, you are welcome to share it by leaving a message below.