February 04, 2011
16





Satu trik mempercantik blog lagi.

Sebelumnya saya sudah menulis gimana caranya membuat drop down menu yang bisa di letakkan di sembarang tempat di blog kamu, kali ini saya akan membahas gimana caranya membuat drop down menu di header dengan CSS.

Nantinya kamu bisa memodifikasi warna-warnanya sesuka kamu, dengan memodifikasi struktur css-nya.

Caranya seperti basa,


login dulu ke Blogger >> Design >> Edit HTML >> Expand Widget Template
Temukan kode </head>
Kopikan kode berikut di atas kode </head> .

<script type="text/javascript"
src="http://izoelsdropdownmenu.googlecode.com/files/izoel-chromedropdown.js">
</script>
.
Selanjutnya Cari Kode ]]></b:skin> , tambahkan kode berikut ini di atas kode ]]></b:skin>.
Di bawah ini adalah struktur CSS untuk mengatur tampilan menu nantinya yang bisa kamu modifikasi seperti mengganti warna backgroundnya, warna huruf, dan lain lain.

/* CSS Structure */

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

.chromestyle:after{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.chromestyle ul{
border: 1px solid #BBB;
width: 100%;
background: url(http://i1191.photobucket.com/albums/z464/izoel1/chromebg2-over.png) center center repeat-x;
padding: 4px 0;
margin: 0;
text-align: center;
}

.chromestyle ul li{
display: inline;
}

.chromestyle ul li a{
color: #494949;
padding: 4px 7px;
margin: 0;
text-decoration: none;
border-right: 1px solid #B5E2FE;
}

.chromestyle ul li a:hover, .chromestyle ul li a.selected{
background: url(http://i1191.photobucket.com/albums/z464/izoel1/chromebg2-over.png) center center repeat-x;
}

.dropmenudiv{
position:absolute;
top: 0;
border: 1px solid #B5E2FE;
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);
}

.dropmenudiv a{
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 1px solid #B5E2FE;
padding: 2px 0;
text-decoration: none;
font-weight: bold;
color: black;
}

.dropmenudiv a:hover{
background-color: #EBF7FF;
}
.
 
Kemudian cari struktur kode yang minimal mirip dengan struktur seperti di bawah ini

<b:includable id='description'>
<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span></p>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
.
Kalau sudah ketemu kopikan kode berikut tepat di bawah struktur di atas pada langkah sebelumnya, ini adalah struktur kode HTML dari isi menu yang akan kamu buat.

<div class="chromestyle" id="chromemenu">
<ul>
<li><a href="http://alexander-zulkarnain.blogspot.com">Home</a></li>
<li><a href="#" rel="dropmenu1">Menu1</a></li>
<li><a href="#" rel="dropmenu2">Menu2</a></li>
</ul>
</div>

<!--menu drop down pertama -->
<div id="dropmenu1" class="dropmenudiv">
<a href="URL sub menu1">Sub Menu1</a>
<a href="URL sub menu2">Sub Menu2</a>
<a href="URL sub menu3">Sub Menu3</a>
</div>


<!--menu drop down kedua -->
<div id="dropmenu2" class="dropmenudiv">
<a href="URL sub menu1">Sub Menu1</a>
<a href="URL sub menu2">Sub Menu2</a>
<a href="URL sub menu3">Sub Menu3</a>
</div>

<script type="text/javascript">
cssdropdown.startchrome("chromemenu")
</script>
.
       Catatan : gambar tanda panah ke bawah ada di dalam file .js

Coba perhatikan tulisan yang berwarna hijau struktur tersebut. Tulisan "dropmenu1" dan "dropmenu2" tersebut merupakan atribut rel dari parent menu drop down yang kita buat. Pada bagian tersebut terlihat bahwa terdapat 2 menu drop down, yaitu "Menu1" dan "Menu2" (warna kuning). Jika pembaca ingin menambah menu drop down lagi misalnya "Menu3", maka buatlah juga atribut rel untuk "Menu3" tersebut misalnya "dropmenu3", setelah itu tambahkan struktur menu drop down untuk "Menu3" setelah menu drop down kedua
Perhatikan bahwa nama atribut ID untuk menu drop down ketiga harus sama dengan nama atribut rel untuk "Menu2" yaitu "dropmenu2". Begitu pula jika pembaca ingin menambah menu drop down keempat, kelima, dan seterusnya.
Langkah terakhir, simpan template kamu dan ucapkanlah alhamdulillah
Silakan mencoba

16 komentar:

  1. gan kalo pengen nya warna "hitam"apanya yg di ubah gan

    ReplyDelete
  2. @luthfi nur ilman (bhopethix)
    kamu bisa mengatur pada settingan CSSnya


    untuk warna dasar panel mendatar kamu bisa ganti dengan url gambar, atau hapus urlnya dan ganti dengan kode background-color:diikuti kode warna di bawah kode url, struktur ini ditandai dengan kode .chromestyle ul{

    nah kalau warna menu yang ke vertikal bawahnya kamu cari .dropmenudiv{, lalu scroll ke bawah dan ada kode


    z-index:100;

    background-color: white;


    kamu ganti warnanya (white) dengan black atau dengan kode warna hitam yaitu #000000

    ReplyDelete
  3. thanks gan...ilmu yg sangat bermanfaat buat ane..
    hehehe..
    coba liat hasil editan ane di download-film-baru.blogspot.com

    ReplyDelete
  4. @Engky Edogawa Philips
    wah saya sudah liat sob, selamat asas keberhasilannya jangan lupa baca juga membuat multilevel drop down menu.

    ReplyDelete
  5. alhamdulillah akhirnya berhasil juga bro... makasih ya udh diajarin. bermanfaat sekali buat ane yang masih belajar ngeblog:)

    ReplyDelete
  6. kq saya jd menunya ada d bwh ya? bkn diatas?

    ReplyDelete
  7. @Ickhel si Koin berputar kalau boleh tau masang CSSnya dimana sob ?, terus HTMLnya di pasang dimana ?

    ReplyDelete
  8. kalau menempatkan menu navigasi di atas header caranya gimana?

    ReplyDelete
  9. @demibara navigasi di atas header bisa di letakkan CSS sebelum skin, terus tinggal pasang HTML di atas header sob :)

    ReplyDelete
  10. BLOG Sngguh" keren bgtttt Gannn!!!!!!!!
    SUPer super skaliii.., ManTappppp....

    Ajari aku ya Gan..., aku payah bangetttt!!!
    Moga slalu mningkat 'nd maju truzzz blog ny..., Amien..!!

    Sering-sering kesini jadinya...

    ReplyDelete
  11. buat bang izoel,thankx ilmux.....berguna n bermanfaat buat ane...
    silahkan mampir n kasi komentarx bang...
    habibijonsonmanonggor.blogspot.com/ tapi maaf,rumahx masih berantakan...
    salam sahabat dari kalimantan.......

    ReplyDelete
  12. Bagus seklai. Numpang promosi gan..Saya sedang membenah blog saya sebagai Uploader (murni 100% no copas artikel, no copy link donlot). alamatnya www.surgamepc.blogspot.com
    Insyaallah sebentar lagi saya daftarkan domain untuk www.surgamepc.com
    Mohon para pembaca yang sejenak membaca pengumuman saya sudi berkunjung dan memberi donasi, biar sedikit, seikhlasnyalah.
    Best Regard
    Admin SURGAMEPC.COM

    ReplyDelete
  13. Bang Izooooel!!!Thx bgt ya bantuannya:))
    Akhirnya aq sukses juga bikin menu dropdown berkat tutorial abang yang sangat2 bermanfaat.

    makasihhhhhhh :))))))

    ReplyDelete

Saya sangat berterimakasih apabila sahabat sekalian bersedia untuk tidak meninggalkan spam dan meninggalkan komentar yang berhubungan dengan artikel di atas.