30+ “Horizontal” Navigation Menus For Blogger With CSS & HTML Codes





30 High Quality Navigation-Menus Navigation menu or tab menu is the heart of every web page or blog. It provides the path way to all important pages of the website. To create a Navigation menu you must have good knowledge of CSS and HTML. But since more and more designers are sharing their tutorials online, coding has become far easier. I have brought to you a total of 30 High class navigation menus along with their CSS and HTML Codes from across the web. You just need to copy and paste the codes and that’s it!


The Horizontal Navigation Menus below are mostly created by Christopher and Highdots and some by me. I have modified most of the codes in order to make them work in blogger and have also made them pretty easy to be understood by most of you. Further all images are uploaded in my Picasa web album so no effort required on your side.




How To Add These Navigation Menus To Blogger


To add your selected navigation menu to your blogger template follow these steps,

  1. Go To Blogger > Layout
  2. Click Add a Gadget or Add a Page element
  3. Choose HTML/JavaScript widget
  4. Simple Paste the Navigation Menu Code inside HTML/JavaScript widget
  5. Hit Save
  6. Drag HTML/JavaScript widget and drop it just under your Blog Header, as shown below,


Add-Navigation-Menu-In-Blogger


    7.   Finally view your blog to see something hanging below your Blog Header/Logo.


See Live Demo of MBT Navigation Menu #3


To change the links, Edit this part of the HTML in all codes below,


<li><a href="#" ><span>Link 1</span></a></li>
  <li><a href="#" ><span>Link 2</span></a></li>
  <li><a href="#" ><span>Link 3</span></a></li>
  <li><a href="#" ><span>Link 4</span></a></li>
  <li><a href="#" ><span>Link 5</span></a></li>
  <li><a href="#" ><span>Link 6</span></a></li>
  <li><a href="#" ><span>Link 7</span></a></li>


Replace the hash(#) sign with your Page Links /URL and replace Link1, Link2, Link3 etc with your Page Titles. If you wish to add or delete a tab then simply add or delete this line,



<li><a href="#" ><span>Link n</span></a></li>



As a designer I always look for inspiration that can be useful for both my readers and for my designing projects.  I hope the resource below will be of great use to Bloggers from all platforms and to designers. Start choosing your favorite Navigation Menu and do not hesitate to ask me if you needed help in customizing it.




Live demo 1 :: Live Demo 2
 


Tip:- To See Demo Of Other Menus, Simply Copy Paste The Code Inside MBT HTML Editor and Hit Preview To See It Live.


MBT Navigation Menu #1



No Image Used

Black-Orange








MBT Navigation Menu #2



No Image Used


Purple-White-Navigation






MBT Navigation Menu #3



No Image Used


Boxed 1






MBT Navigation Menu #4



 No Image Used


LIGHT-GREY




MBT Navigation Menu #5



 Bulleted-top-Navigation






Tabs Menu #6


Tab Menu I 




Tabs Menu #7


Tab Menu G




Tabs Menu #8


Tab Menu F

CSS CODE:




Tabs Menu #9



No Image Used

ZDnet Emulation






Tabs Menu #10


Tab Menu E




Tabs Menu #11


Tab Menu D




Tabs Menu #12


Tab Menu 12






Tabs Menu #13


Tab Menu 11 




Tabs Menu #14


Tab Menu 10




Tabs Menu #15


Tab Menu 9




Tabs Menu #16


Tab Menu 6




Tabs Menu #17


Tab Menu 8




Tabs Menu #18


Tab Menu 7




Tabs Menu #19


Tab Menu K




Tabs Menu #20


Tab Menu 4 




Tabs Menu #21


Tab Menu 3 




Tabs Menu #22


Tab Menu 2 






Tabs Menu #23


Square 




Tabs Menu #24



 No Image UsedHorizontal Buttons 




Tabs Menu #25


  Tab Menu H








Tabs Menu #26


Tab Menu 1




Tabs Menu #27


Tab Menu A 






Tabs Menu #28


Tab Menu 5




Tabs Menu #29



 Tab Menu B




Tabs Menu #30


Tab Menu J





Happy New To All my Readers! I know I could give you no special gift other than my tutorials. This was my last post of year 2009 :>. I thank everyone for making 2009 a memorable year for me. Wishing best of luck to everyone.
Posted by at No comments:

Tanzanite Template : Three Column Stunning Blogger Template!



Happy new year in advance to all our dearest readers, friends, visitors and everyone who made MBT Blog a True Success within 6-7 months. Kindly accept our New Year Gift of a Free three column stunning Blogger template entitled “Tanzanite”. This template was created in no more than four hours out of Cute Box Template during a chat conversation with one of my dearest reader Manisha of ShirdiSaibaba. She wanted a unique template and asked me for help. I just started by customizing Cute Box but after Four hours the entire look of the template changed to something entirely different and far cuter!

I named it Tanzanite which is the name of a precious Gem stone found in Tanzania (Africa) where Manisha lives. Lets First have a look at this pretty Template,

 Tanzanite-Template

Features

I kept some features secret from Manisha because unique resource is what we always aim for :D Here is a complete list of the features found in Tanzanite Template
  1. Header With Posts Feeds and Comment Feeds
  2. Beautiful Navigation And Sub Navigation
  3. Left and Right Sidebars. With two mini sidebar on right 
  4. Well organized Post Header with separate date, time and label sections
  5. Post body with Attractive BlockQuote
  6. Bullet lists with Image Hover Effect
  7. Author and Reader Comments Different Style
  8. Post Footer With Stunning Social Bookmarking Icons –The Flapper!
  9. Post Footer With Related Post Widget
  10. Posts summarized With Read More link
  11. Customized Blogger Comment Form!
  12. Comment Avatars
  13. Flexible Search Box
  14. Four Column Footer Widget. One Column Can accommodate as many widgets as you can add!
  15. Customized Author Profile With Hover Effect!
  16. Bookmarking Widget For Homepage!
  17. And The List Continues…

Customization

Below I have discussed some important precautionary and customization steps for Using Tanzanite. Click each link for details.
  1. Back Up your current Blogger template
  2. Back Up your Blogger widgets
  3. Upload Tanzanite Template
  4. Edit The Main Navigation Menu
  5. Edit The Sub Navigation Menu
You should save your current blogger template first for safety precautions. To do this follow these steps,
  1. Go To Layout > Edit HTML
  2. Click the link that says “Download Full Template“. As shown in the image below,
backup-Blogger template
    3.    When asked where to save the template, choose a safe location in your hard drive.
    4.    Done!
To save your current widgets codes, follow these steps,
  1. Go To Layout
  2. Open each widget one by one and copy the code inside it along with the title and paste it in a notepad (not a WordPad)
  3. Save the notepad in a safe location
  4. Done!
After you have downloaded Tanzanite Template, you will then have to replace your current template with it,
  1. Go To Layout > Edit HTML
  2. You will see a box with two buttons at its side that says “ Browse” and “Upload” as shown below,
Upload Blogger Template
    3.    Click the browse button, locate the “Tanzanite Template” file and then click the upload button
    4.    Now you will be asked that certain widget data will be lost if you click save. Since we have already backed up all our widgets so we don’t care. So Click the button that says “Confirm Save”. View your blog to see the new change! :>
Main-Navigation-Menu
To edit the Main navigation menu, follow these steps,
  1. Go to Layout > Edit HTML
  2. Search for <div id='navleft'>   (Tip:- Press Ctrl + F )
  3. Just below <div id='navleft'> you will see a long chain of code as shown below,
<div id='navleft'>
      <ul>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='#'>Sitemap</a>
<ul>
<li><a href='#'>Sub Page 1</a>
<ul>
<li><a href='#'>Sub Sub Page 1</a></li>
<li><a href='#'>Sub Sub Page 2</a></li>
<li><a href='#'>Sub Sub Page 3</a></li>
</ul>
</li>
<li><a href='#'>Sub Page 2</a></li>
<li><a href='#'>Sub Page 3</a></li>
<li><a href='#'>Sub Page 4</a></li>
</ul> </li> <li><a href='#'>Contact</a>
<ul>
<li><a href='#'>Sub Page 1</a></li>
<li><a href='#'>Sub Page 2</a></li>
<li><a href='#'>Sub Page 3</a></li>
<li><a href='#'>Sub Page 4</a></li>
</ul> </li>
<li><a href='#'>About</a></li>
<li><a href='http://www.themobilehub.blogspot.com'>Download Tanzanite</a></li>
</ul>
</div>
Replace The Hash signs (#) with your page links and bolded black text with your Page titles. If you don’t want the drop down menu then simply delete the blue and red portion. Replace http://www.themobilehub.blogspot.com with your own page link.
If you want to add another link then simply paste this code just above </ul>
<li><a href='#'>Your Page Title</a></li>

Sub-Navigation-Menu
To edit the Sub navigation menu, follow these steps,
  1. Go to Layout > Edit HTML
  2. Search for <ul id='subnav'>   (Tip:- Press Ctrl + F )
  3. Just below <ul id='subnav'> you will see the following code,

<ul id='subnav'>
        <li>
          <a href='#'>Quick Tour</a>
           </li>
        <li>
          <a href='#'>Other Webs</a>
        </li>
<li>
          <a href='#'>About</a>
        </li>
        <li>
          <a href='#'>Contact</a>
        </li>
      </ul>
    </div>
Replace The Hash signs (#) with your page links/URL and bolded black text with your Page titles. To add another link simply paste this code just above </ul>
<li><a href='#'>Your Page Title</a></li>

Download

Note:- Subscribers have already been emailed the New year Gift (Tanzanite Template)!
To prevent misuse of our Blogger Resources we offer free Downloads to our subscribers only. If you wish to receive the Tanzanite Template and all other resources that have already been published or will be published then kindly submit your email ID by filling up the simple subscription form below,

As soon as we are informed that you have subscribed and activated MBT Feed Updates, we will email you the Download Copy instantly.



Posted by at No comments:

Customize Author Profile In Blogger



Thanks to Blogger you can easily customize your templates and widgets fully. While designing the Cute Box template I came across the coding for “Author Profile Widget”. The widget was using official Blogger Styles by default and I thought why not try editing them with our own customized fonts and colors. Fortunately with a simple use of CSS, the entire look was changed to something that may be of interest to most of you. I added some mouse hover effects to Author Profile image and author name and also added a small image of admin that appears when you hover your mouse cursor on it.

Have a look at it first (Remember to hover you mouse on it),

How To Customize Author/Admin Profile Using Simple CSS

To add this effect to your personal profile follow these steps,
  1. Go To Blogger > Layout
  2. Click Add a Page element or Add a gadget
  3. Select Author Profile Widget
  4. Now Go to Edit HTML
  5. Backup your template
  6. Search For ]]></b:skin>
  7. Just above ]]></b:skin> paste this code
.profile-img {
  float: left;
  margin: 0 5px 5px 0;
  padding: 4px;
  border:3px solid #289728;
}
.profile-img:hover {
  border:3px dotted #3B3A3B;
}
.profile-data {
  margin:0 10px 20px 10px;
  padding:0;
  font: bold 10pt "ms sans serif", verdana,Arial;
  color:#289728;
  line-height: 1.6em;
  text-align:left;
  text-transform:lowercase;
}
.profile-data:hover {
  color:#3B3A3B; }
.profile-datablock {
  margin:.5em 0 .5em;
}
.profile-datablock:hover {
  background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlIKjujoXzod0x-hpDqDJcypkfRNnagbGUlPUnEgDBv_xITQPLDQZ_7PY_NoYc4DoD20o_BnUgqgAQiWMXGUWKCBNAE2dscLYbKMX451G6k2DQRiD6WUFAdk_7TjwvRJRBfHIkzM1BmR8/s320/admin.png) no-repeat bottom right ;
}
.profile-textblock {
  color:#333;
  margin: 0.5em 0;
  line-height: 1.6em;
  padding:5px 0 5px 0;
  border-top:2px solid #289728;
  border-bottom:2px solid #289728; }
.profile-link {
display:none;
}
     8.    Save your template and Done!
Preview your blog to see your profile standing out!

Customization Guide

Each bolded text in the code above is described below,
(1)  Customize Image Border
border:3px solid #289728;
This code defines the image border width, style and colour in active mode. To change the width change this value –>3px and to change style change solid to dotted, dashed or outset etc. and to change colour of border change  #289728 to a different colour of your choice. Use our Colour Chart
(2)  Customize Image Border Which Appears On Mouse Hover
border:3px dotted #3B3A3B;
This code can be customized in a similar way as for part (1)
(3)  Customize The Author Name
color:#289728;
text-transform:lowercase;
color:#3B3A3B;
To change the colour of Author Name in active mode, change  #289728
To change the colour of Author Name on mouse hover, change  #3B3A3B
To Change all letters to capital then change lowercase to uppercase or if you want to make the first letter of each word capital then change lowercase to capitalize
(4) Customize The Author Introduction Text
color:#333
border-top:2px solid #289728;
  border-bottom:2px solid #289728;
To change the colour of the introduction text change #333
To change the the width, style and colour of the two borders that appear below and above the text then change 2px, solid and #289728 respectively

How to show or hide the link in Author Profile

By default I have removed the link that says “View My Complete Profile”  If you want to show this link then simply delete the following code from the above code,
.profile-link {
display:none;
}
If you want to hide the link then leave the above code as it is.

Posted by at No comments:

Can Google Be A Threat In Near Future?



Can Google be a Threat or not? Google has expanded widely during the few years with its purchase of major web services which includes Blogger Of course. There is no doubt that the billion dollar Company ran by Sergey Brin and Larry Page has occupied a great portion of the internet and it is still expanding. They have now around 520 Domains or may be more.
But the only thing on Google’ side that is creating a feeling of insecurity for many people is its lack of performance in the area of Help and Support Service. A company that was known for their prompt replies to the queries of their customers is now losing trust among its users.

The reason why I raised this point today is because I usually receive emails with complains that Blogger is not responding manually to some technical queries related to their Blogger accounts and therefore they ask me if I can help. By manually I mean the only reply you receive from Google support staff is an automated no-reply email that is really irritating, no Google employee actually replies by looking into the problem himself. They simply attach links to old queries that has to do nothing with the problem faced by the user. Further the attached solutions often take you to Blogger Help Forum or Google Groups which often contain unsolved problems!

I am writing some of the points that are indeed of great concern on Google’s side.
  1. Users are crying because they can not access their blog due to errors like bX-8wvcj8 and similar ones. Imagine this happening to your main blog while editing your template and no one out there to help!
  2. Just visit this blog knownissues.blogspot.com. The Blogger team is only claiming that they are looking into the issue and will resolve soon but when?
  3. Do you thing Blogger Help Forum has solved any of your major problem regarding the errors you face each day while accessing your blog?
  4. Google Pages will soon be closed but why? Why did they wasted people’s time into a purposeless service? I still can’t get a convincing reply.
  5. Google Scans our emails to display sponsored links! Where goes the privacy?
  6. AdSense Account is banned with no proper reason or clarification at amounts as high as $90-$256. Why don’t they ban it at $1?
  7. No easy way to register a complain of Copy Right Infringement. The only way is to post mail Google. But then you will have to wait for months for a reply!
  8. Sometimes Your competitors click your adSense ads and you get banned with an annoying message like this one,
It has come to our attention that invalid clicks have been generated on
the Google ads on your site(s). We have therefore disabled your Google
AdSense account. Please understand that this step was taken in an
effort to protect the interest of the AdWords advertisers.
A publisher’s site may not have invalid clicks on any ad(s), including
but not limited to clicks generated by:
- a publisher on his own web pages
- a publisher encouraging others to click on his ads
- automated clicking programs or any other deceptive software
- a publisher altering any portion of the ad code or changing the
layout, behavior, targeting, or delivery of ads for any reason
Practices such as these are in violation of the Google AdSense Terms
and Conditions and program polices, which can be viewed at:
https://www.google.com/adsense/localized-terms?hl=en_US
https://www.google.com/adsense/policies?hl=en_US
Publishers disabled for invalid click activity are not allowed further
participation in AdSense and do not receive any further payment. The
earnings on your account will be properly returned to the affected
advertisers.
Sincerely,
The Google AdSense Team

Or something like this,
    While going through our records recently, we found that your AdSense
    account has posed a significant risk to our AdWords advertisers. Since
    keeping your account in our publisher network may financially damage
    our advertisers in the future, we’ve decided to disable your account.
    Please understand that we consider this a necessary step to protect the
    interests of both our advertisers and our other AdSense publishers. We
    realize the inconvenience this may cause you, and we thank you in
    advance for your understanding and cooperation.

Even if  you send a polite response to Google with enough evidence that you are not responsible for violating the AdSense TOS, you can hope to get a reply in a month or more! Imagine a reply if any after 30-70 days!
   9.    Google AdSense Fraud Click Detection tools have raised many questions like how can these tools differentiate if you are clicking or your business competitor. Your business competitor can cause disabling of your Adsense account using computer operated programs or even using a group of different computers. Cases like this have been reported in many forums. An example funny site that knows how to do it is www.clickmonkeys.com
10.     And The List goes on…..
I am really terrified at this moment, not that any harm has happen to me but I can feel a great threat to our blogs and income through adsense in near future. We as bloggers shed sweat and tear in writing quality, useful and interesting content and then do hard work day and night in bringing traffic to the blog through different means and at the end of the month expect a reward in terms of Ads revenue. But what if all our hard work is crushed down into pieces by an extremely annoying bX-8wvcj8  error which remain unsolved or an email from Adsense entitled as “Your Adsense Account Is Disabled” Can You expect to receive convincing answers to your questions starting with why?
For many people like you and I, Google is a blessing because it has provided us with everything that we need online but Google was a blessing even for those who curse it today. I don’t say I hate Google but I am afraid to say that I am some how disappointed with Google’s present attitude towards its users.
Let me know what are your experiences related to the Help and Support Services of Google and its present performance towards its service users.


Posted by at No comments:

Change Newer Posts, Older Posts and Home Links With Cute Images



Next-Previous-Home-Images The New Year is near and I thought why not gift my Blogger Readers with some thing that may be useful to them. I have created some Cute button images for the Newer Posts, Older Posts and Home Links that appear below all BlogSpot blogs. I hope you will like them.
This Button Set consists of seven image sub-sets categorized as small, large and medium and all are compressed in png format so it can be used in blogs with any background colour.

Have a look at them first,

Previous-Next-and-Home-Button Images

How To Add these Images instead of Newer Posts, Older Posts and Home Links in Blogger

I have already discussed this in my previous post Replace Newer, Older And Home Links With Shiny Buttons In Blogger Kindly read it. You will find some different buttons there!

Download These Buttons

To prevent misuse of our Blogger resources and goodies ,we offer all resources for free by email to our subscribers only. If you have not subscribed yet kindly do so by submitting your email address in the subscription form on the right sidebar. By becoming a subscriber you will indeed receive quality Blogger Resources that you never expected to get for free!
Subscribers have been emailed these Icons. Kindly Check your Inboxes.


Posted by at No comments:
Subscribe to: Posts (Atom)