Membuat Drop Down Menu blog/website

Postingan kali ini akan membahas seputar kecantikan blogger/website....

Hahahahaha.. kecantikan,,, "dandan" kali tuh website...

dipoles sedikit lah gak papa.... biar kelihatan makin cantik and rapi... betul gak???

Hobby nge-blog??? pastinya pengen menampilkan yang terbaik dan yang terindah juga yang terunik..........

hemm....... belum pada tau bagaimana membuat drop down menu??? (Drop down menu seperti yang ada di ujung atas halaman ini), pengen tau caranya???? sulit gak ya???

hem...... lumayan sulit sih.... sebab urusannya sama HTML,,,  waduh "Makanan apalagi tuh HTML??" hehehehe

yaudah deh... ngepoint aja....

Langkah 1

•  Tambahkan menu CSS   Dashboard >> Design >> Edit Html > atau rinciannya seperti di bawah ini:
  

1. Silahkan Log-In ke Blogger mu
2. Dari menu dashboard / dasbor, pilih menu Design / Rancangan
3. Pilih Edit HTML
4. Temukan kode  ]]></b:skin>     gunakan Ctrl+F untuk mempermudah pencarian
5. Tambahkan kode di bawah ini sebelum kode tersebut 

#jsddm {

margin: 0;

padding: 15px;

z-index:1000000000;

position:relative;

}

#jsddm li {

float: left;

list-style: none;

font: 12px Tahoma, Arial;

}

#jsddm li a {

display: block;

white-space: nowrap;

margin:1px 3px;

border: 1px solid #AAAAAA;

background: #cccccc;

background: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#cccccc));

background: -moz-linear-gradient(top, #ebebeb, #cccccc);

padding: 5px 10px;

-webkit-border-radius: 5px;

-moz-border-radius: 5px;

border-radius: 5px;

text-shadow: #ffffff 0 1px 0;

color: #363636;

font-size: 15px;

font-family: Helvetica, Arial, Sans-Serif;

text-decoration: none;

vertical-align: middle;

}

#jsddm li a:hover {

background: #C8C8C8;

}

#jsddm li ul {

margin: 0;

padding: 0;

position: absolute;

visibility: hidden;

border-top: 1px solid white;

}

#jsddm li ul li {

float: none;

display: inline;

}

#jsddm li ul li a {

width: auto;

background: #CAE8FA;

}

#jsddm li ul li a:hover {

background: #A3CEE5;

}

Langkah 2

• Tambahkan Kode JavaScript

1. Setelah kode tersebut dipasang, selanjutnya cari kode </head>
2. Setelah kode tersebut ditemukan, tambahkan kode di bawah ini tepat sebelum kode tersebut:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js' type='text/javascript'/>

  <script type='text/javascript'>

  //<![CDATA[

var timeout    = 500;

  var closetimer = 0;

  var ddmenuitem = 0;

function jsddm_open()

  {  jsddm_canceltimer();

  jsddm_close();

  ddmenuitem = $(this).find('ul').css('visibility', 'visible');}

function jsddm_close()

  {  if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}

function jsddm_timer()

  {  closetimer = window.setTimeout(jsddm_close, timeout);}

function jsddm_canceltimer()

  {  if(closetimer)

  {  window.clearTimeout(closetimer);

  closetimer = null;}}

$(document).ready(function()

  {  $('#jsddm > li').bind('mouseover', jsddm_open)

  $('#jsddm > li').bind('mouseout',  jsddm_timer)});

document.onclick = jsddm_close;

  //]]>

  </script>

• Klik "Save Template"

Langkah 3

• Langkah selanjutnya, kembali ke dashboard / dasbor, lalu pilih menu Page Element / Elemen Halaman
• Pilih Add a Gadget / Tambahkan Gadget
• Pilih HTML/JavaScript
• Kopas kode di bawah ini

<ul id="jsddm">

  <li><a href="#">Home</a>

  <li><a href="#">Menu 1</a>

  <ul>

  <li><a href="#">Drop 1-1</a></li>

  <li><a href="#">Drop 1-2</a></li>

  <li><a href="#">Drop 1-3</a></li>

  </ul>

  </li>

 <li><a href="#">Menu 2</a>

  <ul>

  <li><a href="#">Drop 2-1</a></li>

  <li><a href="#">Drop 2-2</a></li>

  </ul>

  </li>

 <li><a href="#">Menu 3</a>

  <ul>

  <li><a href="#">Drop 3-1</a></li>

  <li><a href="#">Drop 3-2</a></li>

  <li><a href="#">Drop 3-3</a></li>

  <li><a href="#">Drop 3-4</a></li>

  </ul>

  </li>

 <li><a href="#">Menu 4</a></li>

  <li><a href="#">Menu 5</a></li>

  <li><a href="#">www.sedapmalam.co.cc</a></li>

  </li></ul>

• (Tempatkan HTML/JavaScript tersebut di tempat yang sesuai dengan keinginan kalian) Klik Save, dan Klik Save lagi dari Page Element / Element  Halaman 
• Lihatlah Hasilnya.....

NB: Dalam Langkah 3, Kalian harus mengganti tanda # dengan URL (alamat web) yang Valid

Apakah ini postingan ini membantu??? Jika ada keluhan, silahkan tuliskan di kotak komentar...

semoga bermanfaat....

Posted in: Blog Tips