Home » , » Cara Membuat Menu Horizontal Dengan Model Aselole

Cara Membuat Menu Horizontal Dengan Model Aselole



1. Masuk/login dulu ke www.blogger.com dengan akun masing2.
2. Masuk ke Dashboard - Design - Edit HTML
3. Kasih centang Expand Widget Templates
4 . Cari kode ]]></b:skin> (Gunakan Ctrl+F biar cepet)
5. Copy dan Paste kode di bawah ini tepat di atas kode ]]></b:skin>


/* Ini adalah kode untuk menu aselole - Mulai */
#menu-asoy {
list-style-type:none;
margin:-10px 0 0 0;
padding:0;
}

#menu-asoy li {
float:left;
padding-left:0;
margin:0 0px 0 0;
position:relative;
width:100px;
height:3em;
z-index:100;
background:transparent;

}
#menu-asoy li dl {
position:relative;
top:0;
left:0;

}
#menu-asoy li a, #menu-asoy li a:visited {text-decoration:none;}
#menu-asoy li dd {display:none;}
#menu-asoy li a:hover {border:0;}
#menu-asoy li:hover dd, #menu-asoy li a:hover dd {display:block;}
#menu-asoy li:hover dl, #menu-asoy li a:hover dl {padding-bottom:10px;
background:url(http://3.bp.blogspot.com/-vbYc7nZ9GGI/TWdAXyzS8EI/AAAAAAAAAsM/Qwwy5nW2rz8/s1600/over.png) no-repeat transparent;
}
#menu-asoy table {border-collapse:collapse; padding:0; margin:-1px; font-size:1em;}
#menu-asoy dl {width: 100px; margin: 0; padding: 0;}

#menu-asoy dt {height:28px; width: 90px; margin:0; padding: 5px 5px 5px 5px; font-size: 17px; color: transparent; text-align:center;}
#menu-asoy dt a, #menu-asoy dt a:visited {display:block; color: #000000;}
#menu-asoy dt a, #menu-asoy dt a:hover {display:block; color: #000000;}

#menu-asoy dd {width: 110px; margin:0; padding:0; color: #000000; font-size: 1em; text-align:left; border-bottom: 1px solid #373737; border-right:
1px solid #373737; border-left: 1px solid #373737;
-webkit-box-shadow: 0px 3px 2px #000000;
-moz-box-shadow: 0px 3px 2px #000000;
box-shadow: 0px 3px 2px #000000;
}
#menu-asoy dd.last {border-bottom:10px solid #6b3d26;}
#menu-asoy dd a, #menu-asoy dd a:visited {color:#fff; text-decoration:none; display:block; padding:4px 5px 4px 5px; width:100px;
background:#242424;}

#menu-asoy dd a:hover {color:#fff; text-decoration:none; display:block; padding:4px 5px 4px 5px; width:100px; background:#6b3d26;}

#menu-asoy{
width: 100%;
padding-left:0px;
margin:0;
background:url(#) no-repeat center top;
}
/* akhir - Ini adalah kode untuk menu aselole */


6. Setelah itu cari Code dibawah ini
<b:section class="main" id="main" showaddelement="no">
kemudian ganti dengan kode
<b:section class="main" id="main" showaddelement="yes">


7. Klik SAVE TEMPLATE
8. Masuk ke Dashboard > Design > Page Elements
9. Klik Add a Gadget
10. Pilih Gadget baru : HTML/JavaScript
11. Klik HTML/JavaScript, nanti mucul penampakan seperti ini
12 Title kosongkan, kemudian Content isi dengan Code di bawah ini.


<div id='menu-asoy'><br/>
<ul id='menu-asoy'>

<li>
<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
<dl>
<dt><a href='http://lora-malunk.blogspot.com/'>Home</a></dt>
</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li>
<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
<dl>
<dt><a href='#'>Arsip</a></dt>
<dd><a href='LinkSubMenu1'>SubMenu1</a></dd>
<dd><a href='LinkSubMenu1'>SubMenu1</a></dd>
<dd><a href='LinkSubMenu1'>SubMenu1</a></dd>
</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li>
<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
<dl>
<dt><a href='#'>Conten</a></dt>
<dd><a href='LinkSubMenu2'>SubMenu2</a></dd>
<dd><a href='LinkSubMenu2'>SubMenu2</a></dd>
<dd><a href='LinkSubMenu2'>SubMenu2</a></dd>
<dd><a href='LinkSubMenu2'>SubMenu2</a></dd>
<dd><a href='LinkSubMenu2'>SubMenu2</a></dd>
</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li>
<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
<dl>
<dt><a href=''>Other</a></dt>
<dd><a href='LinkSubMenu3'>SubMenu3</a></dd>
<dd><a href='LinkSubMenu3'>SubMenu3</a></dd>
<dd><a href='LinkSubMenu3'>SubMenu3</a></dd>
<dd><a href='LinkSubMenu3'>SubMenu3</a></dd>
</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

</ul>
<br/><br/><br/><br/>
</div>


13. Lalu SAVE TEMPLATE anda.

SEMPURNA......
Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Lora Malunk Blog
tutorial blog up to date
Loading...

+ komentar + 7 komentar

22 September 2011 07.21

nice tutorial sahabat

Terimakasih brijakartaveteran atas Komentarnya di Cara Membuat Menu Horizontal Dengan Model Aselole
26 September 2011 21.22

saya akan coba bang lora, nanti kalo kerjaannya udah agak kelaran. makasih atas tutornya

Terimakasih HONDA CENTER atas Komentarnya di Cara Membuat Menu Horizontal Dengan Model Aselole
27 September 2011 12.26

saat nya saiia berkata.. sempurna (gaiia demian*) :p

FCDB

Terimakasih PS Holic atas Komentarnya di Cara Membuat Menu Horizontal Dengan Model Aselole
27 September 2011 18.52

Keren APa menunya Ada gambar kartun nya juga di atasnya atau itu hanya dalam screnshot aja

Terimakasih Zh!nTho atas Komentarnya di Cara Membuat Menu Horizontal Dengan Model Aselole
1 Oktober 2011 19.05

"Terima kasih sudah sudi berkunjung dan memberikan commentnya di blog Lora Malunk"

Menu ini bisa diberi gambar dan bisa anda mudif sendiri."

5 November 2011 14.39

supaya menunya rata tengah gimana GAN???

Terimakasih Sulistiyo atas Komentarnya di Cara Membuat Menu Horizontal Dengan Model Aselole
22 November 2011 17.34

info yang bagus...trimakasih...mau di coba..

Terimakasih Abdul Rohim S. atas Komentarnya di Cara Membuat Menu Horizontal Dengan Model Aselole

Posting Komentar

Kebijakan berkomentar akan dihapus, jika tidak sesuai dengan aturan dibawah ini, Demi kenyamanan kita bersama :

» Menggunakan bahasa yang tidak sopan (Sara, Pornografi, Menyinggung)
» Duplikat komentar
» Komentar menautkan link secara langsung
» Komentar tidak berkaitan dengan artikel
» Judul Komentar Berupa Promosi

Terima Kasih .... Lora Malunk Blog

 

Configurasi

Alexa :
Stats :
Page Rank : Free PageRank Checker
DMCA :
Amung :
Bloggers : Bloggers - Meet Millions of Bloggers
Extreme :
eXTReMe Tracker
Support : Lora Malunk Blog | Songong Template | Tutorial Blog
Copyright © 2011. Lora Malunk Blog - All Rights Reserved
Template Modify by Lora Malunk Blog
Proudly powered by Blogger