CARA MEMBUAT MENU HORIZONTAL SEDERHANA MELAYANG DI ATAS BLOG

   Ketika anda telah membuat sebuah Blog yang menjadi ke-banggan, maka sangat mutlak diperhatikan bagaimana anda memberikan kenyamanan bagi pengunjung Blog tersebut. Karena daya tarik sebuah Blog bukan hanya berasal dari isi artikel saja, sistem navigasi yang memberikan kemudahan bagi pengunjung untuk menjelajahi Blog anda akan membuat mereka betah berlama-lama di Blog anda. Salah satu sistem navigasi di Blog yang akan di bahas artikel ini adalah Cara Membuat Menu Horizontal Sederhana Melayang Di Atas Blog. Dengan menambahkan kode javascript kita akan membuat menu sederhana tersebut melayang di atas Blog.Silahkan anda ikuti cara membuatnya di sini :

          1.Login ke akun Blogger anda, buka template dan edit html.

      2.Kemudian anda cari kode ]]></b:skin>, agar lebih mudah gunakan Ctrl + F. Setelah ketemu langsung saja anda copy CSS di bawah dan pastekan tepat di atas  kode ]]></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 li ul a {width: 140px;}#Nav li ul ul {margin: -32px 0 0 171px;}#Nav li:hover ul ul, #Nav li:hover ul ul ul, #Nav li.sfhover ul ul, #Nav li.sfhover ul ul ul {left: -999em;}#Nav li:hover ul, #Nav li li:hover ul, #Nav li li li:hover ul, #Nav li.sfhover ul,
#Nav li li.sfhover ul, #Nav li li li.sfhover ul {left: auto;}#Nav li:hover, #Nav li.sfhover{position: static;}

3.Setelah selesai save template.

4..Keluar dari edit html dan cari tata letak, cari HTML/Javascritp. Copy kode di bawah dan pastekan (pilih HTML).

<Styletype=”text/css’>#gb{position:fixed;top:0px;z-index:+1500;}*html#gb{position:relative;}gbcontent{float:right;bacground:#fff;padding:1px;}</style><script type=”text/javascript”>function showHideGB(){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”><div clss=”gbtab” onclick=”showHideGB()”></div><div class=”gbcontent”><div class=”menuhorisontal”><ulid=”nav”><ulid="nav">                               <li><ahref=”ALAMAT BLOG ANDA”>Home</a></li>
<li><a href=”ALAMAT BLOG ANDA”>Sitemap</a></li>
<li><a href=”ALAMAT BLOG ANDA”>Privacy</a></li>
<li><a href=”ALAMAT BLOG ANDA”>ContacMe</a></li>
<li><a href=”ALAMAT BLOG ANDA”>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>

        Silahkan simpan template setelah pemasangan semua kode anda selesaikan. Tulisan yang berwarna merah ganti dengan alamat blog ( URL ) milik anda dan lihat Blog. Semoga artikel ini memberikan manfaat bagi anda bagaimana Cara Membuat Menu Horizontal Sederhana Melayang Di Atas Blog.

Judul: CARA MEMBUAT MENU HORIZONTAL SEDERHANA MELAYANG DI ATAS BLOG ; Ditulis oleh Unknown ; Rating Blog: 5 dari 5

Posted in: Tips Blog