hai para bloger...
Setiap bloger pasti tidak asing dengan menu yang satu ini, yaitu menu DropDown. Karena menu ini sangat meminimalkan atau mengefisiensikan ruang pada blog, sehingga tampilan blog tidak terpenuhi oleh menu pilihan. Nah sesuai judul maka yang akan kita bahas adalah "Cara Menambah Menu DropDown Blog", tentunya untuk pemula.
Kita bisa menambah menu DropDown ini dengan beberapa cara, bisa dengan Edit HTML, menggunakan HTML/JavaScript, dan dengan ganti Template Blog.
Yg pertama kita gunakan cara ganti Template Blog.
Kita mulai saja langkah-langahnya :
1. Download template blog yang ada menu DropDownnya.
Atau bisa agan klik disini untuk template yang sama dengan blog saya.
2. Jika Template sudah anda pasang maka masuk ke menu Template > Edit HTML
3. Setelah kotak kode keluar tekan Ctrl+F lalu ketikkan "Parent Category" pada kotak Search.
4. Nah setelah muncul kode seperti di atas, maka akan saya terangkan cara mengubah menu DropDown
standar sesuai keinginan kita. Karena kode di atas sebagian sudah saya edit.
- untuk yg saya beri tanda Hitam itu adalah nama menu yg tampil pada menu DropDown. Bisa kita ubah
sesuai dengan nama menu yg kita inginkan, misal "Twitter, Manga, atau One Piece".
- yg berwarna Merah adalah pagar (#), itu adalah kode standar jadi bisa kita edit.
- nah yg berwarna Biru ini adalah alamat html dari menu Anime dan Twitter. dengan cara menghapus
pagar (#) yg ada diantara tanda petik, lalu kita pastekan kode html menu yg kita buat (tentunya sesuai
dengan nama menu)
5. Jika sudah, maka tinggal klik Simpan Template
Catatan : Jika ingin menambah jumlah menu DropDownnya maka harus menambah/mengubah kode yg sudah ada.
Jika yg di atas dengan cara ganti Template Blog, maka skarang cara yg kedua hanya dengan cara Edit HTML.
nah menunya akan sesuai gambar di atas. kita mulai saja...
2. Pilih rancangan / desing dan klik edit HTML dan lanjutkan
3. Centang "Expand Template Widget" untuk menghindari apabila terjadi kesalahan
4. Sobat cari kode ]]></b:skin> dan letakkan kode berikut tepat di atas kode ]]></b:skin>
Klik show untuk melihat
Selanjutnya sobat blogger cari kode berikut:
- <header> : untuk menempatkan menu di atas nama blog
- </header> : untuk menempatkan menu di bawah nama blog
Copy kode di bawah ini dan letakkan tepat di atas kode <header> atau di bawah kode </header>
<div id='menuwrapperpic'>
<div id='menuwrapper'>
<ul id='menubar'>
<li><a href='/'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDEw58QP6F_uRwvRFoLIBomt08ekei2ApBrhicw3J2L4PfrtDH8esPUQ3P09uj6KVODqQHT3HOYQtUDMf9xHKjQpAIFwysP29UATSSYKxpoh2RoqvfuGCIIcTBoOxkJYYhraTtHVWHnjU/s1600/home_white.png' style='padding:0px;'/> Home</a></li>
<li><a href='http://www.blogger.com/profile/06961337061354681028' target='new'>Tentang Admin</a></li>
<li><a class='trigger'>Contact Us</a>
<ul>
<li><a href='https://plus.google.com/u/0/106997202037581570725' target='new'>Goggle +</a></li>
<li class='hr'/>
<li><a href='http://twitter.com/den_zuaz' target='new'>Contact on Twitter</a></li>
<li><a href='http://www.myspace.com/denzuaz' target='new'>Contact on Myspace</a></li>
<li><a href='http://www.facebook.com/zuazTama' target='new'>Zuaz'Z on Facebook</a></li>
</ul>
</li>
<li><a href='http://zuazz.blogspot.com' target='new'>Zuaz'Z Creator</a></li>
<li><a class='trigger'>Tips dan Trik</a>
<ul>
<li><a href='http://zuazz.blogspot.com/search/label/tips%20dan%20trik%20komputer'>Komputer</a></li>
<li class='hr'/>
<li><a href='http://zuazz.blogspot.com/search/label/tips%20dan%20trik%20blog'>Blogspot</a></li>
<li class='hr'/>
<li><a href='http://zuazz.blogspot.com/search/label/facebook'>Facebook</a></li>
<li class='hr'/>
</ul>
</li>
<li><a class='trigger'>Kategori</a>
<ul>
<li><a href='http://zuazz.blogspot.com/2012/01/tv-online.html'>TV Online</a></li>
<li class='hr'/>
<li><a href='http://zuazz.blogspot.com/search/label/computer'>Komputer</a></li>
<li class='hr'/>
<li><a href='http://zuazz.blogspot.com/search/label/desain%20grafis'>Desain Grafis</a></li>
<li class='hr'/>
<li><a href='http://zuazz.blogspot.com/search/label/game'>Game</a></li>
<li class='hr'/>
<li><a href='http://zuazz.blogspot.com/search/label/microsoft'>Microsoft</a></li>
<li class='hr'/>
<li><a href='http://zuazz.blogspot.com/search/label/software%20aplikasi'>Software APP</a></li>
<li class='hr'/>
<li><a href='http://zuazz.blogspot.com/search/label/software%20program'>Software Program</a></li>
</ul>
</li>
</ul> <div class='menusearch'>
<div style='float:right;padding:8px 8px 0 0;'>
<form action='http://zuazz.blogspot.com/search' method='get' target=''>
<input name='sitesearch' style='display:none;' value='http://zuazz.blogspot.com'/>
<input id='search-box' name='q' onblur='if(this.value=='')this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value='';' style='width:170px;border:none;padding:4px 10px; font:italic 12px Georgia;color:#666; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsAxxcVwn4Xfd833O_jPzh1VND7O1BM04ywbBV03Q8qJHjYpfBElQ60pBejVUcj58ApdkdMLygpirO4vqG783FIYA-MofaNeikbju37ZBh-i3u6MoT18CfKgRlDrowAXvXyk_GbCAuyrM/s1600/field-bg.gif) no-repeat;' type='text' value='Cari disini ya sob...'/><input align='top' id='search-btn' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNf9hDt9oa9DWu3_f9uPknMJJUuEVRM8nh4B55xBWQbQoFi1ZU3sZvhU2dpJThtefOjaNRCyMgwgyMscVvhVD5lfBc1JgolU2cJzjBHj7n0P_bHPIt4XEfW6vqGDf-LvSjcuJZCHRXaHs/s1600/bg_search.gif' type='image' value='Search'/>
</form></div></div><br class='clearit'/></div><div style='clear:both;'/></div>
Keterangan:
- Kode berwarna merah adalah Url tujuan, silakan sobat ganti dengan Url pada blog sobat
- Kode berwarna kuning adalah kalimat yang tampil pada menu dropdown, Silakan sobat sesuaikan.
Catatan : Kadang kode html yg kita masukan dapat mengubah susunan kode di atas, ikuti saja petunjuk yg keluar. Tidak rumit kok jadi semoga agan bruntung.
Demikianlah Cara Membuat Menu Drop Down Di Atas Header Atau Di Bawah Header, semoga bermanfaat bagi sobat blogger.
oyereee
BalasHapus