Saya ingin berbagi sedikit tentang bagaimana cara untuk membuat menu dropdown(Scroll) untuk blog anda. Mungkin banyak dari anda yang lebih mengerti daripada saya, namun bagi para pemula seperti saya, masih kurang paham bagaimana cara membuat Menu DropDown. Sebenarnya banyak template yang sudah memiliki menu DropDown sendiri, tapi bila anda yang menyukai tampilan sebuah template namun tidak memiliki Menu DropDown, tips ini mungkin sangat berguna bagi anda.
Awalnya saya juga belum mengerti bagaimana cara membuat menu DropDown atau Scroll. Tapi sekarang saya sudah mengerti setelah banyak melakukan pencarian di Google. Memang sedikit sulit saat saya masih baru dan belum berpengalaman dalam dunia blog (sekarang juga masih haha), tapi setelah mengerti bagaimana proses dan cara pembatanya, ternyata tidak terlalu sulit. sebenarnya banyak blog yang sudah membagikan cara untuk membuat Menu DropDown ini, dan banyak juga yang penjelasanya kurang dapat dimengerti untuk para pemula. Disini saya akan mencoba memberikan keterangan yang lebih jelas dan mudah dimengerti anda para blogger.
Ikuti langkah-langkah berikut :
1. Login akun Blogger anda (Login Blog)
2. Setelah Login, masuk/klik opsi/menu Template/Rancangan/Design yang ada disebelah kiri layar anda.
3. Klik tulisan Edit HTML yang ada dibawah gambar kecil template anda.
4. Akan terbuka sebuah window seperti MS Word di layar firefox anda yang berisi sebuah HTML/XML.
Note : Centang "Expand Template Widget" untuk menghindari kerusakan apabila ada kesalahan saat anda mengedit template.
5. Cari kode ]]></b:skin>
6. Untuk memudahkan pencarian anda, Klik sekali kedalam window tersebut lalu anda tekan Ctrl+F.
Note : Klik kedalam tulisan terlebih dahulu baru anda tekan Ctrl+F, bila anda menekan Ctrl+F diluar kotak tersebut, anda hanya akan mencari kata yang berada diluar kotak tersebut.
7. Lalu masukan kode dibawah ini tepat diatas kode ]]></b:skin>
Setelah anda selesai meruh kode diatas, anda cari kode berikut :
<header> : Untuk menempatkan menu diatas nama blog anda
atau
</header> : Untuk menempatkan menu dibawah nama blog anda
Copy kode dibawah ini, lalu anda letakan tepat diatas <header> untuk menu diposisi atas nama blog anda, atau tepat dibawah kode </header> untuk menu dibawah nama blog anda.
<div id='menuwrapper'>
<ul id='menubar'>
<li><a href='/'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3XL30lYAbWyQj0yDlgFL1L8NgKJraSOsgS1U2KxsfBdGEWb7LMVRgdJ7aUUrNMiCd6R9qC-xSVcCN62gQRWGjXF_98sfYkWpJmft8UwROxb1wncWZG2hOPE4oqnGSIyaAEqMArnD4CVU/s1600/homewhite.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>
<li><a href='http://dyke-frost.blogspot.com' target='new'>Zuaz'Z Creator</a></li>
<li><a class='trigger'>Tips dan Trik</a>
<ul>
<li><a href='http://dyke-frost.blogspot.com/search/label/tips%20dan%20trik%20komputer'>Komputer</a></li>
<li class='hr'/>
<li><a href='http://dyke-frost.blogspot.com/search/label/tips%20dan%20trik%20blog'>Blogspot</a></li>
<li class='hr'/>
<li><a href='http://dyke-frost.blogspot.comsearch/label/facebook'>Facebook</a></li>
<li class='hr'/>
</ul>
</li>
<li><a class='trigger'>Kategori</a>
<ul>
<li><a href='http://dyke-frost.blogspot.com.com/2012/01/tv-online.html'>TV Online</a></li>
<li class='hr'/>
<li><a href='http://dyke-frost.blogspot.com/search/label/computer'>Komputer</a></li>
<li class='hr'/>
<li><a href='http://dyke-frost.blogspot.com/search/label/desain%20grafis'>Desain Grafis</a></li>
<li class='hr'/>
<li><a href='http://dyke-frost.blogspot.com/search/label/game'>Game</a></li>
<li class='hr'/>
<li><a href='http://dyke-frost.blogspot.com/search/label/microsoft'>Microsoft</a></li>
<li class='hr'/>
<li><a href='http://dyke-frost.blogspot.com/search/label/software%20aplikasi'>Software APP</a></li>
<li class='hr'/>
<li><a href='http://dyke-frost.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://dyke-frost.blogspot.com/search' method='get' target=''>
<input name='sitesearch' style='display:none;' value='http://dyke-frost.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/AVvXsEgHYK57ILC08lggVGdEe7j9PTmJfJzTPpCYTEr_78_uIwzOavLjs6voTEp8gYzYVfAD2nCktSXM-UMDSB5rvlxIwtXm7eNokDXodJOXM-Ns4hXqCwKPtl994z5R-g-isH5Fph8lw-MzUZc/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/AVvXsEjwwrubLCDgPs54WMo-zc4dVBZCO33DMsefze5oLHz_7PRbbGaYU-SFPjzzb_-pTrJI8QynD27RsCPvL9GhPo5pRGdJ0uVL7iTlNGFJnSskNMt7Ai_IkhUIb9UL92aiZPJXG8RVOgiY_2U/s1600/bg_search.gif' type='image' value='Search'/>
</form></div></div><br class='clearit'/></div><div style='clear:both;'/></div>
1. Kode diatas yang memiliki warna Merah merupakan Url/Link halaman, silahkan anda ganti dengan nama blog anda.
2. Kode diatas yang memiliki warna Kuning merupakan kata/kategori yang akan tampil pada menu DrowDown anda, silahkan anda ganti sesuai dengan keinginan.
Lalu cek di blog anda, apakah Menu Dropdown sudah ada di Blog anda.
SARAN :
Bila dari anda ada yang kurang mengerti dan bahkan tidak mengerti sama sekali, saya sarankan anda untuk menggunakan template yang memiliki menu DropDown.lalu..
Setelah anda memiliki Template yang memiliki menu Dropdown, cobalah untuk melihat HTML dari template tersebut dan pelajari menggunakan cara-cara diatas. Mungkin akan menambah pengetahuan anda didalam bidang komputer.
Maaf kalo ada yang salah, soalnnya saya juga masih pemula.. Cuma mau berbagi pengalaman dengan anda. Semoga membantu.!!
0 komentar:
Posting Komentar