Cara membut menu Dropdown



1.  Seperti biasa Login ke Blogger

   2.  Pada Dasbor, pilih Rancangan/Layout, kemudian klik Edit HTML

3.  Sebelum mengutak-atik template, sebaiknya Download Template Lengkap terlebih dahulu untuk mengantisipasi adanya kesalahan Editing template.

   4.  Cari kode </head> , untuk mempermudah pencarian tekan tombol Ctrl+F atau menggunakan tombol F3

   5.  Setelah menemukan kode </head> , copy dan paste script berikut diatas kode tersebut, kemudian Simpan Template




<style type='text/css'>

#catmenucontainer{

height:29px;

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8SOwqHjyxEdoxBV5Dmw67MBgFw6g44bSJ1nZgokVbe2b2Zsr-dvbr_IBfZKIl_gfjkZi_TP18jQd-hD_rDEe-0YJgqFprnet0Nccl4bQ7u43Tu9PqYWfCfz6oYVb3gvJ0_9Vh4pn9t-Ot/) repeat-x;

display:block;

padding:0px 0 0px 0px;

font: 14px &quot;Century gothic&quot;,verdana, Arial, sans-serif;

font-weight:normal;

border-top:1px solid #686D6F;

}



#catmenu ,#catmenu ul {

margin: 0px 5px;

padding: 0px;

list-style: none;

height:29px;

}



#catmenu  a {

color: #999;

display: block;

font-weight: normal;

padding: 4px 10px 6px 10px;

}



#catmenu  a:hover {

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizny9ISomAufNqftfvCt8ZbHWqRojPAPGK33kM-4isPH6Sa-cdy9VzbHM7XCJCWqeyQcy7bj4jgR_t5c1BLA1Hecm39KJYlky1yYdwqmcL6fJmg1zMTnEoVeqdqDa4cHTp7DzTI3zveb28/) repeat-x;

color: #fff;

display: block;

text-decoration: none;

}



#catmenu  li {

float: left;

margin: 0px;

padding: 0px;

}



#catmenu  li li {

float: left;

margin: 0px 0px 0px 0px;

padding: 0px;

width: 130px;

}



#catmenu  li li a, #catmenu  li li a:link, #catmenu  li li a:visited {

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8SOwqHjyxEdoxBV5Dmw67MBgFw6g44bSJ1nZgokVbe2b2Zsr-dvbr_IBfZKIl_gfjkZi_TP18jQd-hD_rDEe-0YJgqFprnet0Nccl4bQ7u43Tu9PqYWfCfz6oYVb3gvJ0_9Vh4pn9t-Ot/) repeat-x;

width: 150px;

float: none;

margin: 0px;

padding: 4px 10px 5px 10px;

color:#E8EBEE;

border-bottom:1px solid #2C3133;

}



#catmenu  li li a:hover, #catmenu  li li a:active {

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizny9ISomAufNqftfvCt8ZbHWqRojPAPGK33kM-4isPH6Sa-cdy9VzbHM7XCJCWqeyQcy7bj4jgR_t5c1BLA1Hecm39KJYlky1yYdwqmcL6fJmg1zMTnEoVeqdqDa4cHTp7DzTI3zveb28/) repeat-x;

width: 150px;

float: none;

margin: 0px;

padding: 4px 10px 5px 10px;

color:#fff;

border-bottom:1px solid #2C3133;

}



#catmenu  li ul {

position: absolute;

width: 10em;

left: -999em;

z-index:1;

}



#catmenu  li:hover ul {

left: auto;

display: block;

}



#catmenu  li:hover ul, #catmenu li.sfhover ul {

left: auto;

}

</style>

nb : anda bisa mengubah script diatas seperti width (lebar), color solid (warna), border (garis tepi) dsb. jika kode warna anda bisa mendapat di corel draw, macromedia flash player atau yg lain, tapi jika anda tidak mempunyai aplikasi tersebut anda cari sendiri...hahaha

   6.  Sekarang buka menu Elemen Laman dekat Edit HTML, kemudian klik Tambah Gadget.
   7.  Lalu copy dan paste kode HTML dibawah ini
<div id="catmenucontainer">

<div id="catmenu">

<ul>

<li><a href="URL Anda" title="pesan">Home</a></li>

<li><a href=" URL Anda " title=" pesan ">Menu 1</a></li>

<li><a href=" URL Anda " title=" pesan ">Menu 2</a>

<ul class="children">

<li><a href=" URL Anda " title=" pesan ">Menu 2.1</a></li>

<li><a href=" URL Anda " title=" pesan ">Menu 2.2</a></li>

<li><a href=" URL Anda " title=" pesan ">Menu 2.3</a></li>

<li><a href=" URL Anda " title=" pesan ">Menu 2.4</a></li>

</ul>

</li>

<li><a href=" URL Anda " title=" pesan ">Menu 3</a>

<ul class="children">

<li><a href=" URL Anda " title=" pesan ">Menu 3.1</a></li>

<li><a href=" URL Anda " title=" pesan ">Menu 3.2</a></li>

<li><a href=" URL Anda " title=" pesan ">Menu 3.3</a></li>

</ul>

</li>

<li><a href=" URL Anda " title=" pesan ">Menu 4</a>

<ul class="children">

<li><a href=" URL Anda " title=" pesan ">Menu 4.1</a></li>

<li><a href=" URL Anda " title=" pesan ">Menu 4.2</a></li>

</ul>

</li>

<li><a href=" URL Anda " title=" pesan ">Menu 5</a></li>

<li><a href=" URL Anda " title=" pesan ">Menu 6</a></li>

<li><a href=" URL Anda " title=" pesan ">Menu 7</a></li>

</ul>

</div>

</div>

0 Response to "Cara membut menu Dropdown"

Posting Komentar