Cara Membuat Menu Blog Drop Down Horizontal Ringan

Salah satu membuat blog agar terlihat rapi dan profesional adalah menu pada blog,dengan menu yang rapi seorang pengunjung blog akan lebih mudah untuk menjelajahi artikel pada blog.
untuk membuatnya sangatlah mudah sobat tinggal ikutin aja langkah demi langkahnya yang pasti Mas Viki udah mempraktekkannya.oke langsung aja kita meluncur.

1.Login to BLOGGER.COM
2.Setelah itu pilih Rancangan
3.Klik Edit HTML dan jangan lupa Sebelum mengedit template Anda Download Template Lengkap untuk keamanan bila terjadi kesalahan edit.
4.Beri centang pada kotak Expand Template Widget untuk membuka semua kode.
5.Cari kode ]]></b:skin>
6.Copy kode dibawah ini dan taruh diatas kode pada langkah nomor 5

.preload1 {background: url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/three_0a.gif);}

.preload2 {background: url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/three_1a.gif);}

#nav {padding:0; margin:0; list-style:none; height:38px; background:transparent url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/three_0.gif) repeat-x; position:relative; z-index:500; font-family:arial, verdana, sans-serif;}

#nav li.top {display:block; float:left;}

#nav li a.top_link {display:block; float:left; height:35px; line-height:33px; color:#FFD700; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;background: url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/three_0.gif);}

#nav li a.top_link span {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/three_0.gif) right top no-repeat;}

#nav li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/three_0a.gif) no-repeat right top;}

#nav li:hover a.top_link {color:#fff; background: url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/three_1.gif) no-repeat;}

#nav li:hover a.top_link span {background:url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/three_1.gif) no-repeat right top;}

#nav li:hover a.top_link span.down {background:url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/three_1a.gif) no-repeat right top; padding-bottom:3px;}

/* Default list styling */

#nav li:hover {position:relative; z-index:200;}

#nav li:hover ul.sub

{left:1px; top:38px; background: #50b5d0; padding:3px; border:1px solid #0b4d97; white-space:nowrap; width:90px; height:auto; z-index:300;}

#nav li:hover ul.sub li

{display:block; height:20px; position:relative; float:left; width:90px; font-weight:normal;}

#nav li:hover ul.sub li a

{display:block; font-size:11px; height:18px; width:88px; line-height:18px; text-indent:5px; color:#000; text-decoration:none;border:1px solid #50b5d0;}

#nav li ul.sub li a.fly

{background:#50b5d0 url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/arrow.gif) 80px 6px no-repeat;}

#nav li:hover ul.sub li a:hover

{background:#3f96a9; color:#fff; border-color:#fff;}

#nav li:hover ul.sub li a.fly:hover

{background:#3f96a9 url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/arrow_over.gif) 80px 6px no-repeat; color:#fff;}

#nav li b {display:block; font-size:11px; height:18px; width:88px; line-height:18px; margin-bottom:3px; text-indent:6px; color:#ff6; border-bottom:1px solid #ff6; cursor:default;}

#nav li:hover li:hover ul,

#nav li:hover li:hover li:hover ul,

#nav li:hover li:hover li:hover li:hover ul,

#nav li:hover li:hover li:hover li:hover li:hover ul

{left:90px; top:-4px; background: #50b5d0; padding:3px; border:1px solid #0b4d97; white-space:nowrap; width:90px; z-index:400; height:auto;}

#nav ul,

#nav li:hover ul ul,

#nav li:hover li:hover ul ul,

#nav li:hover li:hover li:hover ul ul,

#nav li:hover li:hover li:hover li:hover ul ul

{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

#nav li:hover li:hover a.fly,

#nav li:hover li:hover li:hover a.fly,

#nav li:hover li:hover li:hover li:hover a.fly,

#nav li:hover li:hover li:hover li:hover li:hover a.fly

{background:#3f96a9 url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/arrow_over.gif) 80px 6px no-repeat; color:#fff; border-color:#fff;}

#nav li:hover li:hover li a.fly,

#nav li:hover li:hover li:hover li a.fly,

#nav li:hover li:hover li:hover li:hover li a.fly

{background:#50b5d0 url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/arrow.gif) 80px 6px no-repeat; color:#000; border-color:#50b5d0;}

setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},

controlHTML: '<img src="http://lh6.ggpht.com/_wC8_9aR_6uE/S6uJI38TreI/AAAAAAAACbY/QIXMKHei1g0/up.png" style="width:24px; height:24px" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"

controlattrs: {offsetx:15, offsety:15}, //offset of control relative to right/ bottom of window corner

anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links

7.Save/Simpan template anda.
8.Selanjutnya kembali kehalaman Rancangan -->Lalu klik Tambah Gadget -->kemudian pilih HTML/JavaScript.Setelah itu masukkan kode dibawah ini kedalamnya.

<ul id="nav">

<li class="top"><a href="#" class="top_link">Home</a></li>

<li class="top"><a href="#" id="Menu" class="top_link">Menu</a>

<ul class="sub">

<li>Judul1</li>

<li><a href="#" class="fly">Subjudul1</a>

<ul>

<li><a href="#" target="_blank">subitem1.1</a></li>

<li><a href="#" target="_blank">subitem2.1</a></li>

<li><a href="#" target="_blank">subitem3.1</a></li>

</ul>

</li>

<li><a href="#" class="fly">Subjudul2</a>

<ul>

<li><a href="#" target="_blank">subitem1.2</a></li>

<li><a href="#" target="_blank">subitem2.2</a></li>

<li><a href="#" target="_blank">subitem3.2</a></li>

</ul>

</li>

<li><a href="#" class="fly">Subjudul3</a>

<ul>

<li><a href="#" target="_blank">subitem1.3</a></li>

<li><a href="#" target="_blank">subitem2.3</a></li>

<li><a href="#" target="_blank">subitem3.3</a></li>

<li>Subjudul3.1</li>

<li><a href="#">item1.3.1</a></li>

<li><a href="#">item2.3.1</a></li>

<li><a href="#">item3.3.1</a></li>

<li>Subjudul3.2</li>

<li><a href="#">item1.3.2</a></li>

<li><a href="#">item2.3.2</a></li>

<li><a href="#">item3.3.2</a></li>

</ul>

</li>

<li>Judul2</li>

<li><a href="#" target="_blank">subitem1.2</a></li>

<li><a href="#" target="_blank">subitem2.2</a></li>

<li><a href="#" target="_blank">subitem3.2</a></li>

</ul>

</li>

<li class="top"><a href="#" id="services" class="top_link">menu2</a>

<ul class="sub">

<li><a href="#" target="_blank">submenu1.2</a></li>

<li><a href="#" target="_blank">submenu2.2</a></li>

<li><a href="#" target="_blank">submenu3.2</a></li>

</ul>

</li>

</li>

<li class="top"><a href="#" id="services" class="top_link">menu3</a>

<ul class="sub">

<li><a href="#" target="_blank">submenu1.3</a></li>

<li><a href="#" target="_blank">submenu2.3</a></li>

<li><a href="#" target="_blank">submenu3.3</a></li>

</ul>

</li>

</li>

<li class="top"><a href="#" id="services" class="top_link">menu4</a>

<ul class="sub">

<li><a href="#" target="_blank">submenu1.4</a></li>

<li><a href="#" target="_blank">submenu2.4</a></li>

<li><a href="#" target="_blank">submenu3.4</a></li>

</ul>

</li>

<li class="top"><a href="#" id="profil" class="top_link">menu5</a></li></li></li></ul>

9.Kemudian Save dan lihat hasilnya anda sudah berhasil mempraktekkan tutorial dari kangroni dengan Cara Membuat Menu Blog Drop Down Horizontal dan insya alloh Ringan.

Ket:Untuk kode/tanda pagar yang diberi warna merah sobat ganti dengan link/Url halaman yang dituju dan tulisan warna biru untuk judul/nama2 menu sesuai kebutuhan.

Semoga Bermanfaat Teman

Semoga artikel Cara Membuat Menu Blog Drop Down Horizontal Ringan bermanfaat bagi Anda.

Cara Membuat Menu Blog Drop Down Horizontal Ringan

Like ya Sobat

Populer

Label

Cara Membuat Menu Blog Drop Down Horizontal Ringan

Artikel terkait:

Like ya Sobat

Populer

Label