Cara Mengedit Menu Drop Down Bawaan Template

Assalamualaikum sobat,,,

Cara Mengedit Menu Drop Down Bawaan Template

Halo sobat semua, bertemu lagi di ruang hangat Remaja Sampit. Kali ini saya akan berbagi tips Cara mengedit Drop Down Menu Horizontal bawaan sebuah template. Mungkin cara ini cukup mudah bagi para sobat yang udah mahir mengoprek-oprek Template blog, tapi cukup sulit dan membingungkan bagi sobat yang baru saja terjun ke dunia Blogger. Memang banyak dari sobat blogger newbie yang kebingungan mengedit Daftar di Menu Drop Down. Jika sobat mendownload template yang memiliki Menu Drop Down, dan memasangnya di blog sobat, maka daftar menu di template tersebut adalah Default dari template itu. Nah ,, disini saya akan memberi informasi Cara merubah daftar tersebut sesuai dengan keinginan kita.

Sobat bisa menambah Menu Baru tanpa drop down, bisa juga menambah menu baru dengan fungsi Drop Down. Selain menambah, sobat juga bisa mengurangi menu, jika terasa berlebihan. Cara ini saya rangkum cukup praktis, agar sobat bisa mengikutinya dengan mudah.

OK , sebagai sempel, disini saya akan mengdit template yang saya download di ZOOMTEMPLATE, bagi sobat yang kebingungan mencari template yang keren-keren, langsung aja mampir di ZOOMTEMPLATE. Disini saya menggunakan Browser Google Chrome, agar lebih mudah. Penampakan pertama sebelum Menu saya edit adalah seperti gambar dibawah ini :

Sekarang kita akan mengedit menu tersebut sesuai dengan keinginan kita. Bersiap-siap untuk mulai mengutak atik code-code di HTML.Sebelumnya Upload dulu template baru sobat. Bagi sobat yang belum tau cara mengupload Template baru di Blog, bisa sobat baca tutorialnya disini !

1. Langsung aja sobat Login ke Blogger

2. Pilih Template

3. Pilih Edit HTML

4. Beri centang pada ‘’ Expand Template Widget’’ pada pojok kiri atas

5. Tekan Ctrl+F untuk memudahkan pencarian kode.

6. Perhatikan pada salah satu daftar menu di dalam menu drop down tersebut, Misalkan disitu ada daftar ‘’Business’’. Ketikan kata ‘’Business’’ pada kotak pencarian dan tekan enter, maka akan muncul di daftar HTML code dengan tulisan ‘’Business’’. Sobat bisa menggunakan salah satu dari daftar menu tersebut, terserah mau pake yang mana. Setelah kita mendapatkan kode tersebut, maka kita sudah menemukan posisi seluruh kode yang mengatur menu drop down itu. Nah disinilah sobat akan mulai mengeditnya sesuai dengan keinginan sobat. Lihat Gambar di bawah ini untuk memperjelas.

7. Merubah Judul Menu. Disini saya contohkan, akan merubah nama ‘’Business’’ menjadi ‘’Remaja Sampit’’. Maka code Business saya hapus dan saya Ganti dengan kode Remaja Sampit.

8. Menghapus Menu. Untuk menghapus menu, sobat tinggal memblok seluruh kode yang di mulai dari kode <li> dan di akhiri dengan kode </ul></li>. Untuk leboh jelasnya sobat bisa melihat gambar di bawah ini.

 9. Menambah Menu. Kaitannya dengan penambahan menu, sobat bisa menambah Menu tanpa drop down, Menambah menu dengan 1 drop down, dan Menambah menu dengan 2 drop down. Perhatikan dengan teliti pada bagian penambahan menu ini.

Penambahan menu tanpa dorp down.

Tambahkan kode di bawah ini. Dan letakan di antara kode sebelum dan sesudahnya.

<li><a href='#'>Menu Baru</a>

</li>

Untuk lebih jelas, lihat gambar !!!

Penambahan menu dengan 1 drop down.

Tambahkan kode di bawah ini. Dan letakan di antara kode sebelum dan sesudahnya.

<li><a href='#'>Menu Baru</a>

<ul class='children'>

<li><a href='#'>Drop Down 1a</a></li>

<li><a href='#'>Drop Down 1b</a></li>

</ul>

</li>

Kode ‘’Menu Baru, Drop Down 1a, Drop Down 1b’’ bisa sobat ganti sesuai dengan judul menu yang diinginkan. Untuk lebih jelas, lihat gambar !!!

Penambahan menu dengan 2 drop down.

Tambahkan kode di bawah ini. Dan letakan di antara kode sebelum dan sesudahnya.

<li><a href='#'>Menu Baru</a>

<ul class='children'>

<li><a href='#'>Drop Down 1a</a>

<ul class='children'>

<li><a href='#'>Drop Down 2a</a></li>

<li><a href='#'>Drop Down 2b</a></li>

<li><a href='#'>Drop Down 2c</a></li>

</ul>

</li>

<li><a href='#'>Drop Down 1b</a></li>

</ul>

</li>

Untuk lebih jelas, lihat gambar !!!

10. memberi alamat link di setiap judul menu. Setiap kode yang bersimbol “#’’ merupakan tempat sobat menyimpan link yang bisa mengarahkan judul blog menuju link tersebut. Untuk pemasangannya, sobat hapus tanda # dan ganti dengan URL link yang sobat inginkan. Tanda petiknya jangan di hapus ya!!! Conoth ‘’#’’ menjadi ‘’ http://remajasampit.blogspot.com/’’.

Kalo sobat merasa sudah selesai mengedit, sobat bisa menyimpannya dengan menekan tombol Simpan Template pada bagian bawah. Dan lihat hasilnya...... ok soba,, mungkin hanya itu sedikit informasi sederhana yang bisa saya berikan, apabila ada pertanyaa, silahkan isi di kotak komentar, dan InsyaAllah jika saya bisa membantu, akan saya beri solusinya. Semoga informasi tadi dapat memberikan manfaat bagi sobat semua. Terima kasih atas kesediaan sobat yang telah membaca artikel yang berjudul ‘’Cara Mengedit Menu Drop Down Bawaan Template‘’ ini.

Tag : Cara Mengedit Menu Drop Down Bawaan Template