membuat menu drop down
Membuat Dropdown pada blog terbaru
Awalnya saya mau coba gimana si caranya cara bikin menu
downdrop yang sering ada di blog-blog kebanyakan ,banya cara yang saya temukan
tapi gagal mulu ada yang bisa tampil tapi cabang gak keliatanla ada yang
keliatan tapi gak tau cara ngeditnyala ,eh ternyata di blogger sudah diganti
setingannya makanya saya bingung anatara baca petunjuk dengan mempraktekannya
di blog saya
Tapi akhirnya saya menemukan cara yang sudah pasti gampang
kita ikutin caranya gampang
Berikut cara bikin menu dropdown :
1.Langkah pertama sudah pasti kita harus sign in dulu sob di
blog kita setelah itu klik desain -> tamplate -> edit html
Maka akan keluar gambar seperti dibawah ini :
2.nah kita cari kode
berikut : <b:skin>….<b:skin> seperti yang tandai di atas setelah ketemu lalu letakan atau klik kursor kita di
antara kedua kode tersebut maka akan keluar
Setelah itu masukan kode di bawah ini di atas kode “ ]]></b:skin>
“ letaknya ada di paling bawah deskripsi diatas
/* Menu
Horizontal Dropdown ----------------------------------------------- */
#menuwrapperpic{background:
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwTToR5aP-jfEK_msS07-pRijqnqtGH5Nkr400IjXvAU1czf7fjMFW-leWs3-5HxkUDN4YZDOKzhjyWFGYujN87wnlUBglxoGRFtHHfbVU29jBqljiXQFS4X1EKxTmtqaOrkuigrcZX-A/s1600/menubar.png)
repeat-x;width:960px;margin:0 auto;padding:0 auto}
#menuwrapper{width:960px;height:35px;margin:0 auto}
.menusearch{width:300px;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:Arial,
serif;margin:0;padding:0} #menubar a{display:block;text-decoration:none;font-size:12px;font-weight:700;text-transform:uppercase;color:#04fa1b;border-right:1px
solid #191919;padding:12px 10px 8px} #menubar
a.trigger{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7RK_CSoyzOH6PtKvdMRQASI09JVePIZWX9O0g8SPjRmiGsky5n8WfqwMpplPuQodIhNLbp2FhO3JJ89T2YsQhN46eEO9l8RVi4IhZCfwxtMuq-ErYupTZzA8gKBkQVdOQPSwZWgYA_F4/s1600/arrow_white.gif);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:Arial;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:1px solid
#000;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}
4.setelah kode diatas dimasukin kita cari kode </header> caranya tekan Ctrl+f
kemudian masukin kode tersebut dan Enter maka secara otomati akan ketemu
Setelah ketemu masukin kode
: ( copas aja ) J
<div
id='menuwrapperpic'>
<div
id='menuwrapper'>
<ul
id='menubar'>
<li><a
href='http:/nazipzihni.blogspot.com/'>Home</a></li>
<li><a
class='trigger'>Teknologi Informatika</a>
<ul>
<li><a
href='http://#l'>Sistem
Komputer</a></li>
<li
class='hr'/>
<li><a
href='#l'>Sistem Informasi
Manajemen</a></li>
<li><a
href='#'>Algoritma
Pemrograman</a></li>
<li><a
href='#/'>Jaringan
Komunikasi</a></li>
</ul>
</li>
<li><a
class='trigger'>Cerita</a>
<ul>
<li><a
href='#/'>Sejarah</a></li>
<li
class='hr'/>
<li><a
href='#'>Cerita
Lucu</a></li>
<li
class='hr'/>
<li><a
href='#'>Legenda</a></li>
<li
class='hr'/>
</ul>
</li>
<li><a
class='trigger'>Kata Mutiara</a>
<ul>
<li><a
href='#'>Motivasi</a></li>
<li
class='hr'/>
<li><a #'>Puisi</a></li>
<li
class='hr'/>
<li><a
href='#'>Pantun</a></li>
<li
class='hr'/>
</ul>
</li>
<li><a
class='trigger'>Tips dan Trik</a>
<ul>
<li><a
href='#'>cara mendapatkan uang dari
internet</a></li>
<li
class='hr'/>
<li><a
href='#'>cara membuat menu dropdown di
blog terbaru</a></li>
<li
class='hr'/>
</ul>
</li>
<li><a
class='trigger'>Other</a>
<ul>
<li><a
href='#'>Kesehatan</a></li>
<li
class='hr'/>
<li><a
href='#'>Olahraga</a></li>
<li
class='hr'/>
<li><a
href='#'>Kuliner</a></li>
<li
class='hr'/>
</ul>
</li>
</ul>
<div class='menusearch'>
<div
style='float:right;padding:8px 8px 0 0;'>
<form
action='http://mazinubersahabat.blogspot.com/' method='get' target=''>
<input
name='sitesearch' style='display:none;'
value='http://mazinubersahabat.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/AVvXsEhB_OEOh4ZV4B-O1tHm2ZB-rg6zAaxAxaMafviYo_PYfDmnZS_DQO7OmivjeiWPh-1Q3IP8cREK16rusuWzGDeIdS_er3Oq9lxNRoIK7c50eX6Rad7_KcKwJ0G6RPD6uB1xI6gUGhBDH9w/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/AVvXsEgkTuAuOjBGlYhM_7WaRxcAv4fifvU6nc1YM0JYvMLyOcRVzzSCjrIvUGJzIEkK9wXJw1KZjBoMPfty2UCOG67368_sXl7l1LYbeMWw1SR9rSkOUF8kDCgYlfjBJsbdpb-YAjmD9Xqhqkg/s1600/bg_search.gif'
type='image' value='Search'/>
</form></div></div><br
class='clearit'/></div><div style='clear:both;'/></div>
cttn : yang diberi tanda pagar itu bisa diganti dg url yang mau temen" link
thanks smg berhasil
Thanks Bro ... atas share Ilmu nya
ReplyDeleteNtar Kang Rury coba dulu ... cypa tw bs ....