Cara Membuat Menu Horisontal Pada Blog

Musttrie tips - Cara membuat menu Horisontal pada blog. Pengunjung akan lebih mudah memilih artikel anda dengan membuat menu Horisontal pada blog, serta terlihat lebih rapi. Cara membuat menu horisontal sederhana, bisa kita mulai dengan membuat elemen baru pada Main Wrapper blog atau header (di atas judul postingan anda). Jika anda membuka di menu Tata letak disana ada elemen header (di atas halaman posting) untuk membuat tambah gadget yang kita perlukan. Nah jika, elemen tersebut tidak ada/sudah digunakan, maka anda perlu membuat elemen baru melalui Edit HTML, jangan lupa backup data terlebih dahulu. Untuk lebih jelasnya mari kita pelajari tips, cara membuat menu Horisontal pada blog berikut ini.



Untuk membuat menu Horisontal pada blog, langkah pertama adalah membuat elemen baru pada Main Wrapper blog atau header ( elemen diatas halaman posting blog )
Caranya:

- Buka Template > Edit HTML > Lanjutkan
- Beri centang pada expand widget template
- Cari kode seperti atau mirip kode dibawah ini ( gunakan Ctrl + F)

<b:section class='crosscol' id='crosscol' showaddelement='no'>

- Hapus dan ganti dengan  kode berikut.

<b:section class='header' id='header' preferred='yes'>

Cek dengan klik pratinjau, jika tidak terjadi eror, lanjutkan dengan klik simpan template.
Tutup, dan cek lagi di menu Tata letak anda apakah Elemen baru-nya sudah ada.

- Selanjutnya, Klik Tata Letak > Tambah Gadget > HTML/Javascript


Kode huruf besar di bawah ini silakan di edit terlebih dahulu, kemudian setelah selesai masukkan pada kotak kode HTML/Javascript.


<style type="text/css"> #navright { width: 200px; font-size: 11px; float: right; margin: 0px; padding: 6px 5px 0px 0px; } #navright a img { border: none; margin: 0px; padding: 0px; } </style> <div id="tabshori"> <ul> <li><a href="URL BLOG ANDA"><span>Home</span></a></li> <li><a href="URL LABEL/KATEGORI 1"><span>NAMA LABEL 1</span></a></li> <li><a href="URL LABEL/KATEGORI 2"><span>NAMA LABEL 2</span></a></li> <li><a href="URL LABEL/KATEGORI  3"><span>NAMA LABEL 3</span></a></li> <li><a href="URL LABEL/KATEGORI 4"><span>NAMA LABEL 4</span></a></li> <li><a href="URL LABEL/KATEGORI 5"><span>NAMA LABEL 5</span></a></li> <li><a href="URL LABEL/KATEGORI 6"><span>NAMA LABEL 6</span></a></li> <li><a href="URL LABEL/KATEGORI 7"><span>NAMA LABEL 7</span></a></li> <li><a href="URL LABEL/KATEGORI 8"><span>NAMA LABEL 8</span></a></li> </ul> </div> <!-- akhir bg_nav -->



Sebagai contoh bisa anda lihat seperti ini:

<li><a href="http://musttrie-art.blogspot.com"><span>Home</span></a></li>
<li><a href="http://musttrie-art.blogspot.com/search/label/Tips"><span>Game</span></a></li>
<li><a href="http://musttrie-art.blogspot.com/search/label/Kesehatan"><span>Lagu</span></a></li>
<li><a href="http://musttrie-art.blogspot.com/search/label/Obat"><span>Tutorial</span></a></li>
<li><a href="http://musttrie-art.blogspot.com/search/label/Puisi"><span>Unik</span></a></li>
dan seterusnya.

Selamat mencoba, salam sukses dan maju terus blogger Indonesia.