1. Pastikan anda sudah login ke Dashbord Blog
2. Dari Dashbord blog Pilih Templete kemudian pilih Edit HTML
3. Jangan lupa untuk backup Template terlebih dahulu agar aman saat percobaan
Nb: proses ini cukup rumit
4. Jika semua sudah sekarang Cari Kode ]]></b:skin> Gunakan tombol CTRL + F untuk mempermudah pencarian kode
5. 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/AVvXsEgW9iO-G8dqksZ4P7NXFvA8B5Pjx0CapIsGX12qJ-k0D_V8fhZRpe0H1YwDfWXCpQqWVckziceyaqB1hkhHwNCvonVcl_GfcOiUC_z0jNfgZnobST6gJYZatbUr-fPYhFqgY3sRI7jSmS8p/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/AVvXsEihgx6ryR9Q5V8hn0uLdsfXKkC8y7_piIhQmQL2OxjGmU0HdFTR-Sl1Y2BiwSsC38jvrGDTByDJAB_lyujruzMfAwV-dzWYfny5QG94idyD9nTvczFjCfInJDvQAW0PtwcZggpSXevkxBA/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:550;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;}
6. Kalau sudah, langkah selanjutnya cari salah satu kode berikut :
<div id='header-wrapper'>
(disini nanti letak kode menu dropdown)
</b:section>
</div>
Jika Tidak Ketemu Kode Diatas Cari Kode Yang Ini
<div class='header-outer'>
(disini nanti posisi kode menu dropdown)
</b:section>
</div>
7. Jika Sudah ketemu salah satu kode diatas letakan Kode dibawah ini dibawah salah satu kode Diatas
<div id='fixed'>
<div id='fixedinner'>
<div id='top-wrapper'>
<div id='topbar'>
<ul id='top'>
<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>
<li><a href='#'>Sub menu 1</a></li>
<li class='hr'/>
<li><a href='#'>Sub menu 2</a></li>
<li class='hr'/>
<li><a href='#'>Sub menu 3</a></li>
<li class='hr'/>
<li><a href='#'>Sub menu 4</a></li>
</ul>
</li>
<li><a class='arrow' href='#'><span>Menu 2</span>Keterangan Disini</a>
<ul>
<li><a href='#'>Sub menu 1</a></li>
<li class='hr'/>
<li><a href='#'>Sub menu 2</a></li>
<li class='hr'/>
<li><a href='#'>Sub menu 3</a></li>
<li class='hr'/>
<li><a href='#'>Sub menu 4</a></li>
</ul>
</li>
<li><a class='arrow' href='#'><span>Menu 3</span>Keterangan Disini</a>
<ul>
<li><a href='#'>Sub menu 1</a></li>
<li class='hr'/>
<li><a href='#'>Sub menu 2</a></li>
<li class='hr'/>
<li><a href='#'>Sub menu 3</a></li>
<li class='hr'/>
<li><a href='#'>Sub menu 4</a></li>
<li class='hr'/>
<li><a href='#'>Sub menu 5</a></li>
</ul>
</li>
</ul>
<br class='clearit'/>
</div>
<div style='clear:both;'/>
</div>
</div></div>
8. Sehingga susunannya seperti ini
<div class='header-outer'>
<div id='fixed'>
<div id='fixedinner'>
<div id='top-wrapper'>
<div id='topbar'>
<ul id='top'>
<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>
<li><a href='#'>Sub menu 1</a></li>
<li class='hr'/>
<li><a href='#'>Sub menu 2</a></li>
<li class='hr'/>
<li><a href='#'>Sub menu 3</a></li>
<li class='hr'/>
<li><a href='#'>Sub menu 4</a></li>
</ul>
</li>
<li><a class='arrow' href='#'><span>Menu 2</span>Keterangan Disini</a>
<ul>
<li><a href='#'>Sub menu 1</a></li>
<li class='hr'/>
<li><a href='#'>Sub menu 2</a></li>
<li class='hr'/>
<li><a href='#'>Sub menu 3</a></li>
<li class='hr'/>
<li><a href='#'>Sub menu 4</a></li>
</ul>
</li>
<li><a class='arrow' href='#'><span>Menu 3</span>Keterangan Disini</a>
<ul>
<li><a href='#'>Sub menu 1</a></li>
<li class='hr'/>
<li><a href='#'>Sub menu 2</a></li>
<li class='hr'/>
<li><a href='#'>Sub menu 3</a></li>
<li class='hr'/>
<li><a href='#'>Sub menu 4</a></li>
<li class='hr'/>
<li><a href='#'>Sub menu 5</a></li>
</ul>
</li>
</ul>
<br class='clearit'/>
</div>
<div style='clear:both;'/>
</div>
</div></div>
</b:section>
</div>
9. Sekarang Klik Simpan Template
10. Selesai dan Lihat hasilnya
</div>
9. Sekarang Klik Simpan Template
10. Selesai dan Lihat hasilnya
0 comments:
Post a Comment