Professional Menu And Logo For Blogger | Mission 10

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:
a) LogoSnap
b) Logoyes
c) Logomaker
d) Logoease
e) 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:

Click to expand

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:

<div id='content-wrapper'>

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:

Click to expand

Step 5) Go to “Pages” > Select “Top tabs” in show pages as option > Save Arrangement. Here is a screen shot:

click to expand

You can also see that the menu can be made to the sidebar as well. Also it can be hidden(This is default settings)

Step 6) Here is the final screenshot:

click to expand

Note: This menu doesn’t look professional. But, it can be made professional using CSS.

METHOD 2) Navigation menu using HTML & CSS with the help of “HTML/JavaScript widget“

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:

]]></b:skin>

Just before that paste the following CSS:

#nav
{
    padding:0px;
}
#nav li
{
    display:inline;
}
#nav li a
{
   font-family:Arial;
   font-size:12px;
   text-decoration: none;
   float:left;
   padding:10px;
   background-color: #444;
   color:#ffffff;
   border-bottom:1px;
   border-bottom-color:#000000;
   border-bottom-style:solid;
}
#nav li a:hover
{
   background-color:#568781;
   border-bottom-color:#000;
   border-top-color:#000;
   border-bottom-style:solid;
}

Save the template.

Step 3) Go back to Layout > Click on “Add a gadget” below header or where-ever you want the menu > Choose the “HTML/JavaScript” widget as shown below:

Paste the following HTML into the widget space:

<ul id="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">Articles</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Table Of Content</a></li>
    <li><a href="#">FAQs</a></li>
    <li><a href="#">Contact Us</a></li>
</ul>

You are done!!!

METHOD 3) Menu without using “HTML/JavaScript” gadget- By Directly pasting the HTML into the template.

Important: Follow all the steps till Step 2, from the above methods.

Instead of adding the above HTML using the “HTML/JavaScript” gadget. Add the HTML directly into the HTML template.
The advantage of using this method is, you can add the menu anywhere you imagine of.

You can enjoy the demo from below which has both the default menu from Blogger and our own custom menu:

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.

— to be continue —