How to Add Navigation Bar or Menu in Blogger in 3 Steps

By -
Navigation Bar, Navigation Menus or Page Navigator is same thing, It is the most Important element of Your blog Design Because all of your Page views depends upon it, It creates all the Important links of Your Blog. When Start with a Basic Simple Blogger Template then there is likely a Navigation Bar or Menus, So you have to create one by your self, In this article I am going to share the easiest method of Adding the Navigation Bar below the Blog Title which Contain all of Important Categories and Links to your Blog. So Lets Start the Actual Work.


How to Add a Navigation Bar (Menus) in Blogger's Blog?


Step 1: Sign in to Your Blogger account and go to the Layout Tab and add a new HTML/Javascript gadget in the header area of the layout.
Paste the Following code in the New added HTML/Javascript gadget.
<!-- begin navigation menu -->
<div id="readynavbar">
<ul>
<li><a title="home" href="LINK">Home</a></li>
<li><a title="TITLE" href="LINK ">PAGE TITLE</a></li>
<li><a title="TITLE" href="LINK">PAGE TITLE</a></li>
<li><a title="TITLE" href="LINK">PAGE TITLE</a></li>
<li><a title="TITLE" href="LINK">PAGE TITLE</a></li>
</ul>
</div>
<!-- end navigation menu -->


Note: You have to put the link of your Pages in the "LINK" value and give the title of page which will shows up on Navigation Bar in the "PAGE TITLE" . After doing this Save the it.
Now Your Navigation bar is created but you need to decorate it some how, Here is how you can postion and Decorate it.

Step 2: Decorating the Added NAVIGATION BAR:

Now you go to Template tab and Click on Edit HTML, (Note: Please Save a copy of your Current template before editing it).

Click inside the code area and Press CTRL+F and type “<b:skin>…</b:skin>” and hit Enter.
Add the following code here and Save The Template.

/* Spacing & Border of First Link in Navigation */
.tabs-inner .section:first-child ul {
margin-top: 0px;
border: 0 solid #eeeeee;
}
/* Background & Border of Navigation */
.tabs-inner .widget ul {
background: #999999;
border: 0px solid #eeeeee;
text-align: center !important;
}
/* Font, Colour & Border of Links */
.tabs-inner .widget li a {
font: normal normal 14px Arvo;
color: #333333;
border: 0px solid #ffffff;
}
/* Font & Colour of Rollover Links */
.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
color: #eeeeee;
background-color: #ffffff;
text-decoration: none;
}
/* Centre Navigation */
.tabs .widget li, .tabs .widget li{
display: inline;
float: none;}


Step 3: Setting the Position of Navigation Bar:

Now go to Template >> Customize >> Advanced >> Add CSS
Add the code given below here and Save it.

#readynavbar { position: fixed; top: 0px; left: 0px; z-index: 999; width:100%;}


Congatulations Your Navigation Bar is Added if You Still have Some problems then dont be affaired to contact me.

Comments

Post a Comment

Popular posts from this blog

How to open any Block Website in Pakistan (The Simplest Way)

By -
Image
In this post you will learn a very simple method about unblocking a website from Pakistan, This is a very simple way and you do not need to do it again and once it is done. Some time we need to open a website and the website is blocked because of some reasons like Students would have learn many things from YouTube Video tutorials But the YouTube is Blocked in the same way there are many websites which can be used for educational purpose, So lets start the process. HOW TO UNBLOCK A WEBSITE FROM PAKISTAN? Unblock Website in Mozilla Firefox: If you are using Mozilla Firefox Browser then you just need to follow the Following steps to unblock the website. we are going to add an extension or add-on into Mozilla Firefox which will take only 2 seconds to be installed on Mozilla. Open this post in Mozilla Firefox from your computer or Mobile phone. And CLICK HERE ( Proxmate the ADD-ON ) Now simply add the add on from opened Page of Mozilla Firefox. Unblock Website in Goog
Read more

Being a Successful Solo Ad Provider (Complete Guide for Starters)

By -
Image
If you want to sell Solo Ads and make money, but did't know how to start, then you have come to the right place. I am going to share with you my own experience and all the pits and falls in the Solo Ads business. Before we jump into Solo Ads business and start selling solo ads, we have to understand what actually a solo ad is ? Essentially solo advertisements are clicks that originates from Email Blasts, or Campaigns, Sequences. You can buy a set number of snaps from different solo promotion venders. Now lets see how you can start the Solo Ads business and what are the come basic steps toward being a successful seller. In this article I have divided the whole story into two sections; One  Becoming a Solo Ad Seller and Second Becoming a successful Solo Ads Provider. Becoming a Solo Ads Seller or Provider: As we know so far that if you want to be a solo ads provider then you must have an email list of people to whom you can send the ads or links or offers or anything
Read more

Top 10 Life Insurance Companies in Pakistan (Updated list)

By -
Image
This is a list of insurance companies of Pakistan, We have provide this rating on the basis of Survey done by the American Surveys for Public Services, This list is updated every six month.   New Jubilee Life Insurance Company Limited: Jubilee Life Insurance was chosen as the new name after a thorough research exercise. The word “Jubilee” is already well-known in the financial services market and is associated with “Happiness” which very much relates to our business. We therefore decided to give you the confidence of our strong presence in the market coupled with a promise to help you plan and realize your financial dreams to keep you and your loved ones happy at all times. With a global brand we will bring you global best practices in services and world class solutions to your financial needs- Jubilee Insurance State Life Insurance Corporation of Pakistan: To remain the leading insurer in the country by extending the benefits of insurance to all sections of society and meeting our com
Read more