arsip-mu: MEMBUAT MENU DROPDOWN KEREN DI BLOGSPOT

Pertama, pastikan kamu sudah login ke Dashbord Blog kamu
Dari Dashbord blog kamu Pilih Templete untuk mengakses halaman Edit HTML
Jangan lupa untuk membeckup Template terlebih dahulu supaya tidak kesal nanti kalau gagal, gehehe
Jika semua sudah, sekarang Cari Kode ]]></b:skin> , dengan cara tekan tombol CTRL + F atau F3 kemudian ketikan yang ingin anda cari.
Jika kode sudah ketemu,, Copy kode berikut dan letakan diatas kode ]]></b:skin>

/* Horyzontal Droupdown menu

----------------------------------------------- */

#top-wrapper{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkLJ0q50iM-QZUX2heiCRjpPgyMBzwKi67dNGBUPTekwiTshy4jzODZw6NU76aQJr_bhZBfFFXhE9XQA4tvWGZcOdsHz5SjswvlChE7-BA5ZJW70b7lSo9GkG-WkHJE3bFKQCNrwvaPJlD/s1600/menutop.png) repeat-x;width:100%;margin:0 auto;padding:0 auto;-moz-box-shadow:0 3px 3px 3px rgba(0,0,0,0.4);-webkit-box-shadow:0 3px 3px 3px rgba(0,0,0,0.4);border-bottom:1px solid #444;border-top:3px solid #f1c822}

#topbar{width:980px;height:40px;margin:0 auto}

#top{width:100%}

#top,#top ul{list-style:none;font-family:Arial, serif;margin:0;padding:0}

#top a{display:block;text-decoration:none;font:normal 11px Arial;text-transform:none;color:#CECECF;border-right:1px solid #484747;border-left:1px solid #191919;padding:7px 10px 7px}

#top a.arrow{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgSlXBjcM2mmGNdwdlWVLNIsDGYHHpv2cTK51Grjzp052Durqn3XmVNqrog7EopdphSnnXuoq9nKnSsyS4988yrjtxiunE9OMqkFl23pLxMAhUUXoYhWiHmHXaQi1RA6xZjWHTqfjLN4Y/s1600/arrow_white.gif);background-repeat:no-repeat;background-position:right center;padding:7px 24px 7px 10px}

#top li{float:left;position:static;width:auto}

#top li ul,#top ul li{width:170px}

#top 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}

#top li ul{z-index:100;position:absolute;display:none;background:#222;padding-bottom:0px;-moz-box-shadow:0 2px 2px rgba(0,0,0,0.4);-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.4)}

#top li:hover a,#top a:active,#top a:focus,#top li.hvr a{background-color:#222;color:#fff}

#top li:hover ul,#top li.hvr ul{display:block}

#top li:hover ul a,#top li.hvr ul a{color:#edfdfd;background-color:transparent;text-decoration:none}

#top li ul li.hr{border-bottom:1px solid #333;border-top:1px solid #000;display:block;font-size:1px;height:0;line-height:0;margin:0px 0}

#top ul a:hover{background-color:#555!important;color:#fff!important;text-decoration:none}

#top a span,#top a.arrow span{font:bold 12px Arial;color:#888;display:block;line-height:16px;text-transform:uppercase;text-shadow: 1px 2px 2px #000}

#top li:hover a span,#top li:hover a.arrow span{color:#f1c822}

.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}

.clearfix{display:inline-block}

#inner{padding-top:40px;}

#fixed {position:fixed;top:0;left:0;width:100%;height:40px;z-index:999;}

#fixedinner{text-align:center;background:transparent;height:40px;position:relative;z-index:999;}

* html, * html body{overflow-y:hidden;height:100%;}

* html #fixedinner{margin-right:-143px;voice-family: "\"}\""; voice-family:inherit; }

* html #fixedinner{margin-right:17px;}

* html #fixed {position:absolute;}

Kode Warna Kuning diatas adalah ukuran panjang menu
Kalau sudah, langkah selanjutnya cari salah satu kode berikut :

(disini nanti letak kode menu dropdown)

</b:section>

</div>

Jika Tidak Ketemu Kode Diatas Cari Kode Yang Ini

(disini nanti posisi kode menu dropdown)

</b:section>

</div>

Jika Sudah ketemu salah satu kode diatas letakan Kode dibawah ini dibawah salah satu kode Diatas

<li><a href='/'><span>Welcome</span>Homepage</a></li>

<li><a href='#'><span>This is</span>About Us</a></li>

<li><a class='arrow' href='#'><span>Menu 1</span>Keterangan Disini</a>

<ul>

</ul>

</li>

<li><a class='arrow' href='#'><span>Menu 2</span>Keterangan Disini</a>

<ul>

</ul>

</li>

<li><a class='arrow' href='#'><span>Menu 3</span>Keterangan Disini</a>

<ul>

</ul>

</li>

</ul>

</div>

</div>

</div></div>

Sehingga susunannya menjadi seperti ini

<li><a href='/'><span>Welcome</span>Homepage</a></li>

<li><a href='#'><span>This is</span>About Us</a></li>

<li><a class='arrow' href='#'><span>Menu 1</span>Keterangan Disini</a>

<ul>

</ul>

</li>

<li><a class='arrow' href='#'><span>Menu 2</span>Keterangan Disini</a>

<ul>

</ul>

</li>

<li><a class='arrow' href='#'><span>Menu 3</span>Keterangan Disini</a>

<ul>

</ul>

</li>

</ul>

</div>

</div>

</div></div>

</b:section>

</div>

selesai deh ^_^
happy creation !

Note : artikel ini di kutip dari dapur-tutorial dengan perubahan seperlunya.

iklan 1

MEMBUAT MENU DROPDOWN KEREN DI BLOGSPOT

No comments:

Post a Comment