Modification Your Navbar Menu for Blogger ( CSS ) Cools|NETTER KINGDOM Modification Your Navbar Menu for Blogger ( CSS ) Cools

Wednesday, March 9, 2011

Modification Your Navbar Menu for Blogger ( CSS ) Cools




Navbar menu is cool ya, hopefully useful. I make it from CSS3, two days of tweaking my brain, I can finally. If interested, just copied it.

Fully Customizable:
Any design can be realized through CSS style definitions and optional custom images.

Based on XML and CSS:
NavBar structure and visual appearance are defined through industry standards XML and CSS.

Cross-Browser Compatibility: Supports IE5-7, Firefox 1-2, Netscape 7-8, Mozillas, Opera 8-9, Safari 1.

Here the picture of this navbar :


Here's how:

1. put this code before: <b:skin>

<link rel='StyleSheet' href='http://sites.google.com/site/gurukusakti/model/navmenu.css' type='text/css'/>


OR download it first css style code in the "http"style above, then copy and paste the code in it before ]]></ b: skin>


2. Note the first illustration <ul> menu, and <li>, the following:

Each <li> should be closed with </ li>, and every <ul> should be closed with </ ul>
Such examples of the illustrations:

<ul>---opening

<li>----open---MAIN MENU1
<ul>----open---
<li>----open---
----insert subnya menu here----
---close-----</li>
---close-----</ul>
---close-----</li>

<li>MAIN MENU2
<ul>
<li>
-----insert subnya menu here----
</li>
</ul>
</li>

<li>MAIN MENU3
<ul>
<li>
-----insert subnya menu here----
</li>
</ul>
</li>

---closing---</ul>



Copy the code below into after <body>, or substitute your Navbar HTML code with this code below:


<ul class='topmenu' id='css3menu1' style='border-width:1px 1px 0 1px;border-style:solid;border-color:#fffff;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;'>

<li class='topmenu'><a href='' title='HOME'><img src='http://4.bp.blogspot.com/_ieMMucroqWY/TQYtzYhCZbI/AAAAAAAABK8/eUHdHSLyT4c/S1600-R/blue_circle%2B-%2Bhome2.png'/>HOME</a></li>

<li class='toproot'><a href='#' title='TIPS AND TRICK '><img src='http://2.bp.blogspot.com/_ieMMucroqWY/TQYt9ImZa2I/AAAAAAAABLE/qZgLd1szj8A/S1600-R/blue_circle%2B-%2Binfo.png'/>TIPS AND TRICK</a>
<ul>
<li> <a href='#' title='TriCk Blogging '><span>Trik Blogging</span></a>
<ul>
<li><a href='link-sampean'>Trik Blogging 2.1.1</a></li>
<li><a href='link-sampean'>Trik Blogging 2.1.2</a></li>
<li><a href='link-sampean'>Trik Blogging 2.1.3</a></li>
</ul>
</li>
<li> <a href='#' title='Trick computer '><span>Trick computer </span></a>
<ul>
<li><a href='link-sampean'>Trick computer 2.1.1</a></li>
<li><a href='link-sampean'>Trick computer 2.1.2</a></li>
<li><a href='link-sampean'>Trick computer 2.1.3</a></li>
</ul>
</li>
</ul></li>

<li class='toproot'><a href='#' title='Label Download '><img src='http://2.bp.blogspot.com/_ieMMucroqWY/TQYt9ImZa2I/AAAAAAAABLE/qZgLd1szj8A/S1600-R/blue_circle%2B-%2Binfo.png'/>DOWNLOADS</a>
<ul>
<li><a href='link-sampean'>Download Script</a></li>
<li><a href='link-sampean'>Download free</a></li>
<li><a href='link-sampean'>Download free</a></li>
</ul></li>

<li class='topmenu'><a href='#' title=' Label Software '><img src='http://2.bp.blogspot.com/_ieMMucroqWY/TQYvVz9OvoI/AAAAAAAABLU/EqV4cK7v4_I/S187/blue_circle%2B-%2Bstar.png'/>SOFTWARE</a></li>

<li class='topmenu'><a href='#' title='Label Internet '><img src='http://4.bp.blogspot.com/_ieMMucroqWY/TQYuK8IA__I/AAAAAAAABLM/7you6vrBBBQ/S1600-R/blue_circle%2B-%2Bok.png'/>INTERNET</a></li>

<li class='topmenu'><a href='#' title='Label About Me'><img src='http://4.bp.blogspot.com/_ieMMucroqWY/TQRM9Ii9x7I/AAAAAAAABJU/C2jGJeacKyM/S187/tech.png'/>ABOUT ME</a></li>

<li class='topmenu'><a href='#' title=' MODELS OF LEARNING '><img src='http://2.bp.blogspot.com/_ieMMucroqWY/TQYt9ImZa2I/AAAAAAAABLE/qZgLd1szj8A/S1600-R/blue_circle%2B-%2Binfo.png'/>CONTACT</a></li>

</ul>



3. How to setup:
a. Changing the menu image by changing the link in the image (<img src = "http://2.bp.blogspot.com/ .................

b. Each "class =" topmenu "is used for the main menu it does not exist dropdwon. And Every" class = "toproot" dignkan to main menu imaginable SUB drop down menu

c. For the width adjusted to your blog, how: writing HOME, DOWNLOAD the order itself, for example for example if an extension navigation, writing letters "HOME" can be a little "home ". Likewise, if the navigation stands, it means that there are letters in Extend example "HOME"to "MY HOME"
etc ...

d. To add its main menu, please copy it from <li> to the closing </ li>

e. how to remove the sub menu is the same, delete the start of <li> up to </ li> tag. or from <ul> to </ ul> tag.

4.
It's up to you, the follow is fine, not too may FINE TOO, if it is useful to others ... FOR example, YOU can LOOK here:

PREVIEW

Comments :

2 komentar to “Modification Your Navbar Menu for Blogger ( CSS ) Cools”

Dennis Miller said...
on 

really good article...
website development company in bangalore

gay telephone said...
on 

Sweet blog! I found it while searching on Yahoo News. Do you have any tips on how to get listed in Yahoo News? I’ve been trying for a while but I never seem to get there! Thanks

Post a Comment

Please don`t spaming !
Please do not put a link in the comments box. Author of comments have been getting backlinks from this blog.
I will deleted if your comment is spam or put your link IN THE COMMENTS BOX !!!
Have a nice day my friend... :D

Top Commenters