Home » tutorial blog » 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)

Cara Membuat Website Undangan Nikah Online

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...

Salam, Reeza

Terima kasih atas kunjungan Saudara di blog kami, semoga bermanfaat :)

14 comments:

Deden Rizki said...: Thk visit ke blog saya mempunyai 2000 postingan mau copas silahkan; October 10, 2011 at 4:10 AM
Cek Info said...: nice info sy coba doloo =)); October 16, 2011 at 6:38 AM
The Only One said...: kalau mau nglebarin panelnya gimana gan...; November 5, 2011 at 1:13 AM
Anang Tri Wibowo said...: gan,,tadi kan contohnya di tab IPA ada biologi,fisika,kimia..
misal ane udah ada 12 postingan tentang IPA..
4 biologi
4 kimia
4 fisika..
kode htmlnya gmana gan?
contohnya masukin url-nya cuma 1 url soalnya
ane newbie..masih bingung...; November 23, 2011 at 7:30 PM
7UL said...: Udah ane coba tingkyu Gan... :); December 25, 2011 at 8:47 AM
bangtoyib said...: makasih Gan informasinya, saya lagi belajar modif blog nich.; January 26, 2012 at 4:24 AM
taufiqurrahman said...: info yg bagus. saya coba praktekkin tapi hasilnya cuma satu baris. baris kebawahnya gak ada. tolong dibantu ya mas..; February 15, 2012 at 3:04 AM
Sumaryanto said...: tks teman...sudah ada yambahan ilmu dari blog anda. dikit dikit nanti jadi banyak ilmunya. tks sekali lagi; February 17, 2012 at 2:42 AM
Unknown said...: Gan, kalau membuat url nya gimana caranya?
semisal saya membuat laman DOWNLOAD - TUTORIAL - TIPS BLOGGER, dll.. nah cara membuat link nya gimana?
tolong lihat blog saya, kekurangannya bagian apa. Terima kasih jika anda mau membantu saya.; February 29, 2012 at 9:31 PM
Nuradika Pradana Reeza said...: @Auriga Mualana Khasan : Anda bisa mendapat URL dengan membuat posting atau label. Misalnya ingin membuat label tentang TUTORIAL BLOG. Langkahnya adalah :
1.) Pada menu 'Edit Posting' centang posting yang berkaitan dengan TUTORIAL BLOG.
2.) Pada bagian atas klik 'Label Actions' kemudian New Label tulis dengan nama TUTORIAL BLOG
3.) Maka Anda mempunyai label TUTORIAL BLOG dengan URL (misal)
http://jogoyitnan-free.blogspot.com/search/label/TUTORIAL BLOG; March 4, 2012 at 1:52 AM
Fandi Adhitya said...: wah bagus nih tutorialnya..; March 7, 2012 at 1:14 AM
Anonymous said...: thx gan ilmunya, dh ngefek di blog saya.; June 4, 2012 at 8:07 AM
Teguh said...: gan, warnanya bisa diganti nggak?

kunjungi blog saya tambah follow ya hehehehe... http://mhdteguhs.blogspot.com/; July 12, 2012 at 6:15 AM
Unknown said...: Sipppp
Tararengkyu banget; September 18, 2012 at 5:16 PM