Fungsi Dibuatnya Menu DropDown adalah ketika anda
sudah mempunyai konten yang banyak dan ingin mempermudah pengunjung dalam mengakses
artikel atau page/halaman yang anda pilih. sehingga konten blog anda lebih terorganisir. Untuk membuat menu
Dropdown Horizontal di blogger langkahnya adalah sebagai berikut
1.
Login Ke Blogger
2.
Klik Menu
Template > Edit HTML
3.
Setelah kotak dialog edit HTML muncul
centang expland template widget
4.
Selanjutnya tekan ctrl+F untuk melakukan
pencarian kode dan cari ]]></b:skin>
5.
Letakan Kode ini diatas ]]></b:skin>
/*
Menu Horizontal Dropdown ----------------------------------------------- */
#menuwrapperpic{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgESDti5d_RDndO-OWUMjoI7OfnGGLa0Cq9YSArd4QZdTvw-Xj9sSUZZIxEXcniZrzikPiV8sF5sWgrHvLWR_NF1e7t02nxu9b_5iZJv8Gf5wEcy3w8G9a1ibDz5ePWbCCJUPX3TefRHWG1/s1600/navi.png)
repeat-x;width:1060px;margin:0 auto;padding:0 auto}
#menuwrapper{width:1060px;height:37px;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/AVvXsEjKNy1qW9WbBNFy835nhh1pfTgjWbehqOJZBancBgJMh8ryAgC3T9j_FTZI2dwjnHf2fCME8JMgXE4CDWveVdMsaZOUNY9-Fi2RaYgA3_gpd3MlFg7kbOJt0MiQjDk5V2jQ85Qy8aibhqo/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}
6.
Selanjutnya Klik Simpan Template
7.
Langkah Selanjutnya kita akan membuat menu drop
down nya, masuk ke menu tata letak dan tambahkan Gadget HTML/JavaScript
8.
Klik Tombol + dan Masukan Script ini
<div
id='menuwrapperpic'>
<div
id='menuwrapper'>
<ul id='menubar'>
<li><a
href='http://padepokan-it.blogspot.com/search/label/Apex'>Apex</a></li>
<li><a
class='trigger'>Database</a>
<ul>
<li><a href='http://padepokan-it.blogspot.com/search/label/Konsep%20Database'>Konsep
Database</a>
</li>
<li class='hr'/>
<li><a
href='http://padepokan-it.blogspot.com/search/label/SQL'>SQL,PL/SQL</a></li>
<li class='hr'/>
<li><a
href='http://padepokan-it.blogspot.com/search/label/Oracle'>Oracle</a></li>
<li class='hr'/>
<li><a href='#'>SQL Server</a></li>
<li class='hr'/>
<li><a
href='http://padepokan-it.blogspot.com/search/label/PostgreSQL'>PostgreSQL</a></li>
<li class='hr'/>
<li><a
href='http://padepokan-it.blogspot.com/search/label/MySQL'>MySQL</a></li>
</li></li></li></li></li></ul>
</li>
<li><a class='trigger'>Jaringan</a>
<ul>
<li><a
href='http://padepokan-it.blogspot.com/search/label/Konsep%20Jaringan'>Konsep
Jaringan</a></li>
<li class='hr'/>
<li><a href='http://padepokan-it.blogspot.com/search/label/Network'>Jaringan
LAN</a></li>
<li class='hr'/>
<li><a
href='http://padepokan-it.blogspot.com/search/label/Wireless%20Network'>Jaringan
Wireless</a></li>
<li class='hr'/>
<li><a
href='http://padepokan-it.blogspot.com/search/label/Keamanan%20Jaringan'>Keamanan
Jaringan</a></li>
</li></li></li></ul>
</li>
<li><a
class='trigger'>Sistem Operasi</a>
<ul>
<li><a
href='http://padepokan-it.blogspot.com/search/label/Linux'>Linux</a></li>
<li class='hr'/>
<li><a
href='http://padepokan-it.blogspot.com/search/label/Windows'>Windows</a></li>
<li class='hr'/>
<li><a href='http://padepokan-it.blogspot.com/search/label/Mikrotik'>Mikrotik</a></li>
</li></li></ul>
</li>
<li><a
href='http://padepokan-it.blogspot.com/search/label/Sistem%20Informasi'>Sistem
Informasi</a></li>
<li><a class='trigger'>Web
Master</a>
<ul>
<li><a href='#'>Desain
Web</a></li>
<li class='hr'/>
<li><a
href='#'>Pemgrograman
Web</a></li>
</li></ul>
</li>
<li><a
class='trigger'>Multimedia</a>
<ul>
<li><a href='#'>Desain
Grafis</a></li>
<li class='hr'/>
<li><a
href='#'>Animasi</a></li>
</li></ul>
</li>
<li><a
class='trigger'>Blackberry</a>
<ul>
<li><a
href='#'>Themes</a></li>
<li class='hr'/>
<li><a
href='#'>Software</a></li>
</li></ul>
</li>
<li><a
class='trigger'>Pemrograman</a>
<ul>
<li><a href='#'>Visual
Basic</a></li>
<li class='hr'/>
<li><a
href='#'>Delphi</a></li>
<li class='hr'/>
<li><a href='#'>MS
Access</a></li>
</li></li></ul>
</li>
<li><a
href='http://padepokan-it.blogspot.com/search/label/Tutorial%20Blog'>Blogger</a></li>
</ul>
</div>
</div>
Catatan : Nama-Nama Menu Dan Linknnya
sesuaikan dengan Blog anda
9.
Letakan Gadget Tersebut dibawah Laman
10.
Selanjutnya Simpan, dan lihat hasilnya seperti
tampak pada gambar dibawah ini
Selamat Mencoba
No comments:
Post a Comment