Cara Membuat Menu Drop Down atau Menu Percabangan di Blogspot

Cara Membuat Menu Drop Down atau  Menu Percabangan di Blogspot - Seringkali para blogger pemula kebingungan tentang cara bagaimana membuat menu drop down atau menu yang mempunyai menu menurun (anak menu) pada navigasi blog. Itu sangat wajar, karena belum tentu semua blogger adalah seorang web developer yang mengerti pemograman web.

Selain harus otak-atik HTML CSS, para blogger juga harus tau betul dimana letak atau posisi kode HTML tersebut. Nah, disini saya akan mencoba memberikan tutorial bagaimana cara membuat menu drop down di blogspot.

Tapi sebelum itu, mungkin sobat blogger disini ada yang belum mengetahui apa itu menu drop down. Begini, jika sobat suka menjelajahi blog/website orang lain, sobat akan menemukan menu navigasi ketika disentuh kursor maka menu tersebut akan menampilkan anak menu dibawahnya. Menu itulah yang dinamakan Menu Drop Down Untuk lebih jelasnya sobat lihat gambar dibawah ini.

Gambar diatas menunjukan menu navigasi bernama "Berita", ketika disentuh kursor maka menu berita tersebut akan menampilkan "Unik", "Teknologi", dan "Social Media". Nah, itulah yang di sebut Menu Drop Down.

Sebenarnya ada 2 cara membuat menu navigasi drop down, yang pertama adalah dengan menambahkan kode html/javascript langsung pada Widget blogspot dan yang kedua adalah menambahkan kode html/javascript di Edit HTML pada pengaturan Template blogspot.

Disini saya akan membahas cara menambahkan kode HTML di pengaturan Template blogspot saja, karena untuk widget saya rasa cukup mudah dan tidak perlu dibahas.

Oke, langsung aja ini dia caranya.

1. Langkah pertama yang sobat harus lakukan adalah pergi ke menu Template, kemudian klik "Edit HTML"

2. Kalau sudah, sobat cari menu navigasinya dengan menekan tombol CTRL + F, maka akan muncul kotak pencarian. Karena menu navigasi saya tertulis "Berita" maka sobat ketikan berita di kolom pencarian. 

Ada hal yang perlu di catat disini, bahwa kolom pencarian akan mencari sesuai apa yang sobat ketikan. Ini tergantung di menu navigasi nya, kalau di menu navigasi sobat belum tersedia apa-apa biasanya terisi "Home" atau "Menu","Menu1","Menu2" dan seterusnya. Nah silahkan sobat cari sesuai apa yang tersedia di menu navigasi blog sobat.

3. Sobat perhatikan menu "Berita", turunannya adalah "Unik", "Teknologi" dan "Social Media". Silahkan sobat edit sendiri sesuai keinginan sobat. 

Oh iya, coba sobat perhatikan tanda "#", tanda itu nanti sobat hapus dan ganti dengan url postingan sobat. Tanda "#" tersebut fungsinya memang untuk meletakan url halaman pada blog.

4. Kalau sudah, Sobat klik "Simpan Template"

Catatan : jika sobat belum mempunyai kode HTML nya sobat bisa copas pada kode HTML di bawah ini

========================================================================

<!-- navigation menu start -->

<div id='navitions'>

<nav class='navix' id='nav' itemscope='itemscope'

itemtype='http://schema.org/SiteNavigationElement'>

<a class='toggleMenu' href='#'>Menu</a>

<!-- secondary navigation menu start -->

<ul class='nav nav_menu'>

<li><a class='active' href='/'>Home</a></li>

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

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

<li><a href='/p/about.html'>Static Page</a></li>

<li><a href='#'>With Sub Menu</a>

<ul>

<li><a href='#'>Sub Menu</a></li>

<li><a href='#'>Sub Menu</a></li>

<li><a href='#'>Sub Menu</a></li>

</ul>

</li>

<li><a href='/error.html'>Error 404</a></li>

</ul>

<!-- search box start -->

<form action='/search' id='search-form' method='get' style='display:

inline;'><table><tbody><tr><td class='search-box'><input id='searchbox'

name='q'

onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;'

onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;;'

type='text' value='Search...'/></td>

<td class='search-button'><input id='search-button' type='submit'

value='Search'/></td></tr></tbody></table></form>

<!-- search box end -->

</nav>

</div>

<!-- navigation menu end -->

========================================================================

Demikianlah tutorial saya kali ini Cara Membuat Menu Drop Down atau  Menu Percabangan di Blogspot. Semoga bermanfaat.

Salam ^_^

Cara Membuat Menu Drop Down atau Menu Percabangan di Blogspot 2016-07-28T22:05:00+07:00 Rating: 4.5 Diposkan Oleh: Riyal S