Tuesday, August 27, 2013

Cara membuat menu dropdown vertikal di sidebar


بِسْــــــــــــــــمِ ﷲِ

Untuk mempercantik blog, dan merapikan tampilan blog agar tidak penuh dengan teks artikel yang menempel sehingga membuat blog terasa sumpek, biasanya di sederhanakan dengan tampilan menu dropdown horizontal bawah header atau dengan menu dropdown vertikal di sidebar. Adapun cara membuat menu dropdown vertikal di sidebar untuk mempercantik blog anda bisa di copy scriptnya di bawah ini. Berikut contoh gambar menu dropdown vertikal.
menu dropdown vertikal di sidebar


Untuk cara memasang scriptnya sebagai berikut :
1. Masuk blogger.
2. Edit html blog.
3. Cari kode </html> dan letakkan kode di bawah ini di atas kode </html>
Klik show untuk melihat
 <style type='text/css'>
.glossymenu, .glossymenu li ul{
list-style-type: none;
margin: 0;
padding: 0;
width: 185px; /*WIDTH OF MAIN MENU ITEMS*/
border: 0px solid black;
}

.glossymenu li{
position: relative;
}

.glossymenu li a{
background: white url(http://kentut.googlecode.com/files/glossyback.gif) repeat-x bottom left;
font: bold 12px Verdana, Helvetica, sans-serif;
color: white;
display: block;
width: auto;
padding: 8px 0;
padding-left: 10px;
text-decoration: none;
}

.glossymenu li ul{ /*SUB MENU STYLE*/
position: bottom;
width: 190px; /*WIDTH OF SUB MENU ITEMS*/
left: 0;
top: 0;
display: none;
}

.glossymenu li ul li{
float: bottom;
}

.glossymenu li ul a{
width: 180px; /*WIDTH OF SUB MENU ITEMS - 10px padding-left for A elements */
}

.glossymenu .arrowdiv{
position: absolute;
right: 2px;
background: transparent url(http://kentut.googlecode.com/files/arrow.gif) no-repeat center right;
}

.glossymenu li a:visited, .glossymenu li a:active{
color: white;
}

.glossymenu li a:hover{
background-image: url(http://kentut.googlecode.com/files/glossyback2.gif);
}

/* Holly Hack for IE \*/
* html .glossymenu li { float: left; height: 1%; }
* html .glossymenu li a { height: 1%; }
/* End */
</style>
<script src='http://kentut.googlecode.com/files/cssvertikalmenu.js' type='text/javascript'>
</script>

4. Masuk ke tata letak, dan tambah gadget atau add gadget JAVA/HTML
5. Copy kode script di bawah ini kedalam gadget JAVA/SCRIPT
Klik show untuk melihat
 <ul id="verticalmenu" class="glossymenu">
<li><a href="#">Profil</a></li>
<li><a href="url artikel anda" >Admin</a></li>
<li><a href="#">Download</a>
    <ul>
    <li><a href="#">Ebook</a></li>
    <li><a href="url artikel anda">SOfware</a></li>
    <li><a href="#">Game</a></li>
    </ul>
    </li>
<li><a href="#">Mata Pelajaran</a>
    <ul>
    <li><a href="url artikel anda">Agama</a></li>
    <li><a href="url artikel anda">PKn</a></li>
    <li><a href="url artikel anda">IPA</a></li>
    <li><a href="url artikel anda">IPS</a></li>
    <li><a href="url artikel anda">Matematika</a></li>
    <li><a href="url artikel anda">TIK</a></li>
    <li><a href="url artikel anda">Bahasa Indonesia</a></li>
    <li><a href="url artikel anda">Bahasa Inggris</a></li>
    <li><a href="url artikel anda">Seni Budaya</a></li>
    </ul>
</li>
<li><a href="#">INFO</a>
    <ul>
    <li><a href="url artikel anda">Liburan</a></li>
    <li><a href="url artikel anda">Tugas</a></li>
    <li><a href="url artikel anda">Kegiatan</a></li>
    <li><a href="url artikel anda">Nilai</a></li>
    </ul>
</li>
<li><a href="#">Lap. Uang KAS</a>
    <ul>
    <li><a href="url artikel anda">KAS Masuk</a></li>
    <li><a href="url artikel anda">KAS Keluar</a></li>
    </ul>
    </li>
<li><a href="#">Cerita</a>
    <ul>
    <li><a href="url artikel anda">Fiksi</a></li>
    <li><a href="url artikel anda">Non Fiksi</a></li>
    <li><a href="url artikel anda">Sejarah</a></li>
    <li><a href="url artikel anda">Lucu</a></li>
    </ul>
</li>
</ul><br/>
<a href="http://gaptect.com"></<h5 style="opacity: 0; filter: alpha(opacity=10); width: 100%; font-size: 8pt;">gaptect</h5></a>

6. Lalu di simpan

Keterangan :
Untuk yang berwarna merah bisa di ganti dengan url arikel anda.  dan yang berwarna biru bisa di gani dengan kategori atau judul artikel blog anda
Terima kasih telah mampir dan membaca artikel Cara membuat menu dropdown vertikal di sidebar dengan URL http://www.gaptect.com/2013/08/cara-membuat-menu-dropdown-vertikal-di.html ,Jika artikelnya menarik, silahkan disebarkan, asalkan tidak merugikan blog gaptect. Pahamkan maksud saya..?

-------------------------Please Share and Your Comment For This Article-------------------------
Don't Click

7 comments:

  1. keren nih mas..asli saya tidak bisa apa-apa kalau masalah ginian, manut sajal mas. hehehe

    ReplyDelete
  2. Replies
    1. kenapa mau di tandingi.. wong saya juga gak faham

      Delete
  3. menu down ini tidak resposive ya mas?

    ReplyDelete
    Replies
    1. mungkin mba.. soalnya belum di coba.. tapi coba aja di tambah scriptnya

      Delete

PERHATIAN
Tidak usah berkomentar ya.. capek membalasnya..

DMCA.com Submit Bing

Link Partner


FreeDownload |Zachflazz, Blog motivasi | A Than Javarif | Blognya Agus Setya Fakhruddin, mas agus | Catatan kecilku, mba indah | Blogs Of Hariyanto |