Cara Membuat Menu Dropdown horizontal Floating Keren di Blog ~ Maxichalife

Kenal dengan Menu Dropdown kan ?, Menu Navigasi ini memang banyak digemari oleh para blogger karena dapat menghemat tempat dengan mengelompokan beberapa kategri dalam satu wadah.
Contoh Menu navigasi yang akan kita buat bisa sobat lihat dibawah ini. jika ingin melihat Demonya Klik saja pada Teks Link Demo dibawah gambar

Nah gimana keren kan ?. Bagai mana caranya, langsung saja ikuti langkah-langkah berikut ini :

Seperti biasa sobat harus login dulu di akun blog sobat
Pilih rancangan / desing dan klik edit HTML dan lanjutkan
Centang "Expand Template Widget" untuk menghindari apabila terjadi kesalahan
Jika semua sudah sekarang Cari Kode ]]></b:skin> Gunakan tombol CTRL + F dan F3 untuk mempermudah pencarian kode
Jika kode sudah ketemu,, Copy kode berikut dan letakan diatas kode ]]></b:skin>

/* Horyzontal Droupdown menu
----------------------------------------------- */
#top-wrapper{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBLYJ6v7rF57H-p7d2l2VTMmsnLm8nVsGz6iSnv7x-I5TfHBKQRoo7jplsoUZlyqo62m7CtcB0NOWA-DWJJYsSBrlXgOa9Iz8Lj-XLyFb8EQafT_p_gTPev_eejyjQpTWDp5Sr6g1WWmKS/s1600/menutop.png) repeat-x;width:100%;margin:0 auto;padding:0 auto;-moz-box-shadow:0 3px 3px 3px rgba(0,0,0,0.4);-webkit-box-shadow:0 3px 3px 3px rgba(0,0,0,0.4);border-bottom:1px solid #444;border-top:3px solid #f1c822}
#topbar{width:980px;height:40px;margin:0 auto}
#top{width:100%}
#top,#top ul{list-style:none;font-family:Arial, serif;margin:0;padding:0}
#top a{display:block;text-decoration:none;font:normal 11px Arial;text-transform:none;color:#CECECF;border-right:1px solid #484747;border-left:1px solid #191919;padding:7px 10px 7px}
#top a.arrow{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkK2t_CRR3jPqKYkA_ZAE6b3h50w5sq0DTW0wgWabJOkmTMJjAJ80kiQHTRARLCCkBOr1XdLwuioFWmLMvVqcrMTzwGQZl4nJa9wwEzXiEHk34B-IsMETdq_r0lnZUHMgcBJDtK1HB7cQ/s1600/arrow_white.gif);background-repeat:no-repeat;background-position:right center;padding:7px 24px 7px 10px}
#top li{float:left;position:static;width:auto}
#top li ul,#top ul li{width:170px}
#top 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}
#top li ul{z-index:100;position:absolute;display:none;background:#222;padding-bottom:0px;-moz-box-shadow:0 2px 2px rgba(0,0,0,0.4);-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.4)}
#top li:hover a,#top a:active,#top a:focus,#top li.hvr a{background-color:#222;color:#fff}
#top li:hover ul,#top li.hvr ul{display:block}
#top li:hover ul a,#top li.hvr ul a{color:#edfdfd;background-color:transparent;text-decoration:none}
#top li ul li.hr{border-bottom:1px solid #333;border-top:1px solid #000;display:block;font-size:1px;height:0;line-height:0;margin:0px 0}
#top ul a:hover{background-color:#555!important;color:#fff!important;text-decoration:none}
#top a span,#top a.arrow span{font:bold 12px Arial;color:#888;display:block;line-height:16px;text-transform:uppercase;text-shadow: 1px 2px 2px #000}
#top li:hover a span,#top li:hover a.arrow span{color:#f1c822}

.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix{display:inline-block}
#inner{padding-top:40px;}
#fixed {position:fixed;top:0;left:0;width:100%;height:40px;z-index:999;}
#fixedinner{text-align:center;background:transparent;height:40px;position:relative;z-index:999;}
* html, * html body{overflow-y:hidden;height:100%;}
* html #fixedinner{margin-right:-143px;voice-family: "\"}\""; voice-family:inherit; }
* html #fixedinner{margin-right:17px;}
* html #fixed {position:absolute;}

Kode Warna Biru diatas adalah ukuran panjang menu
Kalau sudah, langkah selanjutnya cari salah satu kode berikut :

<div id='header-wrapper'>
(disini nanti letak kode menu dropdown)
</b:section>
</div>

Jika Tidak Ketemu Kode Diatas Cari Kode Yang Ini

<div class='header-outer'>
(disini nanti posisi kode menu dropdown)
</b:section>
</div>

Jika Sudah ketemu salah satu kode diatas letakan Kode dibawah ini dibawah salah satu kode Diatas

<div id='fixed'>
<div id='fixedinner'>
<div id='top-wrapper'>
<div id='topbar'>
<ul id='top'>
<li><a href='/'><span>Welcome</span>Homepage</a></li>
<li><a href='#'><span>This is</span>About Us</a></li>

<li><a class='arrow' href='#'><span>Menu 1</span>Keterangan Disini</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>
<li class='hr'/>
<li><a href='#'>Sub menu 4</a></li>
</ul>
</li>

<li><a class='arrow' href='#'><span>Menu 2</span>Keterangan Disini</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>
<li class='hr'/>
<li><a href='#'>Sub menu 4</a></li>
</ul>
</li>

<li><a class='arrow' href='#'><span>Menu 3</span>Keterangan Disini</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>
<li class='hr'/>
<li><a href='#'>Sub menu 4</a></li>
<li class='hr'/>
<li><a href='#'>Sub menu 5</a></li>
</ul>
</li>

</ul>
<br class='clearit'/>
</div>
<div style='clear:both;'/>
</div>
</div></div>

Sehingga susunannya menjadi seperti ini

<div class='header-outer'>

<div id='fixed'>
<div id='fixedinner'>
<div id='top-wrapper'>
<div id='topbar'>
<ul id='top'>
<li><a href='/'><span>Welcome</span>Homepage</a></li>
<li><a href='#'><span>This is</span>About Us</a></li>

<li><a class='arrow' href='#'><span>Menu 1</span>Keterangan Disini</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>
<li class='hr'/>
<li><a href='#'>Sub menu 4</a></li>
</ul>
</li>

<li><a class='arrow' href='#'><span>Menu 2</span>Keterangan Disini</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>
<li class='hr'/>
<li><a href='#'>Sub menu 4</a></li>
</ul>
</li>

<li><a class='arrow' href='#'><span>Menu 3</span>Keterangan Disini</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>
<li class='hr'/>
<li><a href='#'>Sub menu 4</a></li>
<li class='hr'/>
<li><a href='#'>Sub menu 5</a></li>
</ul>
</li>

</ul>
<br class='clearit'/>
</div>
<div style='clear:both;'/>
</div>
</div></div>

</b:section>
</div>

Sekarang Klik Simpan Template
Selesai dan Lihat hasilnya

Demikianlah cara Cara Membuat Menu Dropdown horizontal Floating Keren di Blog semoga bisa bermanfaat bagi para blogger.

Share This Article To: Facebook Twitter Google+

Ditulis Oleh : Unknown ~ Maxichalife.blogspot.com

Sobat sedang membaca artikel tentang Cara Membuat Menu Dropdown horizontal Floating Keren di Blog .Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya.blogger yang baik akan meninggalkan jejak.Terima kasih.

<a href="https://maxichalife.blogspot.com/2013/06/cara-membuat-menu-dropdown-horizontal.html" target="_blank">Cara Membuat Menu Dropdown horizontal Floating Keren di Blog </a>

:: Get this widget ! ::

Labels

Link Teman

Statistik Blog

Cara Membuat Menu Dropdown horizontal Floating Keren di Blog

Ditulis Oleh : Unknown ~ Maxichalife.blogspot.com

0 komentar:

Post a Comment

Post Populer

Populer pos

Blog Archive

Arsip Blog

Flag counter

Like Me

Garuda Indonesia

About Me

Followers