Lesson 10: This tutorial explains various ways to generate a logo for your Blogger site and some basic navigation or menu implementation for a professional look.
Previously, we saw how to create a 3 column footer for your Blogger site. Today, we will see something on Logo & Navigation for your Blogger blog. In our previous lessons, we learnt most of the basics to create a Blogger template. Now, it is time to decorate the template to make it look professional.
The first essence of a professional Blogger blog is you need to have a Logo and definitely a well designed now. Though, a logo is directly not related to a template. But, you need it for a all round look of the blog. The second essence is to have a nice navigation system, which is also called as menu.
We will discuss how to create both Logo & Navigation.
PREVIOUS MISSION – Mission 9: How to create a 3 column footer for Blogger template.
NEXT MISSION – Mission 11: Understanding Blogger comment System and Enabling Embedded Comment Form.
MISSION 10 OBJECTIVES:
1) Insight on the need of a Logo.
2) Learning to create a menu or navigation for Blogger.
I. CREATING A LOGO FOR BLOGGER
Different ways to design a logo for your website:
1) From a online logo design tool.
2) Using a complex image editing and design tools like Photoshop or Gimp.
3) Hire a professional designer to design a logo for you.(If your blog is a business)
Top 5 free recommended online logo design tools:
F) Flamingtext You can find many more from Google search.Using Adobe Photoshop to design a tool can be costly and not everyone can afford. It is better to go for an equivalent tool by name Gimp. I personally, use Gimp to quench my design needs. There are some tutorials available on the Internet explaining how to create one. You can easily create simple ones from Gimp yourself. We will touch upon how to create a logo sometime later 🙂
Hiring a design professional, not all can afford for this. If you are running a business blog, where you sell products and services, then you definitely need a good logo.
II. CREATING A PROFESSIONAL MENU FOR BLOGGER
Before we learn to create a menu, we need to understand certain things:
a) Don’t use a drop down menu which spans into multiple menus.
b) Drop down menus can cause confusions to the visitor.
c) Keep all the important menu items(links) in your navigation like Home, Articles, About us, Contact us and so on.
d) You can have more than one navigation in your blog but not a drop down.
e) Your navigation can be on your sidebar.
How to use a navigation in Blogger? – Three Ways
METHOD 1) Blogger already has a default navigation widget. How to add it?
Here is a screen shot of the previous template design layout section:
We need to bring a new “Add a gadget” to the location shown in the above screenshot to add the default navigation.
We had previously discussed about how to add a “Add a gadget” element in one of our previous tutorial.
Steps to implement:
Step 1) Go to dashboard > Template > Edit HTML > Search(Ctrl+F) for the following code:
Step 2) Just before <div id=’content-wrapper’> add the following code:
<b:section class='crosscol' id='crosscol' showaddelement='yes'/>
Here is the pic:
Step 3) Save the template.
Step 4) You can see the “Add a Gadget” element in your Layout section as shown below:
Step 5) Go to “Pages” > Select “Top tabs” in show pages as option > Save Arrangement. Here is a screen shot:
You can also see that the menu can be made to the sidebar as well. Also it can be hidden(This is default settings)
Note: This menu doesn’t look professional. But, it can be made professional using CSS.
Here are the steps to be followed:
Step 1) Go to your blog > Template > Edit HTML.
Step 2) Search(Ctrl+F) for the following code:
Just before that paste the following CSS:
#nav li a
#nav li a:hover
Save the template.
Paste the following HTML into the widget space:
<li><a href="#">Table Of Content</a></li>
<li><a href="#">Contact Us</a></li>
You are done!!!
Important: Follow all the steps till Step 2, from the above methods.
The advantage of using this method is, you can add the menu anywhere you imagine of.
Hope you enjoyed this tutorial. In the next tutorial, we will learn how to make the menu look much better and organized. We will restructure the menu and template to fit nicely into our template design. Menu is an important part of the any website, so wanted to stress upon a menu for your website as well. There are N number of menus available in the net for adding to your website. But, remember not to add a drop down. I learnt that from my mistake… Stay tuned for the next lesson.