Rabu, 12 Agustus 2009

141. 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. Silahkan lihat ke bagian bawah lagi, lalu temukan kode seperti ini :








  8. <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>







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







  10. <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>






  11. 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. page element





  3. Klik pada Tambahkan sebuah Elemen halaman yang berada di atas elemen header. Perhatikan gambar berikut ini:






  4. add a page element





  5. setelah window pop up muncul, klik tombol Tambahkan ke blog untuk HTML/JavaScript.:





  6. Copy kemudian paste kode di bawah ini pada elemen yang muncul tadi :













  7. Klik tombol Simpan Template




  8. 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. lihat ke bagian bawah dan temukan kode ini:







  9. <div class='descriptionwrapper'>

    <p class='description'><span><data:description/></span></p>

    </div>

    </b:if>

    </b:includable>


    </b:widget>

    </b:section>








  10. Delete / hapus kode di atas lalu ganti dengan kode di bawah ini :

















  11. Klik tombol Simpan Perubahan




  12. 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.




Dari guru saya: Kang Rohman

0 komentar:

Posting Komentar

Kembali ke atas

Kembali ke atas