Membuat Dropdown Menu (2)

Loncat ke form komentar

Tulisan yang berhubungan dengan Membuat Dropdown Menu (2) ...

Ini adalah bagian 2 dari membuat drop down menu dengan menggunakan CSS dan Javascript. Ada baiknya anda baca ulang cara membuat dropdown menu(1) pada post kemarin. Nah jika anda sudah mengikuti dari awal, ikutilah Langkahnya adalah sebagai berikut:

1: Signin ke Blogger.com, dan langsung tuju => layout dan klik edit HTML blog anda. Kotak kecil bertuliskan expand widged gak usah di centang.

Peringatan :sebelum anda mulai mengedit template, backup template blog anda terllebih dahulu dengan cara klik download Full Template lalu simpan tempalte anda di tempat yang aman.

2: Carilah Kode </head>. Untuk memudahkan pencarian: tekan ctrl+f (ini hanya berlaku bagi browser firefox). Maka di sudut kiri bawah browser anda, akan muncul kolom pencarian. Ketikkan </head> lalu kilk Next. Nah udah ketemu tuh kode </head>-nya.

3: Copy Kode di bawah ini.

<script src='http://stubb.fanatic.googlepages.com/chrome.js' type='text/javascript'/>

4: Paste Kode tersebut, persis diatas </head>

Catatan: jika anda menggunakan SHORTCUT ICON, letakkan script tersebut diatas SHORTCUT ICON

5: Cari Kode ini; ]]></b:skin> jika sudah ketemu, copy css dibawah ini.

.chromestyle{
width: 99%;
font-weight: bold;
}

.chromestyle:after{ /*Add margin between menu and rest of content in Firefox*/
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.chromestyle ul{
border: 1px solid #BBB;
width: 100%;
background: url(http://photos1.blogger.com/blogger2/2604/6063341998323/320/chromebg3.gif) center center repeat-x; /*THEME CHANGE HERE*/
padding: 4px 0;
margin: 0;
text-align: center; /*set value to "left", "center", or "right"*/
}

.chromestyle ul li{
display: inline;
}

.chromestyle ul li a{
color: #494949;
padding: 4px 7px;
margin: 0;
text-decoration: none;
border-right: 1px solid #ADED7C; /*THEME CHANGE HERE*/
}

.chromestyle ul li a:hover{
background: url(http://photos1.blogger.com/blogger2/2604/6063341998323/320/chromebg3-over.gif) center center repeat-x; /*THEME CHANGE HERE*/
}

.chromestyle ul li a[rel]:after{ /*HTML to indicate drop down link*/
content: " ";
/*content: " " url(downimage.gif); /*uncomment this line to use an image instead*/
}


/* ######### Style for Drop Down Menu ######### */

.dropmenudiv{
position:absolute;
top: 0;
border: 1px solid #ADED7C; /*THEME CHANGE HERE*/
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
background-color: white;
width: 200px;
visibility: hidden;
filter: progid:DXImageTransform.Microsoft.Shadow(color=#CACACA,direction=135,strength=4); /*Add Shadow in IE. Remove if desired*/
}


.dropmenudiv a{
width: 100%;
display: block;
text-indent: 3px;
border: 1px solid #ADED7C; /*THEME CHANGE HERE*/
padding: 2px 0;
text-decoration: none;
font-weight: bold;
color: black;
}

.dropmenudiv a:hover{ /*THEME CHANGE HERE*/
background-color: #EAFADC;
}

Lalu Paste kode Css tersebut, persis sebelum kode ]]></b:skin>

Catatan: Jika anda ingin memodifikasi atau membuat tampilan berbeda, anda dapat mendownload Kode Css seperti tersebut diatas di link ini.
klik di sini untuk download kode CSS style 1:
klik di sini untuk download kode.CSS style 2:
klik di sini untuk download kode CSS style 3 (seperti kode pada item 5 diatas):
klik di sini untuk download kode CSS style 4:

Terakir (pada sesi ini) klik Save Template untuk menyimpan template blog anda.

Nah..... sekarang tinggal meletakkan link2 nya pada header blog kita. Jadi tetap stay tune di sawasanganam.com untuk kelanjutan tutorial membuat dropdown menu ini