Thursday, December 31, 2009

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.

Visit PsPrint.com to get the best deals in online printing services!
Posted by at No comments:
Labels:

Sunday, December 27, 2009

Tanzanite Template : Three Column Stunning Blogger Template!

Happy-New-Year 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

Demo | Download 

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.mybloggertricks.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.mybloggertricks.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.

Wishing you a memorable and happy new year :>
Posted by at No comments:
Labels: ,

Thursday, December 24, 2009

Customize Author Profile In Blogger

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),

 

Live Demo

 

 

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/AVvXsEgA9vBY6FbCfx_K8bSKWPY924PdPbQL0cBakISte7FbsYc5yaLOd4t2wsLDDOb6-kW4wZvb3QKgWix1df-E2mW0NwGxVi4zSQnUZ3b37iwPGYPBx-oz6XNsAMYt6vKl2LvpbQCNYb17HCs/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.

That’s All!

I hope you will find it easy and interesting. Any question is welcomed :>
Posted by at No comments:
Labels: ,
Subscribe to: Posts (Atom)