Cara Mengubah Edit Menu Pada Template Thesis

Cara Mengubah/Edit Menu Pada Template Thesis  - Mengganti atau menambahkan menu baru pada navbar mungkin bukan hal yangsulit buat blogger yang sudah paham dengan penulisan kode HTML. Namun bagimereka yang kurang memiliki pengetahuan boleh jadi hal ini merupakan kesulitanbesar. Postingan ini merupakan request sobat Sports  yang ingin mengetahui bagaimana caramenambahkan menu pada template thesis yang digunakannya seperti juga templateyang saya pakai ini. Tapi sebelum kita ke pokok pembahasan saya inginmenampilkan contoh struktur penulisan kode HTML menu navigasi yang saya ambildari 3 buah template untuk melihat perbedaannya. Namun satu hal yang harusdiperhatikan adalah meskipun penulisan menu dari tiap template ini berbeda,tapi ada tanda pengenal atau ciri dimana kode-kode ini berada pada templateyaitu biasanya ditandai dengan tag <divid='nav'> atau tag <divid='menu'> . Kemudian pada bagian CSS ditandaidengan kode #navbar-iframe {  atau kode #menu {.

·        Kode menupada template Simple SEO :

<div id='nav'>

<ul>

<!--EDIT NAVBAR -->

<li id='current'><aexpr:href='data:blog.homepageUrl'title='Home'>Home</a></li>

<li><aexpr:href='data:blog.homepageUrl +&quot;feeds/posts/default&quot;' title='PostsRSS'>Posts RSS</a></li>

<li><aexpr:href='data:blog.homepageUrl + &quot;feeds/comments/default&quot;'title='Comments RSS'>CommentsRSS</a></li>

<li><a href='#'title='Edit thislink'>Edit</a></li>

<!--END NAVBAR -->

</ul>

</div>

·        Kode menupada template  SEO Friendly BlogspotTemplate :

<div id='nav-left'>

<ul>

<li><ahref='/'>Home</a></li>

<li><ahref='#'>About</a></li>

<li><a href='#'>Contact</a></li>

</ul>

</div>

·        Kode menupada template SEO Thesis Blogjuragan :

<div id='menu'>

<ul class='menunavsuperfish'>

<li class='page_itemhome'><a Title='Home'expr:href='data:blog.homepageUrl'>Home</a></li>

<li class='page_itempage-item-1'><ahref='#'>About</a></li>

<li class='page_itempage-item-2'><a href='#'>Contact</a></li>

</ul>

</div>

Ketiga contoh template ini ada embel-embel SEOnya karena memang saya selalu mencari template yang SEO friendly sebab biasanya loadingnya cepat dan sudah dilengkapi beberapa meta tag. Nah dari ketiga contoh ini sobat sudah bisa melihatbukan perbedaannya ? Menambahkan menu barunya pun sangat mudah koq. Misalnyakita ingin menambahkan 2 menu baru yaitu Sitemap/DaftarIsi dan Tukar Link, maka caranyaadalah :

·        SimpleSEO :

Ganti tanda # denganlink referensi menu yang ingin ditambahkan.

<li><a href=' http://bla…bla..bla../' title='Daftar Isi Blog'>Sitemap</a></li>

<li><a href=' http://bla…bla..bla../' title='Link dan Banner'>Tukar Link</a></li>

Struktur lengkap kodeHTML pada template menjadi seperti ini :

<div id='nav'>

<ul>

<!--EDIT NAVBAR -->

<li id='current'><aexpr:href='data:blog.homepageUrl'title='Home'>Home</a></li>

<li><aexpr:href='data:blog.homepageUrl +&quot;feeds/posts/default&quot;' title='PostsRSS'>Posts RSS</a></li>

<li><aexpr:href='data:blog.homepageUrl +&quot;feeds/comments/default&quot;'title='Comments RSS'>CommentsRSS</a></li>

<li><ahref='http://bla..bla..bla../' title='Daftar IsiBlog'>Sitemap</a></li>

<li><ahref='http://bla..bla..bla../' title='Link danBanner'>Tukar Link</a></li>

<!--END NAVBAR -->

</ul>

</div>

·        SEOFriendly Blogspot Template :

Sama dengan Simple SEO, tinggal ganti tanda # dengan link referensi menu yang ingin ditambahkan.

<li><a href=' http://bla…bla..bla../'>Sitemap</a></li>

<li><a href=' http://bla…bla..bla../'>Tukar Link</a></li>

Struktur lengkap kodeHTML pada template menjadi seperti ini :

<div id='nav-left'>

<ul>

<li><ahref='/'>Home</a></li>

<li><a href='http://bla..bla..bla../'>About</a></li>

<li><ahref='http://bla..bla..bla../'>Contact</a></li>

<li><ahref='http://bla..bla..bla../'>Sitemap</a></li>

<li><a href='http://bla..bla..bla../'>TukarLink</a></li>

</ul>

</div>

·        SEOThesis Template :

<li class='page_itempage-item-3'><a href='isidengan link daftar isi'>Sitemap</a></li>

<li class='page_itempage-item-4'><a href='isidengan link tukar link'>TukarLink</a></li>

Strukturlengkap kode HTML pada template menjadi seperti ini :

<div id='menu'>

<ul class='menunavsuperfish'>

<li class='page_itemhome'><a Title='Home'expr:href='data:blog.homepageUrl'>Home</a></li>

<li class='page_itempage-item-1'><a href='http://bla…bla..bla../'>About</a></li>

<li class='page_itempage-item-2'><a href='http://bla…bla..bla../'>Contact</a></li>

<li class='page_itempage-item-3'><a href='http://bla…bla..bla../'>Sitemap</a></li>

<li class='page_itempage-item-4'><a href='http://bla…bla..bla../'>Tukar Link</a></li>

</ul>

</div>

NB: Penempatan urutan link bisa ditukar/diganti atau dibolak-balik terserah anda.Yang penting jangan sampai menghapus atau meniadakan link yang pertama (Home).

Proses perubahan menu pada template ini dapatdilakukan dengan lebih dulu login ke dashboard blogger kemudian pilih Rancangan > Edit HTML dan centang Expandwidget template. Mencentang Expand widget template ini tujuannya adalah untukmemunculkan kode-kode yang disembunyikan oleh blogger. Secara default bloggermenyembunyikan kode-kode tertentu / kode widget pada template apabila kita tidakmencentang Expand widget template ini. Sehingga akhirnya kita tidak bisamenemukan kode yang kita cari. Keliatan sepele bukan ? Tekan Ctrl+F untukmempercepat pencarian, ketikkan kode atau kata yang ingin dicari pada templatekemudian klik simbol next atau previous untuk kembali keatas. Trik inimembantu sekali saat kita melakukan editing template.

Saya juga sempat mengambil screenshot judul artikelpada template Thesis yang tumpang tindih. Saya lupa nama blognya, tapi mumpunglagi membahas Thesis mending sekalian aja.

Judul artikel yang tumpang tindih seperti sepertigambar diatas terjadi karena pada bagian CSS untuk judul posting yaitu .posth1, .post h2 { belum diedit jaraknya. Cari tulisan line-height:1em;yang ada dibawah kode .post h1, .post h2 { , dan gantimenjadi line-height:1.3em; maka ini akan membuka jarak antara 2 baris judul sehingga judul tidakakan terlihat tumpang tindih.

Semoga dengan tips cara mengubah/menambahkan menu pada template ini bisa membantu kesulitan sobat yang mau mengedit menunya danmenambah pemahaman tentang penulisan kode HTML. Kalau sobat ingin tahu bagaimana isi template orang lain untuk mengetahui struktur penulisan HTML didalamnya, saya sarankan untuk membaca juga artikel saya Cara Mengetahui Kode/CSS Template Blog Orang Lain. Mengintip dengan tujuan baik itu sah-sah saja koq he he. Selamat mencoba.