IQRO' - BACALAH

Master Of Tutorial

Cari

Home » » Cara Mudah Membuat Menu Drop Down atau Tab Menu di Blog

Cara Mudah Membuat Menu Drop Down atau Tab Menu di Blog

Sebelumnya backup template dulu..
1. Login ke blogger (yang diperbarui bahasa Indonesia)
2. Masuk ke template - edit html -  centang pada expand template widget
3. Cari kode ini ]]></b:skin> (gunakan ctrl+F untuk search) lalu tepat diatasnya letakkan kode ini
#NavbarMenu {background: #555 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv6g24ANup73tyrp9OQ27v6Bf3PNrGuHWRmlffjNcSFp_xyFeq5ZvECPncFCiPTXYpoUd9trrIttqSFm3zdt2_X1mRKBQgXMqebqHHyh9FTSw_ypIGtZRAfJ6A4tkktaMZBs5NsGxqc74/s400/navbar11.png);width: 960px;height: 35px;font-size: 12px;font-family: arial, Verdana;color: #FFF;font-weight: bold;margin: 0;padding: 0;}#NavbarMenuleft {width: 710px;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 {color: #FFF;display: block;font-size: 14px;font-weight:bold;font-family: sans-serif, Verdana;font-weight: bold;text-transform: none;margin: 0;padding: 9px 15px 8px;}#nav li a:hover, #nav li a:active {background: #555;color: #FFF;margin: 0;padding: 9px 15px 8px;text-decoration: none;-webkit-transition: all .2s ease-in-out;-moz-transition: all .2s ease-in-out;-ms-transition: all .2s ease-in-out;-o-transition: all .2s ease-in-out;transition: all .2s ease-in-out;}#nav li li a, #nav li li a:link, #nav li li a:visited {background: #555;width: 200px;color: #FFF;font-size: 14px;font-family: "ms sans serif", Verdana;font-weight: normal;text-transform: none;float: none;margin: 0;padding: 7px 10px;border-bottom: 1px dotted #7F7F7F;border-left: 1px solid #7F7F7F;border-right: 1px solid #7F7F7F;-webkit-transition: all .2s ease-in-out;-moz-transition: all .2s ease-in-out;-ms-transition: all .2s ease-in-out;-o-transition: all .2s ease-in-out;transition: all .2s ease-in-out;}#nav li li a:hover, #nav li li a:active {background: #777;color: #FFF;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;}

4. Selanjutnya cari kode ini  <div id='header-wrapper'> lalu tepat dibawahnya pastekan kode ini

contoh menu drop down untuk kode dibawah
<div id='NavbarMenu'>
<div id='NavbarMenuleft'>
<ul id='nav'>
<li><a href='http//alkitat.blogspot.com'>Home</a></li>
<li><a href='http//alkitat.blogspot.com'>profil</a></li>
<li><a href='http//alkitat.blogspot.com'>Blogging</a></li>
<li><a href='http//alkitat.blogspot.com'>Menu turun &#187;</a>
<ul>
<li><a href='http//alkitat.blogspot.com'>Menu turun 1</a></li>
<li><a href='http//alkitat.blogspot.com'>Menu turun 2</a></li>
<li><a href='http//alkitat.blogspot.com'>Menu turun 3</a></li>
<li><a href='http//alkitat.blogspot.com'>Menu turun 4</a></li>
<li><a href='http//alkitat.blogspot.com'>Menu turun 5</a></li>
</ul></li>
<li><a href='http//alkitat.blogspot.com'>Contact us</a></li>
</ul>
</div>
</div>

Untuk link warna merah rubahlah dengan link anda, untuk warna oranye rubahlah untuk nama menu-menunya.

5. Simpan. Dan lihat hasilnya....

Jika ada yang ingin ditanyakan silakan tanya lewat komentar. Jika berhasil

3 komentar:

Terima kasih atas saran & kritiknya !!

Luas Lingkaran

MENGHITUNG LUAS LINGKARAN

Nilai jari-jari   = 

Terbaru

Lokasi Master of Tutorial

Anda Pengunjung ke :

Translate

Pengikut

Diberdayakan oleh Blogger.