Bocah Poris Blog's | Pada Hari ini Tidak Terlalu Jelas Malam atau Siang :p yang Penting Pada Hari ini Saya akan Berbagi Tentang Cara Memasang Menu Navigasi Dropdown Keren Di Blog . Cara Memasang Menu Dropdown ini Merupakan Request dari para Komentator Blog ini Sebelum Blog ini Mengganti Templatenya. Karena Itu Merupakan Pertanyaan dan Juga Saya Tidak Terlalu Membutuhkan Menu Navigasi Dropdown Tersebut .
Cara Memasang Menu Navigasi Dropdown Keren di Blog

 Karena Saya Sudah Merasakan Cepatnya Menggunakan Menu Dropdown ini Tapi yang dalam Tutorial Cara Membuat Menu Navigasi Dropdown Keren ini Juga Tidak Kalah Cepatnya . Itu Juga Tergantung Kecepatan Blog Anda Sendiri. Widget Menu Navigasi Dropdown ini Sangat Keren dan Mudah dalam Pemasangannya Karena Tidak Memerlukan Waktu Lama . Hanya 1 Menit Kalian Bisa Memasang Menu Navigasi Dropdown ini .Berikut Screen Shot Menu Dropdown yang telah saya buat
Cara Memasang Menu Navigasi Dropdown Keren
Gambar Jelek saya belum Terbiasa dengan Photoshop :D
Menu Navigasi dengan Dropdown Berfungsi Untuk Memperbanyak Jumlah PageView Blog Kita Karena Dengan Memasang Menu Navigasi Dropdown Kita Akan Membuat Para Pengunjung Nyaman untuk Berlama-lama di Blog Kesanyangan Anda.

Kita Langsung Ke Langkah Membuat Menu Navigasi Horizontal Dropdown Keren di blog
1. Seperti Biasa Anda Harus Login Terlebih dahulu di Blog Anda Sendiri

2. Masuk Ke menu Template Blogger
Cara Memasang Menu Navigasi Dropdown Keren di Blog
3. Setelah itu Klik Edit HTML > Lanjutkan > Centang Expand Template Widget

4. Setelah Itu Cari kode dibawah untuk Mempermudah tekan ctrl+f
 ]]></b:skin>
5. Setelah Ketemu Masukkan kode dibawah Tepat diatas kode ]]></b:skin>
 /* Menu Horizontal Dropdown by bocahporis.blogspot.com*/
#menuwrapperpic{background:#333;width:930px;margin:0 auto;padding:0 auto}
#menuwrapper{width:980px;height:27px;margin:0 auto}
.clearit{clear:both;height:0;line-height:0.0;font-size:0}
#menubar{width:100%}
#menubar,#menubar ul{list-style:none;font-family:Arial, serif;margin:0;padding:0}
#menubar a{display:block;text--transform: capitalize;list-style-type: none;font:normal 12px Arial, Helvetica,Verdana,sans-serif;font-weight:700;text-transform:uppercase;color:#CECECF;border-right:1px solid #191919;padding:8px 10px 8px}
#menubar a.trigger{background-image:url(http://2.bp.blogspot.com/-QB-QrnRTSJI/UPMiEYKozJI/AAAAAAAAClw/ieBOFWLIqlM/s1600/arrow_down.gif);background-repeat:no-repeat;background-position:right center;padding:8px 24px 8px 10px}
#menubar li{float:left;position:static;width:auto}
#menubar li ul,#menubar ul li{width:170px}
#menubar ul li a{text-align:left;color:#fff;font-size:12px;font-weight:400;text-transform:none;font-family:Arial;border:none;padding:5px 10px}
#menubar li ul{z-index:100;position:absolute;display:none;background:#222;padding-bottom:5px;-moz-box-shadow:0 2px 2px rgba(0,0,0,0.6);-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.6)}
#menubar li:hover a,#menubar a:active,#menubar a:focus,#menubar li.hvr a{background-color:#222;color:#fff}
#menubar li:hover ul,#menubar li.hvr ul{display:block}
#menubar li:hover ul a,#menubar li.hvr ul a{color:#edfdfd;background-color:transparent;text-decoration:none}
#menubar li ul li.hr{border-bottom:1px solid #444;border-top:1px solid #000;display:block;font-size:1px;height:0;line-height:0;margin:4px 0}
#menubar ul a:hover{background-color:#555!important;color:#fff!important;text-decoration:none}

Keterangan: Silahkan Kreasikan Sendiri kode yang sudah Saya Warnain Sesuai Kemauan anda.
Kode Merah = Ukuran Menu Dropdown

6. Setelah itu Cari Lagi Kode seperti dibawah

<div id='header-wrapper'>

7. Setelah Ketemu Copy kode dibawah dan Pastekan tepat dibawah kode <div id='header-wrapper'>

<div id='menuwrapperpic'>
<div id='menuwrapper'>
<ul id='menubar'>
<li><a href='/'><img alt='Back to Home' src='http://1.bp.blogspot.com/-Yx-NuFKviSQ/TwETaPMdmfI/AAAAAAAAATs/fLZvwofZ8N0/s1600/home_white.png' style='padding:0px;' title='Home'/></a></li>
<li><a href='#'>Menu 1</a></li>
<li><a class='trigger' href='#'>Menu 2</a>
<ul>
<li><a href='#'>Sub Menu 1</a></li>
<li class='hr'/>
<li><a href='#'>Sub Menu 2</a></li>
<li class='hr'/>
<li><a href='#'>Sub Menu 3</a></li>
</ul>
</li>
<li><a class='trigger' href='#'>Menu 3</a>
<ul>
<li><a href='#'>Sub Menu 1</a></li>
<li class='hr'/>
<li><a href='/'>Sub Menu 2</a></li>
<li class='hr'/>
<li><a href='/'>Sub Menu 2</a></li>
</ul>
</li>
<li><a href='#'>Menu 4</a></li>
<li><a class='trigger' href='#'>Menu 5</a>
<ul>
<li><a href='#'>Sub Menu 1</a></li>
<li class='hr'/>
<li><a href='#'>Sub Menu 2</a></li>
<li class='hr'/>
<li><a href=#'>Sub Menu 3</a></li>
</ul>
</li>
<li><a href='#'>Menu 6</a></li>
<li><a class='trigger' href='#'>Menu 7</a>
<ul>
<li><a href='#' rel='nofollow'>Sub Menu 1</a></li>
<li class='hr'/>
<li><a href='#'>Sub Menu 2</a></li>
<li class='hr'/>
<li><a href='#'>Sub Menu</a></li>
<li class='hr'/>
<li><a href='#'>Sub Menu</a></li>
<li class='hr'/>
<li><a href='#'>Sub Menu</a></li>
</ul>
</li>
</ul>
<br class='clearit'/>
</div>

Keterangan :

  • Ganti Kode yang Berwarna Merah Sesuai Kebutuhan Anda
  • Ganti Kode # Sesuai dengan Url yang Anda Mau


8. Terakhir Tinggal Save Template Anda Dan Lihat Hasilnya Pada Template Anda

Cukup Sekian Tentang Menu Navigasi Dropdown Horizontal di Blog ini Semoga Bermanfaat Bagi Kalian Semua Termasuk pengunjung blog Kalian
Related Artikel


Judul : Cara Memasang Menu Navigasi Dropdown Keren di Blog
Di Tulis Oleh:MRizal Wrc
URL : http://bocahporis.blogspot.com/2013/02/cara-memasang-menu-navigasi-dropdown.html
Date Published : 23:39
Desription :Bocah Poris Blog's | Pada Hari ini Tidak Terlalu Jelas Malam atau Siang :p yang Penting Pada Hari ini Saya akan Berbagi Tentang Cara Me...
Rating Blog: 5 dari 5