Home » » Cara Membuat Tab Menu Horizontal Dropdown Pada Blog dengan Script CSS (massive blue dropdown)

Cara Membuat Tab Menu Horizontal Dropdown Pada Blog dengan Script CSS (massive blue dropdown)

Ditulis Oleh Beny Setiawan pada Jumat, 03 Februari 2012


Melanjuti bahasan Membuat Menu dropdown blog yaitu Cara Membuat Tab Menu Dropdown/Bercabang Horizontal Pada Blog . Nah sekarang kita akan membahas tentang Cara Membuat Tab Menu Horizontal Dropdown Pada Blog dengan Script CSS (massive blue dropdown). Menu Navigasi tersebut cukup sederhana dengan background hitam dan jika disorot mouse berwarna biru.
Untuk membuat menu dropdown tersebut bisa ikuti cara berikut :


1.  Login ke blogger
2.  sesudah dasbor, kemudian pilih Rancangan/Design, lalu pilih Edit HTML, untuk mengantisipasi adanya kesalahan, sebaiknya Download Template Lengkap terlebih dahulu.
3.  Cari kode ]]></b:skin>. untuk mempermudah bisa menggunakan tombol F3 pada keyboard.
4.  diatas bagian kode tersebut, masukan kode berikut :


menu{
border:none;
border:0px;
margin:0px;
padding:0px;
font: 67.5% "Arial", Arial;
font-size:14px;
font-weight:bold;
}
.menu ul{
background:#333333;
height:35px;
list-style:none;
margin:0;
padding:0;
font-size:14px;
font-weight:bold;
}
.menu li{
float:left;
padding:0px;
}
.menu li a{
background:#333333 url("http://i47.tinypic.com/qp53sw.jpg") bottom right no-repeat;
color:#cccccc;
display:block;
font-weight:normal;
line-height:35px;
margin:0px;
padding:0px 25px;
text-align:center;
text-decoration:none;
}
.menu li a:hover, .menu ul li:hover a{
background: #2580a2 url("http://i49.tinypic.com/13zbc53.jpg") bottom center no-repeat;
color:#FFFFFF;
text-decoration:none;
}
.menu li ul{
background:#333333;
display:none;
height:auto;
padding:0px;
margin:0px;
border:0px;
position:absolute;
width:225px;
z-index:200;
/*top:1em;
/*left:0;*/
}
.menu li:hover ul{
display:block;
}
.menu li li {
background:url('http://i45.tinypic.com/nvxxqg.jpg') bottom left no-repeat;
display:block;
float:none;
margin:0px;
padding:0px;
width:225px;
}
.menu li:hover li a{
background:none;
}
.menu li ul a{
display:block;
height:35px;
font-size:12px;
font-style:normal;
margin:0px;
padding:0px 10px 0px 15px;
text-align:left;
}
.menu li ul a:hover, .menu li ul li:hover a{
background:#2580a2 url('http://i50.tinypic.com/66elwh.jpg') center left no-repeat;
border:0px;
color:#ffffff;
text-decoration:none;
}
.menu p{
clear:left;
}



5.  Kemudian klik simpan template/ Save template.
6.  Lalu disamping Edit HTML, klik Elemen laman/Page Elemen. klik Add Gadget.
7.  Pilih HTML/Javascript, kemudian masukan kode berikut :



<div class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">IPA</a>
<ul>
<li><a href="#">Biologi</a></li>
<li><a href="#">Fisika</a></li>
<li><a href="#">Kimia</a></li>
</ul>
</li>
<li><a href="#">IPS</a>
<ul>
<li><a href="#">Geografi</a></li>
<li><a href="#">Sejarah</a></li>
</ul>
</li>
<li><a href="#">Matematika</a>
<li><a href="#">Jogoyitnan</a>
</li></li></ul>


</div>


Keterangan : ganti tanda # dengan url target yang diinginkan.
                    ganti juga misal home, IPA, IPS dsb. dengan teks yang akan ditampilkan di menu navigasi.


Pahami scriptnya, jika sudah mengerti anda akan bisa menambah atau mengurangi bagian dari menu navigasi horizontal dropdown massive blue tersebut. Contoh dari menu Navigasi ini di Nuradika.




Sekian informasi tentang Cara Membuat Tab Menu Horizontal Dropdown Pada Blog dengan Script CSS (massive blue dropdown). Semoga bermanfaat. Terima Kasih...

DiPosting Oleh : Beny Setiawan ~ Pakbendot.com

Artikel Cara Membuat Tab Menu Horizontal Dropdown Pada Blog dengan Script CSS (massive blue dropdown) ini diposting oleh Beny Setiawan pada hari Jumat, 03 Februari 2012. Terimakasih atas kunjungan Anda, serta kesediaan Anda membaca artikel ini. Kritik dan saran dapat anda sampaikan melalui kotak komentar.Wassalam..

:: HOME::

Share this article :

5 komentar:

  1. ALHAMDULILAH DARI SEKIAN BLOG YANG SAYA KUNJUNGI,RUPANYA INI YANG PALING GAMPANG....

    KUNJUNGAN BALIK BROO
    http://cepp-persib.blogspot.com

    BalasHapus
  2. Makasih Semoga informasi yang sya posting ini dapat bermanfaat buat anda....

    PAsti....

    BalasHapus
  3. makasih sob, infonya..
    klo mau di rata tengah gimana yaa..

    kunjungi blog saya ya sob

    www.muhammadzaelani.co.cc

    BalasHapus
  4. Foolback masbrow ..

    www.crazy-wap.blogspot.com

    BalasHapus

Silahkan Komentar dengan Baik Dan benar