Membuat menu horisontal sederhana pada blog

Untuk lebih memudahkan pengunjung memilih jenis artikel yang tersaji pada blog kita, alangkah lebih baik jika kita mempermudahnya dengan menambahkan kolom menu pada blog kita. Adapun pada kesempatan ini, kita akan saling berbagi tentang bagaimana cara membuat menu horisontal sederhana pada blog kita. Berikut ini adalah panduan cara membuat menu horisontal sederhana pada blog kita;

Langkah pertama yang perlu kita lakukan adalah membuat elemen baru pada Main - Wrapper blog ( elemen diatas halaman posting blog )

1. Login ke BLOG - LAYOUT/RANCANGAN - EDIT HTML ( biasakan backup data terlebih dahulu )

2. Centangi expand widget template

3. Cari kode yang mirip seperti dibawah ini ( gunakan Ctrl + F untuk mempermudah )

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

 kemudian ubah kalimat berwarna biru menjadi 'yes'

4. Klik pratinjau, apabila tidak ada kesalahan pada template, lanjutkan dengan simpan template.

Elemen tambahan pada Main - Wrapper blog telah kita buat, berikutnya tinggal memasukkan script menu ke dalam blog, adapun caranya adalah sebagai berikut;

1. Klik TATALETAK - TAMBAH GADGET - pilih HTML/Javascript, lalu masukkan kode dibawah ini ke dalamnya

<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 KITA"><span>Home</span></a></li> <li><a href="URL LABEL/KATEGORI ARTIKEL 1"><span>NAMA LABEL 1</span></a></li> <li><a href="URL LABEL/KATEGORI ARTIKEL 2"><span>NAMA LABEL 2</span></a></li> <li><a href="URL LABEL/KATEGORI ARTIKEL 3"><span>NAMA LABEL 3</span></a></li> <li><a href="URL LABEL/KATEGORI ARTIKEL 4"><span>NAMA LABEL 4</span></a></li> <li><a href="URL LABEL/KATEGORI ARTIKEL 5"><span>NAMA LABEL 5</span></a></li> <li><a href="URL LABEL/KATEGORI ARTIKEL 6"><span>NAMA LABEL 6</span></a></li> <li><a href="URL LABEL/KATEGORI ARTIKEL 7"><span>NAMA LABEL 7</span></a></li> <li><a href="URL LABEL/KATEGORI ARTIKEL 8"><span>NAMA LABEL 8</span></a></li> </ul> </div> <!-- akhir bg_nav -->

Contoh :

<li><a href="http://info-info-umum.blogspot.com"><span>Home</span></a></li>
<li><a href="http://info-info-umum.blogspot.com/search/label/Game"><span>Game</span></a></li>
<li><a href="http://info-info-umum.blogspot.com/search/label/Lagu"><span>Lagu</span></a></li>
<li><a href="http://info-info-umum.blogspot.com/search/label/Tutorial"><span>Tutorial</span></a></li> 
<li><a href="http://info-info-umum.blogspot.com/search/label/Unik"><span>Unik</span></a></li>
<li><a href="http://info-info-umum.blogspot.com/search/label/Wisata"><span>Wisata</span></a></li>

dan seterusnya.

Semoga dapat bermanfaat bagi kita, salam hangat.