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>
* 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
|
0 Responses So Far: