Memasang menu dropdown pada blog
Hai sobat bloger, bertemu lagi tetap dalam tips untuk mempercantik blog. Kali ini saya akan share cara memasang dropdown pada blog. Menu ini sangat baik digunakan jika kita mempunyai banyak label. Selain menghemat tempat juga memudahkan pengunjung mencari artikel sesuai dengan tema. Kalo masih belum tau apa itu dropdown berikut adalah gambarnya.
Jika tertarik agan dapat membuatnya dengan cara sebagai berikut!
1. Buka dasbor -> tamplate
2. Edit html (jangan lupa beri tanda centang pada Expand Template Widget)
3. Kemudian cari kode ]]></b:skin> untuk mempermudah pencarian bisa tekan tombol ctrl + f kemudian paste kode diatas.
4. Masukkan kode berikut di atas kode diatas
/* Menu Horizontal Dropdown ----------------------------------------------- */ #menuwrapperpic{background-color:#E10113 repeat-x;width:1000px;border:5px solid #191919;margin:0 auto;padding:0 auto} #menuwrapper{width:1000px;height:35px;margin:0 auto} .menusearch{width:200px;float:right;margin:0 auto;padding:0 auto} .clearit{clear:both;height:0;line-height:0.0;font-size:0} #menubar{width:100%} #menubar,#menubar ul{list-style:none;font-family:Trebuchet MS, serif;margin:0;padding:0} #menubar a{display:block;text-decoration:none;font-size:12px;font-weight:700;text-transform:uppercase;color:#CECECF;border-right:3px solid #191919;padding:12px 10px 8px} #menubar a.trigger{background-image:None;background-repeat:no-repeat;background-position:right center;padding:12px 24px 8px 10px} #menubar li{float:left;position:static;width:auto} #menubar li ul,#menubar ul li{width:170px} #menubar ul li a{text-align:left;color:#fff;font-size:12px;font-weight:400;text-transform:none;font-family:Trebuchet MS;border:none;padding:5px 10px} #menubar li ul{z-index:100;position:absolute;display:none;background:#222;padding-bottom:5px;-moz-box-shadow:0 2px 2px rgba(0,0,0,0.6);-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.6)} #menubar li:hover a,#menubar a:active,#menubar a:focus,#menubar li.hvr a{background-color:#222;color:#E98C0A} #menubar li:hover ul,#menubar li.hvr ul{display:block} #menubar li:hover ul a,#menubar li.hvr ul a{color:#edfdfd;background-color:transparent;text-decoration:none} #menubar li ul li.hr{border-bottom:1px solid #444;border-top:2px solid #FF0000;display:block;font-size:1px;height:0;line-height:0;margin:4px 0} #menubar ul a:hover{background-color:#555!important;color:#fff!important;text-decoration:none}
Catatan : jenis font dan warna silakan edit sendiri ... jika di jelaskan panjang gan .... heheheee....
5. Berikutnya cari lagi kode </header> pastekan kode berikut di bawahnya
<div id='menuwrapperpic'>
<div id='menuwrapper'>
<ul id='menubar'>
<li><a href='/'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHJDGNy3qheB-XdpB_MvJYpb-bG5kzFlmQ9awuWCRHjCnA3-6J8fX_JYUSZC7Vt2yo9aqghvCUhgWsEdrttVkLyDIyyQKNY4ksFyKD2_eJItJfBvnjKDt-AUq0FVhIOdHOnA19zmWzoiI/s1600/home_white.png' style='padding:0px;'/> Home</a></li>
<li><a href='http://www.hudamaulana.blogspot.com/search/label/Coretanku?max-results=4' target='new'>Coretanku</a></li>
<li><a class='trigger'>Cerita Lucu</a>
<ul>
<li><a href='http://www.hudamaulana.blogspot.com/search/label/Abu Nawas'>Abu Nawas</a></li>
<li class='hr'/>
<li><a href='http://www.hudamaulana.blogspot.com/search/label/nasruddin'>Nasruddin Hoja</a></li>
<li class='hr'/>
</ul>
</li>
<li><a class='trigger'>Seputar Pendidikan</a>
<ul>
<li><a href='http://hudamaulana.blogspot.com/search/label/teras%20guru?max-results=4'>Teras Guru</a></li>
<li class='hr'/>
<li><a href='http://www.hudamaulana.blogspot.com/search/label/bank%20soal%20SD?max-results=8'>Bank Soal</a></li>
<li class='hr'/>
<li><a href='http://www.hudamaulana.blogspot.com/search/label/EduNews?max-results=4'>EduNews</a></li>
<li class='hr'/>
<li><a href='http://www.hudamaulana.blogspot.com/search/label/bse?max-results=8'>BSE</a></li>
<li class='hr'/>
</ul>
</li>
<li><a class='trigger'>Khazanah Islam</a>
<ul>
<li><a href='http://www.hudamaulana.blogspot.com/search/label/religi?max-results=4'>Religi</a></li>
<li class='hr'/>
<li><a href='http://www.hudamaulana.blogspot.com/search/label/Al%20Hikam'>AL Hikam</a></li>
<li class='hr'/>
</ul>
</li>
<li><a href='http://www.hudamaulana.blogspot.com/search/label/unduh?max-results=4' target='new'>Unduh</a></li>
</ul> <div class='menusearch'>
<div style='float:right;padding:8px 8px 0 0;'>
<form action='http://hudamaulana.blogspot.com/search' method='get' target=''>
<input name='sitesearch' style='display:none;' value='http://hudamaulana.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:100px;border:none;padding:4px 10px; font:italic 12px Georgia;color:#666; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4z6RjQRXTswuR2ku3FD7qwy0FBAgVQVgI4F8LZKScXA8Da4vQwfr0aOAlLE4p4OxIM7RCuDlI5lvExxrbKQME7SWt2YHqIQ8mnutDFNwyuY1wQTR2NDXAJghaV1yF4pxbzHRVFzuRTxo/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/AVvXsEgs6SO9xsIH91p1NQqY0G_1NN9g4VCY315Cx4TVYvhZt75znFQsSsx7mp6XwP1G3owX_wRUMrOpBPbu6_maGCCmKc7P7kBR6OKx6inekePF_I4J9nwnV2YTLUkuYiDg8QE-Kh5J_nNZRhU/s1600/bg_search.gif' type='image' value='Search'/>
</form></div></div><br class='clearit'/></div><div style='clear:both;'/></div>
<div class='tabs-outer'>
<div class='tabs-cap-top cap-top'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
<div class='fauxborder-left tabs-fauxborder-left'>
<div class='fauxborder-right tabs-fauxborder-right'/>
<div class='region-inner tabs-inner'>
<b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'>
<b:widget id='HTML7' locked='false' title='' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
Keterangan:
1. Ganti tulisan warna biru dengan label atas, pada contoh label atasnya adalah home, coretanku, cerita lucu dll. Catatan: label atas ada yang berupa link ada yang tidak. Jika menggunakan link ganti edit alamat Uralnya agar sesuai.
2. Tulisan warna merah silakan ganti dengan alamat url setiap label. Catatan: tulisan merah tebal di belakang adalah nama label yang muncul dan tidak berpengaruh pada kode pencarian.
Selamat mencoba ... semoga sukses.....
Share this post
Post a Comment Blogger Facebook