Hanya arsip

halaman asli ada di http://kolom-tutorial.blogspot.com

Membuat Menu Drop down dengan CSS

Silahkan arahkan mouse komputer anda ke tab menu di bawah ini :

 

 

 


Tab menu dropdown ini 100% menggunakan Cascading Style Sheet (CSS), tanpa javascript ataupun skript yang
lainnya. Sehingga Menu drop down ini tidak akan membuat blog anda menjadi lambat ketika di loading,
dan cocok dalam banyak browser. Bagi anda yang ingin memasang tab menu di bagian headernya, saya sarankan
untuk memasang menu drop down ini di blognya.
Bagaimana cara untuk membuat menu drop down ini? tentu saja banyak cara untuk membuatnya, namun
dalam kesempatan ini saya akan menuliskan dengan 2 cara. Kira-kira caranya seperti ini :

# Metode yang pertama :

langkah #1 :

  1. Login ke blogger dengan ID anda
  2. Setelah berada pada halaman dashboard, klik Layout.
  3. Kemudian klik tab edit HTML.
  4. Saya sarankan kepada anda sebelum mengubah kode template, silahkan di backup dulu. Klik link Download template sepenuhnya.
  5. Silahkan lihat ke kode template anda, dan temukan kode berikut : ]]></b:skin>
  6. Copy kode di bawah ini, lalu paste di atas kode : ]]></b:skin>
  7. /* ================================================================
    This copyright notice must be untouched at all times.

    The original version of this stylesheet and the associated (x)html
    is available at http://www.cssplay.co.uk/menus/drop_definition2.html
    Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
    This stylesheet and the assocaited (x)html may be modified in any
    way to fit your requirements.
    =================================================================== */
    #menu {list-style-type:none; margin:5px; padding:0;}
    #menu li {float:left; padding:0; margin:0 1px 0 0; position:relative; width:150px; height:3em; z-index:100;}
    #menu li dl {position:absolute; top:0; left:0;padding-bottom:5px;}
    #menu li a, #menu li a:visited {text-decoration:none;}
    #menu li dd {display:none;}
    #menu li a:hover {border:0;}
    #menu li:hover dd, #menu li a:hover dd {display:block;}
    #menu li:hover dl, #menu li a:hover dl {padding-bottom:10px;}
    #menu table {border-collapse:collapse; padding:0; margin:-1px; font-size:1em;}
    #menu dl {width: 150px; margin: 0; padding: 0; background: #c9ba65;}
    #menu dt {margin:0; padding: 5px 5px 5px 20px; font-size: 1.1em; color: #fff; border-bottom:1px solid #fff; border-top:1px solid #fff;}

    #menu .one {background: #827b6b; border-top:5px solid #dca;}
    #menu .two {background: #646e4c; border-top:5px solid #bb9;}
    #menu .three {background: #a4a88d; border-top:5px solid #eec;}
    #menu .four {background: #a29f68; border-top:5px solid #f8f8b8;}

    #menu .one dt {background: #b2ab9b;}
    #menu .two dt {background: #949e7c;}
    #menu .three dt {background: #d4d8bd;}
    #menu .four dt {background: #e2dfa8;}

    #menu dd {margin:0; padding:0; color: #fff; font-size: 1em; text-align:left;}
    #menu .one dd {border-bottom:1px solid #aaa;}
    #menu .two dd {border-bottom:1px solid #e8e8e8;}
    #menu .three dd {border-bottom:1px solid #eee;}
    #menu .four dd {border-bottom:1px solid #999;}
    #menu dd.last {border-bottom:1px solid #fff;}

    #menu dt a, #menu dt a:visited {display:block; color:#444;}

    #menu dd a, #menu dd a:visited {color:#fff; text-decoration:none; display:block; padding:4px 5px 4px 20px; width:125px;}

    #menu .one dd a {background:#949e7c; color:#eee;}
    #menu .two dd a {background:#d4d8bd; color:#346;}
    #menu .three dd a {background:#e2dfa8; color:#654;}
    #menu .four dd a {background:#b2ab9b; color:#ff8;}

    #menu .one dd a:hover {background: #b2ab9b; color:#345;}
    #menu .two dd a:hover {background: #949e7c; color:#543;}
    #menu .three dd a:hover {background: #d4d8bd; color:#123;}
    #menu .four dd a:hover {background: #e2dfa8; color:#534;}

  8. Silahkan lihat ke bagian bawah lagi, lalu temukan kode seperti ini :


  9. <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

    <b:widget id='Header1' locked='true' title='your blog title (Header)' type='Header'/>
    </b:section>

  10. Ubahlah kode yang saya cetak hijau, sehingga kodenya menjadi seperti ini :


  11. <b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>
    <b:widget id='Header1' locked='false' title='your blog title (Header)' type='Header'/>
    </b:section>

  12. Klik tombol Simpan Template. Tunggu beberapa saat sampai template anda selesai di simpan.

langkah #2

  1. Klik pada tab elemen Halaman yang berada di bagian atas. Perhatikan gambar berikut :
  2. Klik pada Tambahkan sebuah Elemen halaman yang berada di atas elemen header. Perhatikan gambar berikut ini:
  3. setelah window pop up muncul, klik tombol Tambahkan ke blog untuk HTML/JavaScript.:
  4. Copy kemudian paste kode di bawah ini pada elemen yang muncul tadi :
  5. Klik tombol Simpan Template
  6. Selesai. Silahkan lihat hasilnya.

Catatan : untuk beberapa template, cara ini tidak menghasilkan tampilan yang bagus, maka anda bisa mencoba cara berikut.

Metode kedua

Karena desain dari template sangat berbeda antara satu dengan yang lainnya, maka saya
hanya mengambil contoh untuk template minima saja (template asli blogger) sebagai gambaran saja.
langkahnya adalah sebagai berikut :

  1. Login ke blogger dengan ID anda
  2. setelah berada di halaman dashbord , klik Layout.
  3. Kemudian klik tabedit HTML.
  4. Saya sarankan kepada anda sebelum mengubah kode template, silahkan di backup dulu. Klik link Download template sepenuhnya.
  5. Silahkan anda beri tanda tik/cek pada kotak kecil di samping tulisan Expand Templates Widget. Tunggu beberapa saat.
  6. Lihat ke kode template anda dan temukan kode berikut : ]]></b:skin>
  7. Copy kode di bawah ini, lalu paste di atas kode: ]]></b:skin>
  8. /* ================================================================
    This copyright notice must be untouched at all times.

    The original version of this stylesheet and the associated (x)html
    is available at http://www.cssplay.co.uk/menus/drop_definition2.html
    Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
    This stylesheet and the assocaited (x)html may be modified in any
    way to fit your requirements.
    =================================================================== */
    #menu {list-style-type:none; margin:5px; padding:0;}
    #menu li {float:left; padding:0; margin:0 1px 0 0; position:relative; width:150px; height:3em; z-index:100;}
    #menu li dl {position:absolute; top:0; left:0;padding-bottom:5px;}
    #menu li a, #menu li a:visited {text-decoration:none;}
    #menu li dd {display:none;}
    #menu li a:hover {border:0;}
    #menu li:hover dd, #menu li a:hover dd {display:block;}
    #menu li:hover dl, #menu li a:hover dl {padding-bottom:10px;}
    #menu table {border-collapse:collapse; padding:0; margin:-1px; font-size:1em;}
    #menu dl {width: 150px; margin: 0; padding: 0; background: #c9ba65;}
    #menu dt {margin:0; padding: 5px 5px 5px 20px; font-size: 1.1em; color: #fff; border-bottom:1px solid #fff; border-top:1px solid #fff;}

    #menu .one {background: #827b6b; border-top:5px solid #dca;}
    #menu .two {background: #646e4c; border-top:5px solid #bb9;}
    #menu .three {background: #a4a88d; border-top:5px solid #eec;}
    #menu .four {background: #a29f68; border-top:5px solid #f8f8b8;}

    #menu .one dt {background: #b2ab9b;}
    #menu .two dt {background: #949e7c;}
    #menu .three dt {background: #d4d8bd;}
    #menu .four dt {background: #e2dfa8;}

    #menu dd {margin:0; padding:0; color: #fff; font-size: 1em; text-align:left;}
    #menu .one dd {border-bottom:1px solid #aaa;}
    #menu .two dd {border-bottom:1px solid #e8e8e8;}
    #menu .three dd {border-bottom:1px solid #eee;}
    #menu .four dd {border-bottom:1px solid #999;}
    #menu dd.last {border-bottom:1px solid #fff;}

    #menu dt a, #menu dt a:visited {display:block; color:#444;}

    #menu dd a, #menu dd a:visited {color:#fff; text-decoration:none; display:block; padding:4px 5px 4px 20px; width:125px;}

    #menu .one dd a {background:#949e7c; color:#eee;}
    #menu .two dd a {background:#d4d8bd; color:#346;}
    #menu .three dd a {background:#e2dfa8; color:#654;}
    #menu .four dd a {background:#b2ab9b; color:#ff8;}

    #menu .one dd a:hover {background: #b2ab9b; color:#345;}
    #menu .two dd a:hover {background: #949e7c; color:#543;}
    #menu .three dd a:hover {background: #d4d8bd; color:#123;}
    #menu .four dd a:hover {background: #e2dfa8; color:#534;}

  9. lihat ke bagian bawah dan temukan kode ini:

  10. <div class='descriptionwrapper'>
    <p class='description'><span><data:description/></span></p>
    </div>
    </b:if>
    </b:includable>
    </b:widget>
    </b:section>

  11. Delete / hapus kode di atas lalu ganti dengan kode di bawah ini :
  12. Klik tombol Simpan Perubahan
  13. Selesai. Silahkan lihat hasilnya.

Langkah-langkah di atas hanyalah untuk template minima , jadi untuk template anda terkadang kode nya sama dan banyak juga
yang berbeda, silahkan di pelajari saja.

Sedikit tambahan :

Pada kode menu drop down yang saya berikan, ada kode seperti ini :



<dt><a href="../menu/index.html">DEMOS</a></dt>
<dd><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></dd>

Perhatikan pada kode <dt> dan <dd>

Kode yang di awali dengan <dt>, adalah judul pada menu utama (tulisan yang muncul di muka).

Kode yang di awali dengan <dd>, adalah judul untuk sub menu (tulisan pada drop menu).

Anda harus mengganti link yang ada dengan link milik anda sendiri, sebagai contoh :

<dd><a href=”../menu/zero_dollars.html” title=”The zero dollar ads page”> zero dollars</a></dd>

ganti menjadi :

<dd><a href=”http://template-unik.blogspot.com/2007/11/unique-template-r-21.html” title=”free template R 1.2″>UniQue Template R 1.2</a></dd>

Selamat mencoba dan mempelajari.

Iklan

21 Maret 2008 - Posted by | blog tutorial, blogspot tutorial, drop down menu

20 Komentar »

  1. sori, kang, aku nggak makek drop down dulu. tapi kapan-kapan makek.

    cukup dengan button saja sudah puas… hehehe…

    Komentar oleh Dzofar | 21 Maret 2008 | Balas

  2. Good hack.I tried it and it works but I have a major problem. After doing per your instructions,I cannot change the dropdown menu specifics anymore. When I went back to page elements, the new one at the header that I just added only shows the links that I set up earlier and I cannot edit it anymore.You can see what I mean here: http://www.ipernity.com/doc/maxwellian/1631584
    How can I make it editable so that I can change the settings such as links and/or add more menus etc. Thanks very much.

    Komentar oleh Herbert Wong | 21 Maret 2008 | Balas

  3. hi herbet wong, thx for stopping to my blog. i think, you doing my second instruction. So, you cannot edit your links or menus at the page element, you must edit your links or menus at the Edit HTML.

    Komentar oleh Rohman | 22 Maret 2008 | Balas

  4. HI Rohman: you are absolutely correct- I confused myself between the 2 methods.I had it figure out now.However I have another problem relating to positioning.
    1)I tried method 1 and did a lttle modifications so that I can placed the navmenu right under the header.Seems like I am sucesful but my menu is centralise across the top (plse see http://testing-new-layouts.blogspot.com).Can you advise how I can change the html or page elements to centralise it?
    2)I also tried method 2.This time the menu is centralise but it intrudes into the header instead of underneath it (as the one above). Please see http://testconcepts.blogspot.com
    What/how do I need to amend to make the menu appearing under instead of merging into the header?
    Thanks very much in advance for you valuable advise.

    Komentar oleh Herbert Wong | 22 Maret 2008 | Balas

  5. Hi Rohman: further to my comments and assistance request, wonder if you can help in the following formatting as well:
    1) is it possible to fix the height of each menu box?What happen is that I notce if the words in main menu is too long and so, overflow into a second row, the menu box will increase in height to accommodate it-which is fine.However there may be menu boxes with very short sentence (such as “Home”) and so end up with a shorter (height) menu box.Hence the whoe menu looks odd with menu boxes of different height.
    2)is there a simple code that can be inserted to centralise the text within each menu box itself?
    Thanks a million for your kind attention.

    Komentar oleh Herbert Wong | 22 Maret 2008 | Balas

  6. Hi herbert, sorry i’m not answer your question today, because i’m very busy with my job. if your menu want to at central of your page, you must change much code at the css code, but i advice to do a simple technic. it’s the step :

    find this code :

    #menu {list-style-type:none; margin:10px; padding:0;}

    change this code :

    margin:10px;

    with

    margin-left:10%;

    it’s can moving the menu to the right… you can change the value 10% with other number, such as 5% or etc.

    why the menu became overflow into a second row? because the menu just have a fix widh (150px), so if the sentence too long, of course the menu will overflow. for this problem, maybe you can do this. find this code :

    #menu dt {margin:0; padding: 5px 5px 5px 20px; font-size: 1.1em; color: #fff; border-bottom:1px solid #fff; border-top:1px solid #fff;}

    find it :

    padding: 5px 5px 5px 20px;

    change with this :

    padding: 5px 5px 5px 5px;

    or find this (still within the above code):

    font-size: 1.1em;

    change with this :

    font-size: .9em;

    if you do that, will more large place for sentence. and the size of font will more small.

    please, do that. if still have a question, you can come back again to here.

    sory if my english is very bad.

    Komentar oleh Rohman | 23 Maret 2008 | Balas

  7. sorry herbert, beside the above methode, you can do another methode, that is changed the width of the menus. this the steps. find this code :

    #menu li {float:left; padding:0; margin:0 1px 0 0; position:relative; width:150px; height:3em; z-index:100;}

    find this :

    width:150px;

    change with other value, for example :

    width:175px;

    and then, find this code :

    #menu dl {width: 150px; margin: 0; padding: 0; background: #c9ba65;}

    find this :

    width: 150px;

    change with same width with above value, that is :

    width: 175px;

    after that, find this code :

    #menu dd a, #menu dd a:visited {color:#fff; text-decoration:none; display:block; padding:4px 5px 4px 20px; width:125px;}

    find it :

    width: 175px;

    change with this value :

    width: 150px;

    done. dont forget to save your template.

    Komentar oleh Rohman | 23 Maret 2008 | Balas

  8. Hi Rohman,
    Thanks very much for all yor advice & help. I am nearly there. I am still not satisfied with one aspect- alignment of text. If you look at my experiment using the 2nd method (before putting it live to my blog) http://testconcepts.blogspot.com you will notice that all the text within the menu boxes are not centralise. I cannot manipulate the width of the box to do so cos all the text lengths are differnt. Is there a code to insert to centralise the text withn the menu boxes??
    Terima kasih atas panduan anda. Bahasa Indonesia/Malaysia aku tidak sehebat Bahasa Inggeris kamu.

    Komentar oleh Herbert Wong | 23 Maret 2008 | Balas

  9. Acyually I prefer the 1st method but for some unknown reasons, the menu staying to the left push all my contents- both the main body as well as the sidebar to the right.If I can fix this it will be great. Plse see this to see what I mean:http://testing-new-layouts.blogspot.com/

    Komentar oleh Herbert Wong | 23 Maret 2008 | Balas

  10. wah bisa bahasa indonesia juga tho.. setelah saya lihat… why you add to much css.. that is double parametera at the css.. so if you change one of them.. the menu cannot work be fine….. if you feel very confused.. please invite me as a writer and then give me grand acces. maybe i can help you… invite me at amen24{at}gmail.com

    Komentar oleh Rohman | 23 Maret 2008 | Balas

  11. saya baru mulai untuk bermain blog, tapi kenapa cara untuk membuat menu Drop Down ini tidak dapat digunakan di blog saya ya…

    Komentar oleh TOBING | 24 Maret 2008 | Balas

  12. Thanks

    http://www.yagmurunsesi.org/

    Komentar oleh http://www.yagmurunsesi.org/ | 30 Maret 2008 | Balas

  13. blogger yg satu ini dari dulu ga ada pelit nya sama ilmu… hehehe…

    Komentar oleh june | 31 Maret 2008 | Balas

  14. waduuh..oom ini master juga

    Komentar oleh badot inside | 1 April 2008 | Balas

  15. mas rohman, saya membuat submenu begini kok ga berhasil?. masalah nya setelah mengcopi paste kode metode pertama langkah ke 7 lalu lansung ke header tambah elemen halaman lalu yang muncur kok panel kontrol?. saya masih bingung nih, tolong mas rohman. thx

    Komentar oleh KeitaroBlog | 17 Mei 2008 | Balas

  16. masrohman, css submenu nya bisa lebih dari 4 ga? kalo bisa caranya gmn?

    Komentar oleh Ow-Ow | 21 Mei 2008 | Balas

  17. Mas Rohman,

    Saya sudah coba, karena kebutuhannya ada lima saya coba tambahin satu menu lagi tapi jadinya kok beda dengan yang lainnya baik bentuk kotaknya maupun garisnya tidak sejalur, apanya yang kurang mas?
    Lalu bagaimana cara mengaitkan judul ataupun sub judul dengan isi postingan.
    Thanks banget mas, mohon dijawab ya or untuk lebih jelas maen ke blogku mas.

    Komentar oleh wien | 29 Mei 2008 | Balas

  18. kok hasil dari source code nya gak sesuai dengan yang ada di contohnya… tampilannya beda kang… gimana tu kang

    Komentar oleh wisnu | 15 Juni 2008 | Balas

  19. Kalo Membuat Menu drop down dgn css versi template classic caranya bagaimana Kang ?

    Komentar oleh Chandra | 19 Juni 2008 | Balas

  20. Kalo membuat menu drop down pada templete magazine gmn kang? aku coba cara diatas tapi belum berhasil, kenapa ya?

    Komentar oleh Femri Noviawan | 6 September 2008 | Balas


Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: