Membuat Menu Drop down dengan CSS 03

10:38 PM

Tab menu dropdown ini 100% menggunakan Cascading Style Sheet (CSS), tanpa Javascript ataupun script yang lainnya. Sehingga Menu dropdown ini tidak akan membuat blog Anda menjadi lambat ketika di loading, dan cocok dalam banyak browser.

Langkah Pertama:

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 : ]]>

6. Copy kode di bawah ini, lalu paste di atas kode : ]]>

#menu {list-style-type:none; margin:5px; padding:0;}
#menu li {float:left; padding:0; margin:0 1px 0 0; position:relative; width:120px; 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: 120px; margin: 0; padding: 0; background: #c9ba65;}
#menu dt {margin:0; padding: 6px 6px 6px 6px; font-size: 1.1em; text-align:left; 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;}
#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 -1px; width:120px;}

#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 Kedua:

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">Home</a></dt>
<dd><a href="../menu/zero_dollars.html" title="The zero dollar ads page">Sub Menu 1</a></dd>
<dd><a href="../menu/embed.html" title="Wrapping text around images">Sub Menu 2</a></dd>
<dd><a href="../menu/form.html" title="Styling forms">Sub Menu 3</a></dd>
<dd><a href="../menu/nodots.html" title="Removing active/focus borders">Sub Menu 4</a></dd>
<dd><a href="../menu/shadow_boxing.html" title="Multi-position drop shadow">Sub Menu 5</a></dd>
<dd><a href="../menu/old_master
.html" title="Image Map for detailed information">Sub Menu 6</a></dd>
<dd><a href="../menu/bodies.html" title="fun with background images">Sub Menu 7</a></dd>
<dd><a href="../menu/fade_scroll.html" title="fade-out scrolling">Sub Menu 8</a></dd>
<dd class="last"><a href="../menu/em_images.html" title="em size images compared">Sub Menu 9</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">Computer</a></dt>
<dd><a href="spies.html" title="a coded list of spies">Sub Menu 1</a></dd>
<dd><a href="vertical.html" title="a horizontal vertical menu">Sub Menu 2</a></dd>
<dd><a href="expand.html" title="an enlarging unordered list">Sub Menu 3</a></dd>
<dd><a href="enlarge.html" title="an unordered list with link images">Sub Menu 4</a></dd>
<dd><a href="cross.html" title="non-rectangular links">Sub Menu 5</a></dd>
<dd><a href="jigsaw.html" title="jigsaw links">Sub Menu 6</a></dd>
<dd class="last"><a href="circles.html" title="circular links">Sub Menu 7</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">Internet</a></dt>
<dd><a href="../layouts/bodyfix.html" title="Cross browser fixed layout">Sub Menu 1</a></dd>
<dd><a href="../layouts/body2.html" title="Cross browser fixed layout">Sub Menu 2</a></dd>
<dd><a href="../layouts/body4.html" title="Cross browser fixed layout">Sub Menu 3</a></dd>
<dd><a href="../layouts/body5.html" title="Cross browser fixed layout">Sub Menu 4</a></dd>
<dd class="last"><a href="../layouts/minimum.html" title="A simple minimum width layout">Sub Menu 5</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">Link</a></dt>
<dd><a href="../mozilla/dropdown.html" title="A drop down menu">Sub Menu 1</a></dd>
<dd><a href="../mozilla/cascade.html" title="A cascading menu">Sub Menu 2</a></dd>
<dd><a href="../mozilla/content.html" title="Using content:">Sub Menu 3</a></dd>
<dd><a href="../mozilla/moxbox.html" title=":hover applied to a div">Sub Menu 4</a></dd>
<dd><a href="../mozilla/rainbow.html" title="I can build a rainbow">Sub Menu 5</a></dd>
<dd><a href="../mozilla/snooker.html" title="Snooker cue">Sub Menu 6</a></dd>
<dd class="last"><a href="../mozilla/target.html" title="Target Practise">Sub Menu 7</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.