How to add pinky navigation menu to blogger. 0

How to add pinky navigation menu to blogger.

Follow simple and easy step to adding this navigation menu in blogger ---->>>>

* First go to your blogger Dashboard.

* Now Click in design tab and EDIT HTML.

* Click in small box to expand your blogger Template.

* After above step find this Code ]]</b:skin> by CTRL+F key.

* Copy below code and paste before ]]</b:skin>

#menu {
background: #fff;
height: 28px;
margin: 3px 0 0 0;
padding: 0;
border: 1px solid #ddd;
}
#menu .current a {
background: #fd0859;
color: #fff !important;
}
#menu ul {
float: left;
list-style: none;
margin: 0 0 0 1px;
padding: 0;
}
#menu li {
float: left;
list-style: none;
margin: 0;
padding: 0;
border-right: 1px solid #ddd;
}
#menu ul li {
margin: 0 0 0 -1px;
padding: 0;
list-style: none;
border-right: 1px solid #045;
}
#menu li a, #menu li a:link, #menu li a:visited {
margin: 0;
padding: 7px 12px 7px 12px;
color: #333;
display: block;
font-size: 14px;
font-weight: bold;
}
#menu li a:hover, #menu li a:active {
background: #fd0859;
margin: 0;
padding: 7px 12px 7px 12px;
color: #fff;
display: block;
text-decoration: none;
border-bottom: none;
}
#menu li li a, #menu li li a:link, #menu li li a:visited {
background: #fff;
width: 130px;
float: none;
margin: 0;
padding: 7px 12px 7px 12px;
color: #000;
border-bottom: 1px solid #ddd;
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
}
#menu li li a:hover, #menu li li a:active {
background: #fd0859;
color: #fff;
padding: 7px 12px 7px 12px;
}
#menu li ul {
z-index: 9999;
position: absolute;
height: auto;
width: 155px;
margin: 0;
padding: 0;
left: -999em;
}
#menu li li {
border: none;
}
#menu li ul a {
width: 120px;
}
#menu li ul a:hover, #menu li ul a:active {
}
#menu li ul ul {
margin: -29px 0 0 156px;
border: none;
}
#menu li:hover ul ul, #menu li:hover ul ul ul, #menu li.sfhover ul ul, #menu li.sfhover ul ul ul {
left: -999em;
}
#menu li:hover ul, #menu li li:hover ul, #menu li li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul, #menu li li li.sfhover ul {
left: auto;
}
#menu li:hover, #menu li.sfhover {
position: static;
}

* Again find this code </head> by CTRL+F key.

* Now copy below code and paste before </head>

<script type='text/javascript'>
<!--//--><![CDATA[//><!--
sfHover = function() {
        if (!document.getElementsByTagName) return false;
        var sfEls = document.getElementById("menu").getElementsByTagName("li");

        for (var i=0; i<sfEls.length; i++) {
                sfEls[i].onmouseover=function() {
                        this.className+=" sfhover";
                }
                sfEls[i].onmouseout=function() {
                        this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
                }
        }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]>
</script>

* Now click to save your blogger Template.

* Now go to your blogger Dashboard and click in design tab.

* Now you are here ---->>> Page Element,

* Click in Add Gadget which is in your blogger Sidebar.

* When open new window click in HTML/javascript from list.

* When open new blank box copy below code and paste in blank box.

<div id='menu'>

<li class='current'><a href='YOUR BLOG URL HERE'>Home</a></li>
<li class='cat-item'><a href='TAB 1 URL HERE' title='tab1'>TAB1 TITLE HERE</a></li>
<li class='cat-item'><a href='TAB 2 URL HERE' title='tab2'>TAB2 TITLE HERE</a></li>
<li class='cat-item'><a href='TAB 3 URL HERE' title='tab3'>TAB3 TITLE HERE</a>
<ul class='children'>
<li class='cat-item'><a href='SUB TAB 1 URL HERE' title='Link 1'>SUB TAB1 TITLE HERE</a></li>
<li class='cat-item'><a href='SUB TAB 2 URL HERE' title='Link 2'>SUB TAB2 TITLE HERE</a></li>
<li class='cat-item'><a href='SUB TAB 3 URL HERE' title='Link 3'>SUB TAB3 TITLE HERE</a></li>
</ul>
</li>

</div>

NOTE:- Remove Highlighted Text in above code With your own ok

* Now Click to save your HTML/javascript code and drag and drop This element Below your Blog Header ok and again click in save button and you are done . Cheers

blogger tutorials Social Bookmarking Blogger Widget

I'm reading: How to add pinky navigation menu to blogger. ~