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 ]] by CTRL+F key.
* Copy below code and paste before ]]
#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 by CTRL+F key.
* Now copy below code and paste before
* 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.
* 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 comments:
Post a Comment