Find us on Google+ Inilah Cara Membuat Menu Dropdown di Blogspot - Dani Sukma | Blog Dani | Belajar SEO

Thursday, September 25, 2014

Inilah Cara Membuat Menu Dropdown di Blogspot


Cara Membuat Menu Bertingkat di Blog


Cara membuat menu dropdown di blogspot - Bagaimana cara memasang menu dropdown di blogspot ? tidak seperti wordpress yang memberikan fasilitas menu bertingkat. Setiap halaman/page baru yang dibuat di blogspot ditampilkan semua secara horisontal/sejajar. Bisa dibayangkan jika kita membutuhkan banyak menu, tampilan layout halaman menjadi kurang baik. Dari hasil googling, tidak sedikit teman2 blogger yang sudah sharing cara membuat menu dropdown baik di atas header maupun di bawah header, tapi kebanyakan dengan membuat sendiri script html dan css-nya yang membutuhkan pengetahuan dasar html, css dan desain yang baik, seperti mengatur jenis font, warna background saat aktif atau hover dll.


Cara Membuat Menu Horisontal Dropdown di Blogspot


Akhirnya saya menemukan referensi artikel yang ditulis ashley di nosegraze.com. Langkah-langkah membuat menu horisontal dropdown di blog yang dipaparkan sangat mudah diikuti seperti berikut :

1. Langkah pertama buatlah menu
:) jangan khawatir, membuat menu disini bukan berarti anda harus meng-coding sendiri script html-nya, tapi cukup dengan memanfaatkan situs cssmenumaker.com, pada situs tersebut banyak tersedia aneka macam menu, pilihlah yang sesuai dengan template blog kita. pada artikel yang ditulis ashley, sebenarnya kita bisa meng-custom menu di cssmenumaker.com seperti merubah judul menu dan menambah tingkat dropdown tapi anda diharuskan register terlebih dahulu. Saya lebih memilih untuk men-download langsung untuk kemudian di custom sendiri secara offline menggunakan text editor. Hasil unduhan terdiri dari 2 file (index.html & style.css) yang di compress dalam format zip


2. Langkah kedua, custom menu html
Buka file index.html edit link menu dan judul menu sesuai dengan kebutuhan menu blog anda


3. Langkah ketiga, sisipkan script css-nya ke dalam template blog
Buka file style.css menggunakan text editor ( notepad++, notepad ), sorot/blok semua script-nya dengan menekan ctrl+a secara bersamaaan lalu copy dengan menekan ctrl+c. Kini beralih ke dashboard blogspot, klik menu template yang berada di sebelah kiri, lalu tekan tombol edit html dibawah tampilan preview template blog, akan tampak barisan kode html blog cari script </b:skin> dengan menekan ctrl+f lalu masukan </b:skin>  pada input text yang tersedia kemudian tekan enter. paste/tempel script css yang sebelumnya kita copy dengan menekan ctrl+v di atas ]]</b:skin>

4. Langkah keempat, sisipkan script html-nya ke dalam template blog
Buka file index.html menggunakan text editor, sorot/blok script html mulai dari <div id='cssmenu'> sampai dengan </div> lalu copy dengan menekan ctrl+c. kembali ke dashboard blogspot pada tampilan edit html template. Sebelum melanjutkan, pastikan lokasi menu dropdown tersebut berada di atas atau di bawah heaader ? karena hal ini menentukan dimana script html menu dropdown tersebut diletakan. Jika anda menginginkan dropdown menu horisontal tersebut berada di atas header, maka tempelkan script html yang sudah kita copy tadi di bawah
<div class='content-outer'>
<!-- Tempelkan menu HTML disini-->

dan jika anda menginginkan menu dropdown tersebut berada tepat dibawah header, maka tempelkan di antara

</header&>
<!-- Tempelkan menu HTML disini-->
<div class='tabs-outer'>

5. Simpan template, dan lihat blog.


Demikian posting cara memasang menu dropdown horisontal di blogspot, catatan : trik berhasil diterapkan pada template standar blogspot, untuk template modifikasi lain mungkin perlu penyesuaian lagi. selamat mencoba. Pada posting ini saya menulliskan kode html, bagi Anda yang belum tahu caranya bisa baca di cara agar kode html bisa terbaca di posting blog

Posting Terkait Cara Membuat Menu Bertingkat di Blogspot :




No comments:

Post a Comment

Blog Widget by LinkWithin