HOW TO MAKE A SIMPLE HORIZONTAL MENU HOVERING ABOVE BLOG

When you have created a blog that becomes all banggan , it is absolutely considered how you give comfort to the blog visitors . Because of the attractiveness of a blog not only from the content of the article only, a navigation system that makes it easy for visitors to explore your blog will make them linger in your blog . One of the navigation system on the Blog which will be discussed in this article is How to Make a Simple Horizontal Menu Hovering Above Blog . By adding the javascript code we will create a simple menu that hovers over your Blog. Please follow to make it here. 

          1.Login to your Blogger account , open the template and edit html .

        2. Afterward, you find this code ] ] > < / b : skin> , for easier use Ctrl + F. After the meet you just copy and paste the CSS below just above the code ] ] > < / b : skin> .

# NavbarMenu { background : # 000 ; widht : 400px ; height: 10px ; font - size : 11px ; font -family : Arial , Tahoma , Verdana , Times Roman ; Color : # fff ; Margin : 0px ; padding : 0px ; } # NavbarMenuleft {width : 400px ; float: left ; margin : 0 ; padding : 0 ; } # Nav { margin : 0 ; padding : 0 ; } # Nav ul { float: left ; list-style : none ; margin : 0 ; padding ; 0 ; } # Nav li { list-style : none ; margin : 0 ; padding ; 0 ; } # Nav li a , # nav li a : link , # nav li a : visited {background : # 222222 ; height: 15px ; color: # fff ; display: block ; font-size ; 11px ; font-family : Arial , verdana , Tahoma , Times Romantext -transform ; none ; text-decoration ; none ; margin : 0 ; padding -top : 6px ; padding - bottom : 5px ; padding-left : 13px ; padding-right : 13px ; border- right : 1px solid # 000 ; } # Nav li a : hover , # Nav li a: active {background : # 7f7f7f ; color: # 222222 ; margin : 0 ; padding -top : 6px ; padding -bottom : 5px ; padding-left : 13px ; padding-right : 13px ; text-decoration : none ; } # Nav li li a , # Nav li li a: link , # Nav li li a : visited {background : # 7f7f7f ; width: 150px ; color: # fffff ; font-size : 11px ; font-family : Arial , ; font-weight : strong ; text-transform : none ; float : none ; margin : 0 ; padding : 7px 10px ; border: 1px solid # 000 ; } # Nav li li a : hover , # Nav li li a: active {background : # 222222 ; color: # 7f7f7f ; padding : 7px 10px ; } # Nav li { float: left { padding : 0 ; } # Nav li ul { z - index : 9999 ; position: absolute ; left: - 999em ; height: auto ; width: 170px ; margin : 0 ; padding : 0 ; } # Nav ul li a {width : 140px ; } # Nav ul li ul { margin : - 32px 0 0 171px ; } # Nav li : hover ul ul , # Nav li : hover ul ul ul , # Nav ul ul li.sfhover , # Nav ul ul ul li.sfhover {left : - 999em ; } # Nav li : hover ul , # Nav li li : hover ul , # Nav li li li : hover ul , # Nav ul li.sfhover ,
# Nav ul li li.sfhover , # Nav ul li li li.sfhover {left : auto ; } # Nav li : hover , # Nav li.sfhover {position : static ; }

3.The finished save the template .

4 .. Out of the edit html and find the layout , find HTML / Javascritp . Copy the code below and paste ( select HTML ) .

&lt;Styletype=”text/css’&gt;#gb{position:fixed;top:0px;z-index:+1500;}*html#gb{position:relative;}gbcontent{float:right;bacground:#fff;padding:1px;}&lt;/style&gt;&lt;script type = "text / javascript " > showHideGB function ( ) { var gb = document.getElementByld ( " gb " ) ; var w = gb . offsetWidth ; gb.opened ? moveGB ( 0.30 - w ) : moveGB ( 20 - w , 0 ) ; gb.opened = ! gb.opened ; } function moveGB ( X0 , XF ) { var gb = document.getElementByld ( " gb " ) ; var dx = Math.abs ( x0 - xf ) > 10 ? 5 : 1 ; var dir = xf > x0 ? 1 : -1 ; var x = x0 + dx * dir - 100 ; gb.style.top = x.toString ( ) + " px " if ( x0! = xf ) <div id="gb"> < ; clss div = " gbtab " onclick = " showHideGB ( ) " > < / div > <div class="gbcontent"> <div class="menuhorisontal"> <ul id="nav"> ; <ul id="nav"> <li> <a href="Your URL Blog"> Home < / a> < / li >
<li> <a href="Your URL Blog"> Sitemap < / a> < / li >
<li> <a href="Your URL Blog"> Privacy < / a> < / li >
<li> <a href="Your URL Blog"> ContacMe  < / a> < / li >
<li> <a href="Your URL Blog"> Guesstbook < / a> < / li >
< / ul> < / li > < / li > < / ul > < / div > <script type="text/javascript"> var gb = document.getElementById ( " gb " ) ; gb . style.center = ( 20 - gb.offsetWidth ) . toString ( ) + " px " ; < / script > < / div > < / div >

        Please save the template after you complete the installation of all code . Red writing replace the blog address ( URL ) belongs to you and see the Blog . Hopefully this article provides benefits to you how How to Make a Simple Horizontal Menu Hovering Above Blog .

Judul: HOW TO MAKE A SIMPLE HORIZONTAL MENU HOVERING ABOVE BLOG ; Ditulis oleh Unknown ; Rating Blog: 5 dari 5

Posted in: Tips blog