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
Share
No comments:
Post a Comment