Cara Membuat Menu Horizontal dengan Css pada Blog

Pada pembahasan kali ini, Blogger Tutorial akan membahas mengenai bagaimana cara membuat menu horizontal dengan CSS pada blog/blogspot. Menu horizontal berfungsi untuk mempermudah navigasi yang di adopsi dari windows. Menu horizontal akan membuat tampilan blog menjadi elegan dan tampak menarik.

Untuk menerapkannya ikutilah langkah-langkah dibawah ini :
  • Login ke dashboard blog kamu --> Rancangan --> Edit HTML
  • Geser kebawah dan temukan kode </head>
  • Copy kode dibawah ini sebelum  </head>
<style type='text/css'>
#foxmenucontainer46{height:30px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidrLB7eRItx0w3Vr4EdsDzLq6Tc__vdDA80rc5zBYoU0V1mJKuGeGCPs2GPMwfgEcD96KqFtDCU-VLR1p_g_33_J2OMmYKjzK9AVl8i1Thx9aOtaFB2wP3a8YfuGHYVj50B5dDBLxk8XfD/) repeat; display:block; padding:0px 0 0px 0px; font: 10px Tahoma,Century gothic,verdana, Arial, sans-serif; font-weight:normal; text-transform:uppercase; overflow:hidden; }

#menu46{margin: 0px; padding: 0px 10px; width:100%; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidrLB7eRItx0w3Vr4EdsDzLq6Tc__vdDA80rc5zBYoU0V1mJKuGeGCPs2GPMwfgEcD96KqFtDCU-VLR1p_g_33_J2OMmYKjzK9AVl8i1Thx9aOtaFB2wP3a8YfuGHYVj50B5dDBLxk8XfD/) repeat; height:30px; border-bottom:1px solid #dddddd; }

#menu46 ul {float: left; list-style: none; margin: 0px; padding: 0px; }

#menu46 li {float: left; list-style: none; margin: 0px; padding: 0px; }

#menu46 li a, #menu46 li a:link, #menu46 li a:visited {color: #444; display: block; margin: 0px; padding: 9px 15px 9px 15px; text-decoration: none; }

#menu46 li a:hover, #menu46 li a:active {background:#333A3F; color: #fff; margin: 0px; padding: 9px 15px 9px 15px; text-decoration: none; }

#menu46 li li a, #menu46 li li a:link, #menu46 li li a:visited {background:#202020; width: 150px; color: #bbb; font-size: 10px; font-family: tahoma, century gothic,Georgia,  sans-serif; font-weight: normal; float: none; margin: 0px; padding: 9px 10px 9px 10px; border-bottom: 1px solid #282828; }

#menu46 li li a:hover, #menu46 li li a:active {background: #121212 ; color: #fff; padding: 9px 10px 9px 10px; }

#menu46 li ul {z-index: 9999; position: absolute; left: -999em; height: auto; width: 170px; margin: 0px; padding: 0px; }

#menu46 li li {  }

#menu46 li ul a {width: 140px;}

#menu46 li ul a:hover, #menu46 li ul a:active { }

#menu46 li ul ul {margin: -31px 0 0 170px; }

#menu46 li:hover ul ul, #menu46 li:hover ul ul ul,
#menu46 li.sfhover ul ul, #menu46 li.sfhover ul ul ul {left: -999em;}

#menu46 li:hover ul, #menu46 li li:hover ul, #menu46 li li li:hover ul, #menu46 li.sfhover ul, #menu46 li li.sfhover ul, #menu46 li li li.sfhover ul {left: auto; }

#menu46 li:hover, #menu46 li.sfhover {position: static;}

</style>
Catatan : Ganti https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidrLB7eRItx0w3Vr4EdsDzLq6Tc__vdDA80rc5zBYoU0V1mJKuGeGCPs2GPMwfgEcD96KqFtDCU-VLR1p_g_33_J2OMmYKjzK9AVl8i1Thx9aOtaFB2wP3a8YfuGHYVj50B5dDBLxk8XfD/ jika kamu ingin merubah background menu tersebut.
  • Simpan tamplate blog mu
  • Sekarang buka dasboard blog --> Rangcangan --> Tambah gadget
  • Pilih HTML/javascript dan tambahkan kode dibawah ini :
<div id="foxmenucontainer46">

<div id="menu46">

<ul>

<li><a href="#">Home</a></li>

<li><a href="#" title="#">HTML</a></li>

<li><a href="#" title="#">CSS</a></li>

<li><a href="#" title="#">Java Script</a></li>

<li><a href="#" title="#">Templates</a></li>

<li><a href="#" title="#">Register</a></li>

<li><a href="#" title="#">Subscribe</a></li>

<li><a href="#" title="#">About us</a></li>

<li><a href="#" title="#">Contact</a></li>

<li><a href="#" title="#">Privacy Policy</a></li>

</ul>

</div>
</div>

<div class="clear"/></div>
Selesai dan simpan, maka hasilnya akan tampak seperti gambar dibawah ini

Read Users' Comments (0)

0 Response to "Cara Membuat Menu Horizontal dengan Css pada Blog"

Posting Komentar