Menu Navigasiadalah sebuah aksesoris/widget yang mutlak harus ada dalam sebuah website/blog entah apapun bentuknya, karena menu navigasi selain mempercantik tampilan website/blog juga merupakan alat bagi pemilik maupun pengunjung untuk menjelejahi isi website/blog dengan mudah.
Beberapa waktu lalu Saya ingin membuat menu navigasi horizontal yang berada di bawah header. Berbagai sumber dan tutorial tentang cara membuat menu horizontal telah saya pelajari, tetapi ternyata ketika diterapkan hasilnya tidak ada yang bagus bahkan bikin tampilan template blog saya menjadi acak-acakan. Namun demikian saya tidak pernah menyerah dan dengan modaldari bermacam-macam tutorial yang telah saya pelajari, akhirnya saya bisa membuat menu navigasi seperti yang terlihat pada blog ini.
Membuat menu navigasi seperti pada blog ini tidak sesulit apa yang saya bayangkan sebelumnya, ternyata cukup memanfaatkan fasilitas yang ada pada dan dengan memanfaatkan fasilitas dari website tersebut, selain gratis juga telah tersedia code HTML dan CSS yang sudah siap pakai, namun jika tampilannya ingin sesuai dengan selera kita tinggal mengeditnya saja dan disitu pun telah disediakan fasilitas untuk
mengedit tampilan menu yang akan kita gunakan.
Baiklah sekarang saya akan langsung memberikan Cara Mudah Membuat Menu Navigasi Pada Blogspot sesuai dengan pengalaman saya, berikut ini caranya:
Beberapa waktu lalu Saya ingin membuat menu navigasi horizontal yang berada di bawah header. Berbagai sumber dan tutorial tentang cara membuat menu horizontal telah saya pelajari, tetapi ternyata ketika diterapkan hasilnya tidak ada yang bagus bahkan bikin tampilan template blog saya menjadi acak-acakan. Namun demikian saya tidak pernah menyerah dan dengan modaldari bermacam-macam tutorial yang telah saya pelajari, akhirnya saya bisa membuat menu navigasi seperti yang terlihat pada blog ini.
Membuat menu navigasi seperti pada blog ini tidak sesulit apa yang saya bayangkan sebelumnya, ternyata cukup memanfaatkan fasilitas yang ada pada dan dengan memanfaatkan fasilitas dari website tersebut, selain gratis juga telah tersedia code HTML dan CSS yang sudah siap pakai, namun jika tampilannya ingin sesuai dengan selera kita tinggal mengeditnya saja dan disitu pun telah disediakan fasilitas untuk
mengedit tampilan menu yang akan kita gunakan.
Baiklah sekarang saya akan langsung memberikan Cara Mudah Membuat Menu Navigasi Pada Blogspot sesuai dengan pengalaman saya, berikut ini caranya:
- Kunjungi dulu http://www.mycssmenu.com/ dan Anda akan dihadapkan pada halaman seperti di bawah ini:
- Pada halaman itu seperti pada gambar di atas, Anda bisa memilih bentuk menu navigasi horizontal atau menu navigasi vertical dan jika ingin melihat dahulu tampilannya Anda bisa klik tulisan Demo, namun jika sudah menemukan menu yang sesuai selera, Anda bisa langsung klik Customize yang berada dibawah gambar seperti yang saya tunjukan dengan tanda anak panah, selanjutnya akan terbuka windows baru atau halaman baru seperti pada gambar di bawah ini :
- Silahkan copy paste code HTML dan CSS-nya pada notepad atau MS Word Anda dengan cara klik tulisan HTML dan CSS seperti yang saya tunjukkan dengan tanda lingkaran pada gambar di atas.
- Selanjutnya cara pasang code menu navigasi tersebut pada blog, seperti biasa Anda harus masuk dulu ke dashbord blogspot Anda, lalu klik layout dan klik Edit HTML jangan lupa centang kotak expand template dan sebaiknya terlebih dahulu download template anda.
- Sekarang cara memasukan kode dari http://www.mycssmenu.com/ ke dalam tempat Anda, caranya cari kode </b:skin> lalu masukan kode CSS Anda di atas kode </b:skin>, tetapi sebelumnya harus dihapus dulu tulisan <style type="text/css"> yang ada diawal kode CSS dan tulisan </style> yang ada diakhir kode CSS Anda.
- Sebelum memasukan kode HTML Anda ke dalam template, sebaiknya ganti dulu alamat/link serta judul pada kode HTML tersebut dengan link dan judul link Anda, jika sudah sekarang masukan kode HTML Anda di bawah code berikut ini:<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='test (Header)' type='Header'/>
... dan seterusnya ...
</b:section>
</div> - Simpan/Save Template dan lihat hasilnya.
0 komentar:
Posting Komentar