New orange Color Navigation menu for blogger
Follow simple and easy step to adding this menu to your blog --->>>>
* First go to your blogger Dashboard.
* Now click in Design tab and edit HTML.
* Find this code ]] by CTRL+F key easily.
* Copy below code and paste before ]]
#navcontainer{height:60px;display:block;overflow:hidden;margin-bottom:5px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgV-T7RfmkliiO50VrkWAR4OjuRatK1VI1bm9OoinzksmZncWoKvtfsCr2GBm-Mhz8GRpdYTO24hiwemy1OQloDOfxUMDOsqYeJUMvvtzHlSzZavo92GSnfWjX_Rdi-wHVNWwSlXsXQ4vvx/s1600/nav-bg.png) left top no-repeat}
#navcontainer .current-cat a{color:#FFF;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKBdqOKqHqn4u-_OsURzUNepyBURjRB6EW2L4H1FPYg2eie0Lp_1uXJJ9n9uSajlLLP7Lfq0rd_yxn2t6Pw8YntDvwFdloOq0FlmyRdhRBuKWCgFvlcW_qygZP1xvUE4XrpeNK5FV1-DUX/s1600/nav-hover.png) center 56px no-repeat;text-decoration:underline}
#nav a,#subMenusContainer a{text-decoration:none;display:block}
#nav a{margin:0;float:left;background:none;padding:24px 16px;text-transform:uppercase;color:#FFF;font-weight:bold;font-size:12px}
#nav li a:hover,#nav li a:focus,#nav a.mainMenuParentBtnFocused{color:#FFF;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKBdqOKqHqn4u-_OsURzUNepyBURjRB6EW2L4H1FPYg2eie0Lp_1uXJJ9n9uSajlLLP7Lfq0rd_yxn2t6Pw8YntDvwFdloOq0FlmyRdhRBuKWCgFvlcW_qygZP1xvUE4XrpeNK5FV1-DUX/s1600/nav-hover.png) center 56px no-repeat;text-decoration:underline}
#subMenusContainer a,#nav li li a{color:#fff;font-size:12px;text-align:left;background-color:#E96516;padding:8px 24px}
#subMenusContainer a:hover,#subMenusContainer a:focus,#subMenusContainer a.subMenuParentBtnFocused{background-color:#FF721D;color:#FFF}
.subMenuParentBtn{background:url(../img/arrow_right.gif) right center no-repeat}
.subMenuParentBtnFocused{background:url(../img/arrow_right_over.gif) right center no-repeat}
.mainMenuParentBtn{}
.mainMenuParentBtnFocused{}
.smOW{display:none;position:absolute;overflow:hidden;padding:0 2px;margin:0 0 0 -2px}
#nav,#nav ul,#nav ol,#subMenusContainer ul,#subMenusContainer ol{padding:0;margin:0;list-style:none;line-height:1em}
#nav ol,#nav ul,#subMenusContainer ul,#subMenusContainer ol{background:none;left:0}
#nav li{background-repeat:no-repeat;background-position:100% 5px;cursor:pointer;float:left;margin:0 2px 0 0;padding:0 2px 0 0;height:60px;display:inline;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpbRks7NteNxvzPrUZCFgONT6t1wQm_wrjSyuFuWb2NJa50f84ExzJvkMWhg8-BSD43-wCZkSlCBPoB_YEDyTg6vMVMIz8utpvJ_OY8h7D1dCPUpbQ8XkHKSWnRHl_pMRUbjN4RSd3Zn3c/s1600/nav-separator.png) left top no-repeat}
#nav li:first-child{background:none}
#subMenusContainer li{list-style:none}
#nav{width:950px;margin:0 auto;clear:both;overflow:hidden;font-size:12px;display:block}
#nav .children{display:none}
#subMenusContainer{display:block;position:absolute;top:0;left:0;width:100%;height:0;overflow:visible;z-index:1000000000}* Again find this code by CTRL+F key.
* Copy below code and paste before
* Now click to save your blogger Template.
* Again go to your blogger dashboard and click in design tab .
* Now you are here --->>> Page Element.
* Click in Add Gadget which is in your blog sidebar.
* When open new window choose HTML/javascript from list.
* When open new blank box copy below code and paste in blank box.
* Now click to save your HTML/javascript and after saving this element drag and drop below blogger header and click again save button ok and you are done .... CHEERS
0 comments:
Post a Comment