Cara Membuat Dropdown Menubar Di Blogspot

Mediasura - Banyak cara yang bisa dilakukan agar kita bisa membuat menu dropdown, terutama dengan mengedit template / HTML. Menu dropdown digunakan agar pengunjung lebih mudah menemukan posting berdasarkan label, maupun untuk mempercantik tampilan blog. Namun kali ini mediasura akan membagikan cara membuat dropdown menubar di blogspot tanpa mengedit template.

Pertama log in ke akun blogger anda. Setelah masuk ke menu dashboard, klik "Tata Letak", Klik "Tambahkan Gadget", Klik "HTML / Javascript".

Setelah itu copy pastekan script dibawah ini, lalu klik simpan. Dan pratinjau tampilan blog anda.

<style>

#menunavigasihorisontal {

background: #5e82c4;

width: 100%;

color: #FFF;

margin: 10px 0;

padding: 0;

position: relative;

border-top:0px solid #960100;

height:40px; }

#bb2nav {

margin: 0;

padding: 0;}

#bb2nav ul {

float: left;

list-style: none;

margin: 0;

padding: 0;}

#bb2navli {

list-style: none;

margin: 0;

padding: 0;}

#bb2nav li a, #bb2nav li a:link, #bb2nav li a:visited {

color: #FFF;

display: block;

font:normal 16px crushed, oswald;

margin: 0;

padding: 9px 12px 11px 12px;

text-decoration: none;

border-right:0px solid #627AAD;}

#bb2nav li a:hover, #bb2nav li a:active {

background: #c0c0ef;

color: #FFF;

display: block;

text-decoration: none;

margin: 0;

padding: 9px 12px 11px 12px;}

#bb2nav li {

float: left;

padding: 0;}

#bb2nav li ul {

z-index: 9999;

position: absolute;

left: -999em;

height: auto;

width: 160px;

margin: 0;

padding: 0;}

#bb2nav li ul a {

width: 140px;}

#bb2nav li ul ul {

margin: -25px 0 0 161px;}

#bb2nav li:hover ul ul, #bb2nav li:hover ul ul ul, #bb2nav

li.sfhover ul ul, #bb2nav li.sfhover ul ul ul {

left: -999em;}

#bb2nav li:hover ul, #bb2nav li li:hover ul, #bb2nav li li

li:hover ul, #bb2nav li.sfhover ul, #bb2nav li li.sfhover ul, #bb2nav

li li li.sfhover ul {

left: auto;}

#bb2nav li:hover, #bb2nav li.sfhover {

position: static;}

#bb2nav li li a, #bb2nav li li a:link, #bb2nav li li a:visited {

background: #EDEFF4;

width: 120px;

color: #000000;

display: block;

font:normal 14px Arial, sans-serif;

margin: 1px 0 0 0;

padding: 9px 12px 10px 12px;

text-decoration: none;

z-index:9999;

border:1px solid #ddd;

-moz-border-radius:4px;

-webkit-border-radius:4px;}

#bb2nav li li a:hover, #bb2nav li li a:active {

background: #627AAD;

color: #FFF;

display: block;}

#bb2nav li li li a, #bb2nav li li li a:link, #bb2nav li li li

a:visited {

background: #EDEFF4;

width: 120px;

color: #3B5998;

display: block;

font:normal 14px Helvetica, sans-serif;

padding: 9px 12px 10px 12px;

text-decoration: none;

z-index:9999;

border:1px solid #ddd;

margin: 1px 0 0 -14px;}

#bb2nav li li li a:hover, #bb2nav li li li a:active {

background: #e06666;

color: #FFF;

display: block;}

</style>

<li>

</li>

<li>

<a href='https://mediasura.blogspot.co.id/search/label/Information'>Information</a>

<ul>

<li><a href='https://mediasura.blogspot.co.id/search/label/Android'>Android</a></li>

<li><a href='https://mediasura.blogspot.co.id/search/label/PC%20%28Komputer%29'>PC (Komputer)</a></li>

<li><a href='https://mediasura.blogspot.co.id/search/label/Printer'>Printer</a></li>

</ul>

</li>

<li>

<a href='https://mediasura.blogspot.co.id/search/label/Hiburan'>Hiburan</a>

<ul>

<li><a href='https://mediasura.blogspot.co.id/search/label/Humor'>Humor</a></li>

</ul>

</li>

<li>

<a href='https://mediasura.blogspot.co.id/search/label/Original%20Picture'>Original Pict</a>

</li>

</ul>

</div>

Anda bisamengganti warna background, tulisan maupun mengganti ukuran dengan mengganti kode warna yang telah saya blok dengan warna. Untuk mengetahui kode warna search di google.
Demikian informasi yang dapat saya share, jika ada pertanyaan silahkan tuliskan komentar di kolom komentar / di fanspage facebook.

Advertisement advertise here