Log in ke blog
Klik Rancangan
Klik Edit HTML
Masukkan kode berikut di atas kode ]]></b:skin>
.nav{height:35px; background:url(http://3.bp.blogspot.com/-iYO_dq-SM3k/Ti1qX6kEh0I/AAAAAAAAE1g/riMnCYQz3_4/s1600/bg.gif) repeat-x; position:relative; font-family:arial,verdana,sans-serif; font-size:11px; width:100%; z-index:100; margin:0; padding:0}
.nav .table{display:table; margin:0 auto}
.nav .select,
.nav .current{margin:0; padding:0; list-style:none; display:table-cell; white-space:nowrap}
.nav li{margin:0; padding:0; height:auto; float:left}
.nav .select a{display:block; height:35px; float:left; font-weight:bold; background:url(http://3.bp.blogspot.com/-iYO_dq-SM3k/Ti1qX6kEh0I/AAAAAAAAE1g/riMnCYQz3_4/s1600/bg.gif); padding:0 30px 0 30px; text-decoration:none; line-height:35px; white-space:nowrap; color:#2b3238}
.nav .select a:hover,
.nav .select li:hover a{background:url(http://2.bp.blogspot.com/-nVl9muJMq7Q/Ti1qYHKkioI/AAAAAAAAE1k/-xo6sTlGN-A/s1600/hover.gif); padding:0 0 0 15px; cursor:pointer; color:#2b3238}
.nav .select a b{font-weight:bold}
.nav .select a:hover b,
.nav .select li:hover a b{display:block; float:left; padding:0 30px 0 15px; background:url(http://2.bp.blogspot.com/-nVl9muJMq7Q/Ti1qYHKkioI/AAAAAAAAE1k/-xo6sTlGN-A/s1600/hover.gif) right top; cursor:pointer}
.nav .select_sub{display:none}
.nav table{border-collapse:collapse; margin:-1px; font-size:1em; width:0; height:0}
.nav .sub{display:table; margin:0 auto; padding:0; list-style:none}
.nav .sub_active .current_sub a,
.nav .sub_active a:hover{background:transparent; color:#2b3238}
.nav .select:hover .select_sub,
.nav .current .show{display:block; position:absolute; width:100%; top:35px; background:url(http://1.bp.blogspot.com/-ha6EhdiZxBI/Ti1qXa6bmsI/AAAAAAAAE1c/A7NU-qQ_-Ls/s1600/back.gif); padding:0; z-index:100; left:0; text-align:center}
.nav .current .show{z-index:10}
.nav .select:hover .sub li a,
.nav .current .show .sub li a{display:block; float:left; background:transparent; padding:0 10px 0 10px; margin:0; white-space:nowrap; border:0; color:#2b3238}
.nav .current .sub li.sub_show a{color:#2b3238; cursor:default}
.nav .select .sub li a{font-weight:normal}
.nav .select:hover .sub li a:hover,
.nav .current .sub li a:hover{visibility:visible; color:#73a0d2}
<!--[if IE]>
.nav ul{display:inline-block}
.nav ul{display:inline}
.nav ul li{float:left}
.nav{text-align:center}
.nav .select a:hover b,
.nav .select li:hover a b{float:none}
<![endif]-->
Selanjutnya klik Simpan Template.nav .table{display:table; margin:0 auto}
.nav .select,
.nav .current{margin:0; padding:0; list-style:none; display:table-cell; white-space:nowrap}
.nav li{margin:0; padding:0; height:auto; float:left}
.nav .select a{display:block; height:35px; float:left; font-weight:bold; background:url(http://3.bp.blogspot.com/-iYO_dq-SM3k/Ti1qX6kEh0I/AAAAAAAAE1g/riMnCYQz3_4/s1600/bg.gif); padding:0 30px 0 30px; text-decoration:none; line-height:35px; white-space:nowrap; color:#2b3238}
.nav .select a:hover,
.nav .select li:hover a{background:url(http://2.bp.blogspot.com/-nVl9muJMq7Q/Ti1qYHKkioI/AAAAAAAAE1k/-xo6sTlGN-A/s1600/hover.gif); padding:0 0 0 15px; cursor:pointer; color:#2b3238}
.nav .select a b{font-weight:bold}
.nav .select a:hover b,
.nav .select li:hover a b{display:block; float:left; padding:0 30px 0 15px; background:url(http://2.bp.blogspot.com/-nVl9muJMq7Q/Ti1qYHKkioI/AAAAAAAAE1k/-xo6sTlGN-A/s1600/hover.gif) right top; cursor:pointer}
.nav .select_sub{display:none}
.nav table{border-collapse:collapse; margin:-1px; font-size:1em; width:0; height:0}
.nav .sub{display:table; margin:0 auto; padding:0; list-style:none}
.nav .sub_active .current_sub a,
.nav .sub_active a:hover{background:transparent; color:#2b3238}
.nav .select:hover .select_sub,
.nav .current .show{display:block; position:absolute; width:100%; top:35px; background:url(http://1.bp.blogspot.com/-ha6EhdiZxBI/Ti1qXa6bmsI/AAAAAAAAE1c/A7NU-qQ_-Ls/s1600/back.gif); padding:0; z-index:100; left:0; text-align:center}
.nav .current .show{z-index:10}
.nav .select:hover .sub li a,
.nav .current .show .sub li a{display:block; float:left; background:transparent; padding:0 10px 0 10px; margin:0; white-space:nowrap; border:0; color:#2b3238}
.nav .current .sub li.sub_show a{color:#2b3238; cursor:default}
.nav .select .sub li a{font-weight:normal}
.nav .select:hover .sub li a:hover,
.nav .current .sub li a:hover{visibility:visible; color:#73a0d2}
<!--[if IE]>
.nav ul{display:inline-block}
.nav ul{display:inline}
.nav ul li{float:left}
.nav{text-align:center}
.nav .select a:hover b,
.nav .select li:hover a b{float:none}
<![endif]-->
Klik lagi Rancangan
Klik Tambah Gadget
Pilih HTML/JavaScript
Masukkan kode berikut ke dalamnya
<div class="nav">
<div class="table">
<ul class="select"><li><a href="#"><b>Sample</b></a></li></ul>
<ul class="select"><li><a href="#"><b>BERI JUDUL 1 DI SINI</b></a>
<div class="select_sub">
<ul class="sub">
<li><a href="MASUKKAN ALAMAT LINK">Sample Menu 1</a></li>
<li><a href="MASUKKAN ALAMAT LINK">Sample Menu 1</a></li>
<li><a href="MASUKKAN ALAMAT LINK">Sample Menu 1</a></li>
<li><a href="MASUKKAN ALAMAT LINK">Sample Menu 1</a></li>
<li><a href="MASUKKAN ALAMAT LINK">Sample Menu 1</a></li>
</ul>
</div>
</li>
</ul>
<ul class="select"><li><a href="#"><b>BERI JUDUL 2 DI SINI</b></a>
<div class="select_sub">
<ul class="sub">
<li><a href="MASUKKAN ALAMAT LINK">Sample Menu 2</a></li>
<li><a href="MASUKKAN ALAMAT LINK">Sample Menu 2</a></li>
<li><a href="MASUKKAN ALAMAT LINK">Sample Menu 2</a></li>
<li><a href="MASUKKAN ALAMAT LINK">Sample Menu 2</a></li>
</ul>
</div>
</li>
</ul>
<ul class="select"><li><a href="#"><b>BERI JUDUL 3 DI SINI</b></a>
<div class="select_sub">
<ul class="sub">
<li><a href="MASUKKAN ALAMAT LINK">Sample Menu 3</a></li>
<li><a href="MASUKKAN ALAMAT LINK">Sample Menu 3</a></li>
<li><a href="MASUKKAN ALAMAT LINK">Sample Menu 3</a></li>
<li><a href="MASUKKAN ALAMAT LINK">Sample Menu 3</a></li>
<li><a href="MASUKKAN ALAMAT LINK">Sample Menu 3</a></li>
</ul>
</div>
</li>
</ul>
<ul class="select"><li><a href="#"><b>BERI JUDUL 4 DI SINI</b></a>
<div class="select_sub">
<ul class="sub">
<li><a href="MASUKKAN ALAMAT LINK">Sample Menu 4</a></li>
<li><a href="MASUKKAN ALAMAT LINK">Sample Menu 4</a></li>
<li><a href="MASUKKAN ALAMAT LINK">Sample Menu 4</a></li>
<li><a href="MASUKKAN ALAMAT LINK">Sample Menu 4</a></li>
<li><a href="MASUKKAN ALAMAT LINK">Sample Menu 4</a></li>
</ul>
</div>
</li>
</ul>
</div>
</div>
Silahkan edit sesuai petunjuk pada kode di atas <div class="table">
<ul class="select"><li><a href="#"><b>Sample</b></a></li></ul>
<ul class="select"><li><a href="#"><b>BERI JUDUL 1 DI SINI</b></a>
<div class="select_sub">
<ul class="sub">
<li><a href="MASUKKAN ALAMAT LINK">Sample Menu 1</a></li>
<li><a href="MASUKKAN ALAMAT LINK">Sample Menu 1</a></li>
<li><a href="MASUKKAN ALAMAT LINK">Sample Menu 1</a></li>
<li><a href="MASUKKAN ALAMAT LINK">Sample Menu 1</a></li>
<li><a href="MASUKKAN ALAMAT LINK">Sample Menu 1</a></li>
</ul>
</div>
</li>
</ul>
<ul class="select"><li><a href="#"><b>BERI JUDUL 2 DI SINI</b></a>
<div class="select_sub">
<ul class="sub">
<li><a href="MASUKKAN ALAMAT LINK">Sample Menu 2</a></li>
<li><a href="MASUKKAN ALAMAT LINK">Sample Menu 2</a></li>
<li><a href="MASUKKAN ALAMAT LINK">Sample Menu 2</a></li>
<li><a href="MASUKKAN ALAMAT LINK">Sample Menu 2</a></li>
</ul>
</div>
</li>
</ul>
<ul class="select"><li><a href="#"><b>BERI JUDUL 3 DI SINI</b></a>
<div class="select_sub">
<ul class="sub">
<li><a href="MASUKKAN ALAMAT LINK">Sample Menu 3</a></li>
<li><a href="MASUKKAN ALAMAT LINK">Sample Menu 3</a></li>
<li><a href="MASUKKAN ALAMAT LINK">Sample Menu 3</a></li>
<li><a href="MASUKKAN ALAMAT LINK">Sample Menu 3</a></li>
<li><a href="MASUKKAN ALAMAT LINK">Sample Menu 3</a></li>
</ul>
</div>
</li>
</ul>
<ul class="select"><li><a href="#"><b>BERI JUDUL 4 DI SINI</b></a>
<div class="select_sub">
<ul class="sub">
<li><a href="MASUKKAN ALAMAT LINK">Sample Menu 4</a></li>
<li><a href="MASUKKAN ALAMAT LINK">Sample Menu 4</a></li>
<li><a href="MASUKKAN ALAMAT LINK">Sample Menu 4</a></li>
<li><a href="MASUKKAN ALAMAT LINK">Sample Menu 4</a></li>
<li><a href="MASUKKAN ALAMAT LINK">Sample Menu 4</a></li>
</ul>
</div>
</li>
</ul>
</div>
</div>
Selanjutnya klik Simpan dan lihat hasilnya. Demikian tutorial cara membuat menu horizontal cantik, semoga bermanfaat. Amin. Selamat mencoba dan sukses selalu.
"keep spirits and do the best"