Cara memasang menu drop down di atas header | Abri Pecinta Game Online
Home » » Cara memasang menu drop down di atas header

Cara memasang menu drop down di atas header

Cara memasang menu drop down di atas header. Selamat sero bray gimana kabarnya baik kan amin deh kalau baik-baik saja ohya bray saya ada artikel baru nih tentang cara memasang menu drop down di atas header yaudah langsung saja di simak.



1. masuk ke blog kalian masing-masing kalau belum masuk klik disini
2. pilih template kemudian edit html

3. masuk kan kode diwabah ini tepat sebelum/ di atas kode ]]></b:skin>


 /* Menu Horizontal Dropdown ----------------------------------------------- */ #menuwrapperpic{background: url(http://2.bp.blogspot.com/-eVufkC686Cw/TwGo8YAlWwI/AAAAAAAAAYM/tWP7l3ENpjY/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:#CECECF;border-right:1px solid #191919;padding:12px 10px 8px} #menubar a.trigger{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFxHjvNDX1WV4mdCUur0A3x1avvAF2gdA6PQbhrh8MjQnVqEjFHnfxzN9-UruMowIlVahYtvBFZnpj2lbyjeCdz20drQaJYdz3t3olgjMu4_TZLdmg7EGY-lBGBfNK8OgjZn9eKOKaP_o/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 itu masukan kode di bawah ini tepat di atas kode <header>


<div id='menuwrapperpic'>
<div id='menuwrapper'>
<ul id='menubar'>
<li><a href='http://abrihandany.blogspot.com/'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgV9LBHvu8sdQS7vTtPd-fjQ5y-fDnAdKcEtzmisewUCI-n8kQZ0dqbBtRcg78v48zRbNcmNmk3uahsdF4OqlfO8oWdwo1euCB-vucg3Boe0CV5QYfhxLx62MfqQh1JpcKhjb4JCsP_Otw/s1600/home_white.png' style='padding:0px;'/>Home</a></li>
<li><a href='http://abrihandany.blogspot.com/2013/06/biodata-tentang-saya.html?max-results=10'>About Me</a></li>
<li><a class='trigger'>Kumpulan Cerita</a>
<ul>
<li><a href='http://abrihandany.blogspot.com/search/label/Cerita%20Bacaan?max-results=10'>Cerita Bacaan</a></li>
<li class='hr'/>
<li><a href='http://abrihandany.blogspot.com/search/label/Cerita%20Dewasa?max-results=10'>Cerita Dewasa</a></li>
<li class='hr'/>
<li><a href='http://abrihandany.blogspot.com/search/label/Cerita%20Seram?max-results=10'>Cerita Seram</a></li>
<li class='hr'/>
</ul>
</li>
<li><a class='trigger'>Komik Bahasa Indo</a>
<ul>
<li><a href='http://abrihandany.blogspot.com/2013/07/komik-shingeki-no-kyojin-bahasa.html'>Shingeki No Kyojin</a></li>
<li class='hr'/>
<li><a href='#/'>Bleach</a></li>
<li class='hr'/>
<li><a href='http://abrihandany.blogspot.com/2013/06/komik-khusus-dewasa.html'>Komik Khusus Dewasa</a></li>
<li class='hr'/>
</ul>
</li>
<li><a class='trigger'>Sejarah Anime-anime</a>
<ul>
<li><a href='http://abrihandany.blogspot.com/2013/07/komik-shingeki-no-kyojin-bahasa.html'>Shingeki No Kyojin</a></li>
<li class='hr'/>
<li><a href='http://abrihandany.blogspot.com/2013/07/sejarah-bleach.html'>Bleach</a></li>
<li class='hr'/>
<li><a href='http://abrihandany.blogspot.com/2013/06/sejarah-one-piece.html'>One Piece</a></li>
<li class='hr'/>
</ul>
</li>

5. Kemudian save/simpan

NB: Kode warna kuning adalah alamat blog anda dan alamat label blog anda jadi ganti dengan punya anda
     : Kode warna hijau adalah judul menu drop down jadi ganti sesuai punya anda

dan hasilnya akan sama seperti punya saya dan bila ada kekurangan anda bisa menambahkanya dengan cara mengedit kodenya, dan seandainya anda kurang mengerti anda bisa menanyakannya ke saya dengan cara berkomentar di kotak komentar,. secepatnya saya akan merespon komentar anda.

Ditulis Oleh : Unknown

Saat ini anda sedang membaca artikel yang berjudul Cara memasang menu drop down di atas header,, Semoga artikel ini dapat bermanfaat dan berguna untuk anda. Kritik dan saran silahkan kirim melalui kotak komentar di bawah ini ....

:: Thank you for visiting ! ::

0 komentar:

Posting Komentar

Terima Kasih Atas Kunjungannya dan Kesediaannya untuk Berkomentar pada Blog ini. Saya Sangat menghargai Setiap Komentar, Masukkan, Saran, dan Kritik yang sekiranya dapat Membangun Blog ini Agar Lebih Baik Lagi Kedepannya.

Saya akan berusaha untuk cepat menanggapi komentar anda

Terima Kasih atas Kunjungannya Sobat,,...
SALAM SUKSES

 
Support : Creating Website | Abri Pecinta Game Online
Copyright © 2012-2013. Abri Pecinta Game Online - All Rights Reserved
Security Officer Template Abri Pecinta Game Online
Proudly powered by Blogger