Monday, 13 January 2014

Cara Membuat Menu Drop Down Tanpa Edit Html



Cara Membuat Menu Drop Down Tanpa Edit HtmlPada kesempatan kali ini saya akan berbagi tentang " Cara Membuat Menu Dropdown Di Blog " cata ini tedak memerlukan edit HTML jadi lebih mudah menggunakannya.


Selengkapnya

Cara mebuat menu dropdown pada blog
1. Loggin dulu ke blogger.com
2. Pada dasbor "pilih tata letak"
3. Tambah gadged terus copy kan kode-kode ini di bawah ini
<style>
/* -- Menu Horizontal + Sub Menu-- */
#cat-nav {background:#156994;margin:0 15px;padding:0;height:35px;}
#cat-nav a { color:#eee; text-decoration:none; text-shadow: #033148 0px 1px 0px;border-right:1px solid #156994;}
#cat-nav a:hover { color:#fff; }
#cat-nav li:hover { background:#000; }
#cat-nav a span { font-family:Verdana, Geneva, sans-serif; font-size:11px; font-style:normal; font-weight:400; color:#fff; text-shadow:none;}
#cat-nav .nav-description { display:block; }
#cat-nav a:hover span { color:#fff; }
#secnav, #secnav ul { position:relative; z-index:100; margin:0; padding:0; list-style:none; line-height:1; background:#0d5e88; }
#secnav a { font-family:Georgia, "Times New Roman", Times, serif; font-style:italic; font-weight:700; font-size:14px; display:block; z-index:100; padding:0 15px; line-height:35px; text-decoration:none;}
#secnav li { float:left; width: auto; height:35px;}
#secnav li ul  { position: absolute; left: -999em; width: 200px; top:35px}
#secnav li ul li  { height:30px; border-top:1px solid #fff; }
#secnav li ul li a  { font-family:Verdana, Geneva, sans-serif; width:180px; line-height:30px; padding:0 10px; font-size:11px; font-style:normal; font-weight:400; color:#eee; }
#secnav li ul ul  { margin: -30px 0 0 180px; }
#secnav li:hover ul ul, #secnav li:hover ul ul ul, #secnav li.sfhover ul ul, #secnav li.sfhover ul ul ul { left:-999em; }
#secnav li:hover ul, #secnav li li:hover ul, #secnav li li li:hover ul, #secnav li.sfhover ul, #secnav li li.sfhover ul, #secnav li li li.sfhover ul { left: auto; }
#secnav li:hover,#secnav li.hover  { position:static; }
#cat-nav #secnav {width:100%;margin:0 auto;}
</style>
<div id='cat-nav'>
<ul class='fl' id='secnav'>
<li><a href='#'>Home</a></li>
<li><a href='#'>Menu 1</a></li>
<li><a href='#'>Menu + Sub Menu</a>
<ul id='sub-custom-nav'>
<li><a href='#'>Sub Menu 1</a></li>
<li><a href='#'>Sub Menu 2</a></li>
<li><a href='#'>Sub Menu 3</a></li>
</ul>
</li>
<li><a href='#'>Menu</a></li>
<li><a href='#'>Menu + Sub</a>
<ul id='sub-custom-nav'>
<li><a href='#'>Sub 1</a></li>
<li><a href='#'>Sub 2</a></li>
<li><a href='#'>Sub 3</a></li>
<li><a href='#'>Sub 4</a></li>
<li><a href='#'>Sub 5</a></li>
<li><a href='#'>Sub 6</a></li>
</ul>
</li>
<li><a href='#'>Menu</a></li>
<li><a href='http://mulkiblog33.blogspot.com'>Blogger Tutorial</a></li>
</ul>
</div>

4. Ubah yang bertanda "#" menjadi alamat postingan kamu dan Yang bertulisan "Sub" ubah dengan judul
    postingan kamu
5. klik simpan selesai deh ^_^

Mohon untuk kilik Share blog ini untuk kemajuan blog ini terimakasih

Tags :
Cara Membuat Menu Drop Down Tanpa Edit Html
Membuat menu dropdown tanpa edit HTML
Cara Membuat Menu Dropdown Di Blog








14 komentar

iya makasih kunjunganya, jangan bosen berkunjung ya !

mksh ya infonya, oiya sub menu nya udh aku kasih alamat postingan nya tp kok ga muncul ya gan? :D

BAGUS!!! tapi masih pemula om.... perlu banyak belajar

Mampir ke blog saya dong gan :) , www.zhidanzhiday.blospot.com

makasih banyak mass buat infonya,, nice post

http://toko661.com/pengobatan-tradisional-abses-anus/

makasih bnayak buat infonya,, tutornya sangat bermanfaat sekali

http://goo.gl/R4TQx2

makasih banyak buat tutornya gan,, sangat bermanfaat

http://goo.gl/hEcvBx

cara nambahin menu gi mana gan?

trims .. http://dumay4.blogspot.com


EmoticonEmoticon