Membuat Menu Navigasi Horizontal dengan CSSPORTAL

Membuat Menu Navigasi Horizontal dengan CSSPORTAL - Percaya atau tidak percaya, kini lebih mudah membuat menu navigasi horizontal dengan CSSPORTAL . Sebenarnya apa sih CSSPORTAL? CSSPORTAL dalah sebuah situs yang memberikan banyak kemudahaan dalam dunia CSS, antara lain ,memudahkan kita membuar menu navigazi horizontal, menu navigasi vertikal, CSS Validator, sampai CSS untuk template, pokoknya super komplit.
Nah, kita sekarang bicara soal "Membuat Menu Navigasi Horizontal dengan CSSPORTAL". Banyak sekali Sobat yang mengeluh karena sulitnya Membuat Menu Navigasi Horizontal secara manual, kadang banyak kode-kode di template blog mereka yang tidak cocok. Oleh karena itu, mari kita tinggalkan "Cara manual" tersebut, kita coba cara cepat,mudah, dan cantik.

Baca : Membuat Menu Navigasi horizontal 2 baris
Membuat Menu Navigasi Horizontal dengan CSSPORTAL. Note : Perhatikan baik-baik, banyak Sobat yang gagal karena sulit menentukan kode mana yang harus diedit.

• Pertama, masuklah ke situs asli CSSPORTAL (http://cssportal.com ) atau langsung menuju halaman pembuatan navigasi horizontalnya di sini
• Kita akan diberikan beberapa pilihan menu navigasi horizontal, pilihlah salah satu

• Setelah memilih, maka Sobat akan diberikan 2 script kode, yaitu kode CSS dan kode HTML.

• Sekarang tutorial cara memasangnya di template blog 


• Masuk ke blogger
• Buka menu Design/Rancangan
• Pilih Edit HTML
• Cari kode ]]></b:skin> (gunakan Ctrl+f), lalu masukkan kode CSS yang telah diberikan, letakkan di atas kode ]]></b:skin> tersebut


• Contohnya :

• Lalu simpan/save.
• Yang kedua,centang pada expand widget template

• Cari kode <div id='header (gunakan Ctrl+f) (Note : Pada bagian ini Sobat sering salah, banyak dari Sobat yang tidak menemukan kode yang dimaksud)
• Solusi : Pusatkan pencarian pada kode header, <div id='header lalu, jika sudah ketemu, lihat ke bawah, sampai ada kode </div> ,lihat gambar berikut dengan saksama

• Letakkan kode HTML yang diberikan di bawah kode </div> tadi
• Simpan Template, dan lihat hasilnya
• Jika mmasih gagal, bisa pakai cara ini, 


• Cari kode 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'/>
</b:section>


• Lalu masukkan KODE HTML yang dari CSSPORTAL di bawah kode di atas
• Save/Simpan


• Contoh punya saya,

Bagi Sobat yang masih gagal pada tutorial di atas, silahkan bertanya pada kotak komentar di bawah, semoga saya bisa membantu ^^