Cara Membuat Menu Horizontal di Blogspot

Setelah artikel saya yang pertama mengenai Cara Membuat Blog di Blogspot, maka dikesempatan kali ini saya akan memberikan tutorial mengenai Cara Membuat Menu Horizontal di Blogspot.

Memang sudah banyak sekali pendahulu saya yang membuat artikel terkait, namun setelah saya coba sendiri ternyata banyak yang tidak bekerja dengan baik alias ERROR.

Banyak sekali pengaruh kenapa ERROR itu terjadi, salah satunya adalah perbedaan script pada templates blog, karena tidak semua script blog itu sama, walaupun tetap ada bagian-bagian petunjuk di blog yang sama. Tutorial ini hanya sebagai pilihan petunjuk yang lain, bagi teman-teman yang sudah pernah mencoba namun ERROR tidak ada salahnya mencoba tutorial di blog saya ini.

Setelah saya mengotak atik huruf-huruf yang ribet nya setengah mati (Trial and ERROR) di bagian Edit HTML, akhirnya jadi juga Menu Horizontal punya saya ini (Trial and SUCCES), hehehe. Ok, kita langsung saja ke TE (tempat eksekusi).

1. Klik Rancangan/Layout lalu klik Edit HTML,
2. Jangan lupa untuk memberi centang di Expand Template Widget,
3. Lalu cari kode ini terlebih dahulu dengan cara menekan Ctrl F:

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

4. Bentuk full script DEFAULT nya adalah seperti ini:

<b:section class='contentwrapper' id='contentwrapper' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'>
<b:includable id='nextprev'>

5. Setelah teman-teman menemukan kode tersebut, maka kode itu perlu kita ubah sedikit agar Menu Horizontal nya bekerja. Yang diubah disini adalah bagian kode yang berwarna merah. Maka hasil full kode itu akan menjadi seperti ini:

<b:section class='contentwrapper' id='contentwrapper' showaddelement='yes'>
<b:widget id='Blog1' locked='false' title='Posting Blog' type='Blog'>
<b:includable id='nextprev'>

Jangan di save dahulu !

6. Lalu langkah selanjutnya adalah mencari kode berikut:

</div><!-- Closes underHeader -->

7. Bentuk full script DEFAULT nya adalah seperti ini:

</div><!-- Closes underHeader -->

<div id='nav'>
<ul>
<li class='current_page'><a expr:href='data:blog.homepageUrl' title='Home'><span>Home</span></a></li>
<li><a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' title='Posts RSS'><span>Posts RSS</span></a></li>
<li><a expr:href='data:blog.homepageUrl + &quot;feeds/comments/default&quot;' title='Comments RSS'><span>Comments RSS</span></a></li>
<li><a href='http://www.blogger.com' title='Login'><span>Login</span></a></li>
</ul>
<div class='cleared'/>
</div> <!-- Closes Nav -->

8. Teman-teman hanya perlu men-Delete kode yang berwarna merah di atas dan diganti dengan:

<li><a href='http://cantik-2013.blogspot.com/'><span>Welcome</span></a></li>
<li><a href='http://cantik-2013.blogspot.com/'><span>Tutorial Blog</span></a></li>
<li><a href='http://cantik-2013.blogspot.com/'><span>Tips - Trik</span></a></li>
<li><a href='http://cantik-2013.blogspot.com/'><span>SEO Management</span></a></li>
<li><a href='http://cantik-2013.blogspot.com/'><span>Software</span></a></li>
<li><a href='http://cantik-2013.blogspot.com/'><span>Hotnews</span></a></li>

9. Kode yang berwarna merah di atas ini adalah tampilan menu blog saya (alamat Url), teman-teman hanya perlu mengganti alamat URL (alamat Url Label/Menu) nya dan nama Menu nya saja dengan punya teman-teman. Penempatan kode di atas harus diantara kode <ul> dan </ul> . Banyaknya kode yang diganti itu tergantung dari berapa banyak menu yang ingin teman-teman gunakan.

Tampilan akhir kode nya adalah:

</div><!-- Closes underHeader -->

<div id='nav'>
<ul>
<li><a href='http://cantik-2013.blogspot.com/'><span>Welcome</span></a></li>
<li><a href='http://cantik-2013.blogspot.com/'><span>Tutorial Blog</span></a></li>
<li><a href='http://cantik-2013.blogspot.com/'>&lt;span>Tips - Trik</span></a></li>
<li><a href='http://cantik-2013.blogspot.com/'><span>SEO Management</span></a></li>
<li><a href='http://cantik-2013.blogspot.com/'><span>Software</span></a></li>
<li><a href='http://cantik-2013.blogspot.com/'><span>Hotnews</span></a></li>
</ul>
<div class='cleared'/>
</div> <!-- Closes Nav -->

Setelah semuanya dikerjakan dengan baik, maka langsung di SAVE, dan teman-teman bisa melihat perubahannya. Hasilnya bisa lihat gambar di bawah ini.

Kira-kira seperti itulah Cara Membuat Menu Horizontal di Blogspot, selamat mencoba dan semoga berhasil. :)