Membuat Menu Drop down dengan CSS

# 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>
/* ================================================================ 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;}
7. Silahkan lihat ke bagian bawah lagi, lalu temukan kode seperti ini :
<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>
8. Ubahlah kode yang saya cetak hijau, sehingga kodenya menjadi seperti ini :
<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>
9. 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 :
<ul id="menu"><!-- drop down menu start --> <li> <!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]--> <dl class="one"> <!-- Alter the links with your own --> <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> <dd><a href="../menu/embed.html" title="Wrapping text around images">wrapping text</a></dd> <dd><a href="../menu/form.html" title="Styling forms">styled form</a></dd> <dd><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></dd> <dd><a href="../menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></dd> <dd><a href="../menu/old_master.html" title="Image Map for detailed information">image map</a></dd> <dd><a href="../menu/bodies.html" title="fun with background images">fun with backgrounds</a></dd> <dd><a href="../menu/fade_scroll.html" title="fade-out scrolling">fade scrolling</a></dd> <dd class="last"><a href="../menu/em_images.html" title="em size images compared">em sized images</a></dd> </dl> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li> <!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]--> <dl class="two"> <dt><a href="index.html">MENUS</a></dt> <dd><a href="spies.html" title="a coded list of spies">spies menu</a></dd> <dd><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></dd> <dd><a href="expand.html" title="an enlarging unordered list">enlarging list</a></dd> <dd><a href="enlarge.html" title="an unordered list with link images">link images</a></dd> <dd><a href="cross.html" title="non-rectangular links">non-rectangular links</a></dd> <dd><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></dd> <dd class="last"><a href="circles.html" title="circular links">circular links</a></dd> </dl> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li> <!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]--> <dl class="three"> <dt><a href="../layouts/index.html">LAYOUTS</a></dt> <dd><a href="../layouts/bodyfix.html" title="Cross browser fixed layout">Fixed 1</a></dd> <dd><a href="../layouts/body2.html" title="Cross browser fixed layout">Fixed 2</a></dd> <dd><a href="../layouts/body4.html" title="Cross browser fixed layout">Fixed 3</a></dd> <dd><a href="../layouts/body5.html" title="Cross browser fixed layout">Fixed 4</a></dd> <dd class="last"><a href="../layouts/minimum.html" title="A simple minimum width layout">minimum width for Internet Explorer</a></dd> </dl> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li> <!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]--> <dl class="four"> <dt><a href="../mozilla/index.html">MOZILLA</a></dt> <dd><a href="../mozilla/dropdown.html" title="A drop down menu">drop down menu</a></dd> <dd><a href="../mozilla/cascade.html" title="A cascading menu">cascading menu</a></dd> <dd><a href="../mozilla/content.html" title="Using content:">content:</a></dd> <dd><a href="../mozilla/moxbox.html" title=":hover applied to a div">mozzie box</a></dd> <dd><a href="../mozilla/rainbow.html" title="I can build a rainbow">rainbow box</a></dd> <dd><a href="../mozilla/snooker.html" title="Snooker cue">snooker cue made using border art</a></dd> <dd class="last"><a href="../mozilla/target.html" title="Target Practise">target practise</a></dd> </dl> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> </ul><!-- end of drop down menu -->
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>
/* ================================================================ 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. lihat ke bagian bawah dan temukan kode ini:

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

9. Delete / hapus kode di atas lalu ganti dengan kode di bawah ini :
<div class='descriptionwrapper'> <p class='description'><span><data:description/></span></p> </div> </b:if> </b:includable> </b:widget> </b:section> <ul id="menu"><!-- drop menu start --> <li> <!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]--> <dl class="one"> <!-- Alter the links with your own --> <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> <dd><a href="../menu/embed.html" title="Wrapping text around images">wrapping text</a></dd> <dd><a href="../menu/form.html" title="Styling forms">styled form</a></dd> <dd><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></dd> <dd><a href="../menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></dd> <dd><a href="../menu/old_master.html" title="Image Map for detailed information">image map</a></dd> <dd><a href="../menu/bodies.html" title="fun with background images">fun with backgrounds</a></dd> <dd><a href="../menu/fade_scroll.html" title="fade-out scrolling">fade scrolling</a></dd> <dd class="last"><a href="../menu/em_images.html" title="em size images compared">em sized images</a></dd> </dl> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li> <!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]--> <dl class="two"> <dt><a href="index.html">MENUS</a></dt> <dd><a href="spies.html" title="a coded list of spies">spies menu</a></dd> <dd><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></dd> <dd><a href="expand.html" title="an enlarging unordered list">enlarging list</a></dd> <dd><a href="enlarge.html" title="an unordered list with link images">link images</a></dd> <dd><a href="cross.html" title="non-rectangular links">non-rectangular links</a></dd> <dd><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></dd> <dd class="last"><a href="circles.html" title="circular links">circular links</a></dd> </dl> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li> <!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]--> <dl class="three"> <dt><a href="../layouts/index.html">LAYOUTS</a></dt> <dd><a href="../layouts/bodyfix.html" title="Cross browser fixed layout">Fixed 1</a></dd> <dd><a href="../layouts/body2.html" title="Cross browser fixed layout">Fixed 2</a></dd> <dd><a href="../layouts/body4.html" title="Cross browser fixed layout">Fixed 3</a></dd> <dd><a href="../layouts/body5.html" title="Cross browser fixed layout">Fixed 4</a></dd> <dd class="last"><a href="../layouts/minimum.html" title="A simple minimum width layout">minimum width for Internet Explorer</a></dd> </dl> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li> <!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]--> <dl class="four"> <dt><a href="../mozilla/index.html">MOZILLA</a></dt> <dd><a href="../mozilla/dropdown.html" title="A drop down menu">drop down menu</a></dd> <dd><a href="../mozilla/cascade.html" title="A cascading menu">cascading menu</a></dd> <dd><a href="../mozilla/content.html" title="Using content:">content:</a></dd> <dd><a href="../mozilla/moxbox.html" title=":hover applied to a div">mozzie box</a></dd> <dd><a href="../mozilla/rainbow.html" title="I can build a rainbow">rainbow box</a></dd> <dd><a href="../mozilla/snooker.html" title="Snooker cue">snooker cue made using border art</a></dd> <dd class="last"><a href="../mozilla/target.html" title="Target Practise">target practise</a></dd> </dl> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> </ul><!-- end of drop down menu -->
10. Klik tombol Simpan Perubahan
11. 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>
http://punya-doni.blogspot.com/2011/07/membuat-menu-drop-down-dengan-css.html
Selamat mencoba dan mempelajari. 

sumber http://kolom-tutorial.blogspot.com/2008/03/make-drop-down-menu-with-css.html 

Read More

Loading Blog Cepat Dengan CSS External

Kali ini saya akan sharing tentang cara agar Loading Blog Cepat Dengan CSS External , Maksudnya adalah bagaimana kita menyimpan CSS (Cascading Style Sheet) ke tempat hosting agar blog sedikit ringan karena file CSS terpisah dengan file XML-nya. Sebenarnya ini rahasia para master hingga sedikit sekali yang ngungkap masalah ini. Karena saya bukan master jadi saya bongkar aja rahasianya . Ini juga kadung telah janji pada postingan dulu sehingga sobat Munir Ardi menunggu postingan ini.. hehe

Kecepatan loading blog selain dipengaruhi oleh koneksi juga dipengaruhi oleh berat/ringannya blog tersebut, dan untuk mengurangi berat blog bisa dengan membuang pernak-pernik yang kurang penting, compress css dan bisa juga dengan membuat CSS External dengan cara memotong CSS dan menyimpannya di tempat hosting , cara terakhir inilah yang sekarang akan kita bicarakan.

Sebelum kelangkah berikutnya ada baiknya kita refresh dulu mengenai :

1. Apa dan bagaimana mengkompres CSS silahkan lihat disini.
2. Apakah blog anda berat ?? lihat disini
3. Sebelum membuat CSS External ketahui dulu berapa berat blog anda. catat agar nanti tahu berapa banyak pengurangannya.. silahkan timbang dulu di Posyandu
4. Karena CSS ini akan disimpan di tempat hosting maka sebaiknya anda yakin dulu bahwa tampilan blognya seperti itu , misalnya background, jenis huruf,  lebar kolom, struktur sidebar dsb. artinya tidak akan dirubah lagi. walaupun sebenarnya ini tidak mutlak karena bisa di host lagi.
5. Siapkan makanan ringan atau kopi dulu biar kerjanya lebih tenang
6. Sesudah itu yo.. kita mulai langkah2nya :

Agar Loading Blog Lebih Cepat Dengan CSS External, caranya :

1. Masuk ke Account Blogger anda atau Dashboard.
2. Klik Layout dan pilih Edit HTML.
3. Backup dulu templatenya dengan Klik Download Full Template
4. Gak usah mencentang Expand Widget Template
5. Kode CSS itu letaknya antara <b:skin><![CDATA[/*  sampai dengan sebelum kode ]]></b:skin>
6. Cari kode seperti ini ( contoh template blog ini,  mudah2an sama):

   <b:skin><![CDATA[/*
   -----------------------------------------------
   Blogger Template Style
   Name:     Revolution Crunch Wordpress Theme
   Designer: Brian Gardner
   URL:      www.briangardner.com
   Converted into blogger by: Dinesh Dhakal
   URL:      www.bloganol.com
   ----------------------------------------------- */
   #navbar-iframe{
      display:none !important}
   body{
   background:#f5fffa;
   width:980px;
   color:#333;
   font-size:12px;
   font-family:Arial,Tahoma,Verdana;
   margin:0 auto 0;
   padding:0}
   Potong atau Cut semua kode CSS nya mulai dari sini sampai dengan diatas atau sebelum kode  :
   ]]></b:skin>

7. Simpan di notepad  kemudian di Save dengan ekstensi .css , caranya  ya klik File pilih Save As .. di kolom file name tulis misalnya :   cssblogsaya.css  atau saungweb.css  lalu Save.
8. Setelah disave berarti kita sudah punya file css, lalu Upload ke tempat hosting, misalnya di google site.
9. Cara uploadnya silahkan lihat di Cara Hosting File di Google Site , disini juga sudah saya beri contoh file css yang dihost disana ada pada point 10.
10. Jika sudah dapat filenya misalnya filenya seperti ini
    

    <link href='http://sites.google.com/site/saungwebsite/js/saungweb2.css' rel='StyleSheet' type='text/css'/>

    Copy file tersebut  dan pastekan di antara :  ]]></b:skin>   dan  </head> , lihat contohnya seperti ini :
    

    
    ]]></b:skin>
    <link href='http://sites.google.com/site/saungwebsite/js/saungweb2.css' rel='StyleSheet' type='text/css'/>
    </head>

11. Silahkan preview dulu kalau sudah ok  baru Save Template
12. Jika semuanya ok.. berarti selesai .. tinggal sujud syukur saja . dan silahkan komentar disini ..hehe..

Demikianlah caranya agar Loading Blog Cepat Dengan CSS External yang disimpan ditempat hosting gratisan seperti google site .. semoga bermanfaat 

http://punya-doni.blogspot.com/2011/07/loading-blog-cepat-dengan-css-external.html

sumber http://saungweb.blogspot.com/2010/03/loading-blog-cepat-dengan-css-external.html

Read More