Cara Memasang Menu Navigasi Dropdown Keren Di Blog 2013

Sunday 28 July 2013

Cara Memasang Menu Navigasi Dropdown Keren Di Blog 2013

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 .

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

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

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwcXBlkMmD-kchAuf5zF0PuVqxLt38Wvkd7q9cdVgw1KJtZqrAje6vQO0zKS5YzLeIasmhUnEIjERGoViTeD1SoC_qCSmeKfKCSk_x7KKEcg02zqYkc07r5oeOfdYsElssRWTI8ONJv_EP/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3XNFQP3K6VooyW04oKrZJiEdgXJisAiLWw3JXSN5B0Z3X1nT99znFBXICuRhAXwj-kSaOAHfqeTmhkx1AY5IyshwwBJX-Uipg4v9CmBX-LAjJJgr-Ndh2vdBq5TyAMKCiOOS4NseiMs8/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 :