Cara Mudah Membuat Menu Bar Drop Down di Blog

Para blogger dalam setiap aktivitas blogging pastinya selalu menyempatkan diri untuk mengevaluasi perfomance/tampilan template blognya. Apa yang kurang atau yang harus di tambah  perfomance blog dengan harapan supaya para visitor betah untuk berlama-lama dan lebih penting lagi adalah memberikan kemudahan kepada visitor untuk mengeksplore semua artikel blog kita. Salah satunya adalah tampilan menu bar dengan style dropdown yang merupakan salah satu opsi baik apabila sobat menginginkan tampilan semua halaman blog di lihat dengan mudah oleh visitor.

Saya akan berbagi artikel dengan sobat blogger tentang Cara Mudah Membuat Menu Bar Dropdown Di Blog. Di bawah ini ada cara dan langkah yang bisa sobat ikuti apabila sobat akan bereksperimen, silahkan sobat simak dan harapan saya semoga bermanfaat :

1. Login ke akun blogger sobat
2. Klik template  >  edit HTML (cat : terlebih dahulu backup templat sobat).
3. Kemudian sobat cari kode ]]></b:skin> gunakan Ctrl + F untuk mempermudah pencarian
4. Silahkan copy kode script di bawah ini dan paste/letakan tepat di atas kode ]]></b:skin>

#menubar{

border-bottom:4px solid #ff0000;

width:1025px;

height:32px;

background:#000000;

float:center;

margin-bottom:3px;

}

#menubar ul{

float:left;

margin:0;

padding:0;

}

#menubar li{

float:left;

list-style:none;

margin:0;

padding:0;

}

#menubar li a, #menubar li a:link{

float:left;

padding:8px 12px;

color:#fff;

text-decoration:none;

font-size:13px;

font-weight:bold;

}

#menubar li a:hover, #menubar li a:active, #menubar .current_page_item a  {

background: #ff0000;

color: #fff;

text-decoration:none;

}

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

font-size: 12px;

background: #ff0000;

color: #fff;

text-decoration:none;

width: 150px;

padding: 0px 10px;

line-height:30px;

}

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

background: #000000;

color: #ffffff;

}

#menubar li ul{

z-index:9999;

position:absolute;

left:-999em;

height:auto;

width:170px;

margin-top:32px;

border:1px solid ##ff0000;

}

#menubar li:hover ul, #menubar li li:hover ul, #menubar li li li:hover ul, #menubar li.sfhover ul, #menubar li li.sfhover ul, #menubar li li li.sfhover ul{

left:auto

}

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

position:static

}

5.  Selanjutnya sobat cari kode <div id="content-wrapper"> 
6. Copy kode script di bawah ini dan paste/letakan di atas kode <div id="content-wrapper">

<div id='menubar'>

<ul>

<li><a expr:href='data:blog.homepageUrl'>Home</a></li>

<li><a href='http://flamboyan68.blogspot.com/2013/05/sitemap_10.html'>Sitemap</a></li>

<li><a href='http://flamboyan68.blogspot.com/2013/05/blog.html'>Tutorial Blog</a>

<ul>

<li><a href='http://flamboyan68.blogspot.com/2013/06/seo-friendly.html'>SEO</a></li>

<li><a href='http://flamboyan68.blogspot.com/2013/05/artikel-computer.html'>Computer</a></li>

<li><a href='http://flamboyan68.blogspot.com/2013/05/health.html'>Health</a></li>

</ul></li>

</ul>

</div>

7.  Simpan Template.

Ket :

• Silahkan sobat sesuaikan kode warna garis pada bawah menu bar #ff0000, lebar menu bar: 1025px, warna latar/background menu bar #000000.
• Sobat ganti tulisan warna biru yaitu nama menu bar sesuai dengan selera sobat.
• Ganti link warna merah dengan link sobat.
• selebihnya silahkan sobat modifikasi sendiri sesuai selera

Demikian ulasan saya mengenai Cara Mudah Membuat Menu Bar Dropdown Di Blog, selamaat mencoba dan semoga bermanfaat.

Sumber :

http://flamboyan68.blogspot.com/2013/10/cara-mudah-membuat-menu-bar-dropdown-di.html