News Update :

Friday, December 23, 2011

Membuat Slide Menu Drop Down di Blog

Share this article :

10:27 |


Slide Menu Drop Down dibuat menggunakan fitur CSS dan beberapa HTML, cara kerjanya ringan dan memiliki efek slide yang bervariatif. Pengaturan pada atribut transitionnya juga pas, selain itu kombinasi warna hijau dan putih serta menggunakan background grafis yang sesuai, sehingga menu ini tampil dan bekerja sangat dinamis sekali.
Silahkan sobat bisa manfaatkan slide menu drop down ini untuk web ataupun blog sobat.

LIHAT DEMO

Nah Bila sobat berminat memasang nya di blog sobat silahkan ikuti langkah-langkah di bawah ini :
1. Login ke blogger dulu
2. Pilih menu blog sobat dan pilih Tamplate --> Edit HTML
3. Jangan lupa Klik tombol "Expand Widget Templates"
4. Lalu cari kode di bawah ini
</head>

5. Copy kode dibawah ini dan pastekan sebelum kode </head> 



6. Lalu Copy kode dibawah ini dan pastekan setelah kode diatas
<style type='text/css'>
/*widget Fitur slide-menu-drop-down by http://cheatssoul.blogspot.com/ */

ul.slide-menu-drop-down li.bg-icon1{
    background:transparent url(https://lh6.googleusercontent.com/-bjv4cfs6gZA/Tj_4WFkaQZI/AAAAAAAAA8o/byDvNourq4M/s104/photos.png) no-repeat;
}

ul.slide-menu-drop-down li.bg-icon2{
    background:transparent url(https://lh5.googleusercontent.com/-10LRbwRfamA/Tj_4UnnPvUI/AAAAAAAAA8c/du4n8lBbOY0/s104/find.png) no-repeat;
}


ul.slide-menu-drop-down li.bg-icon3{
    background:transparent url(https://lh6.googleusercontent.com/-nV8YCGXkKOQ/Tj_4V2k_tcI/AAAAAAAAA8k/Fsnx57GJXhw/s104/mail.png) no-repeat;
}

ul.slide-menu-drop-down li.bg-icon4{
    background:transparent url(https://lh5.googleusercontent.com/-nf4tyN_F0vw/Tj_4PLL13gI/AAAAAAAAA8Y/EEJ_XMhaIVE/s104/about.png) no-repeat;
}

ul.slide-menu-drop-down li.bg-icon5{
    background:transparent url(https://lh6.googleusercontent.com/-VZcGH2Z_g4M/Tj_4VLQuryI/AAAAAAAAA8g/3ZT1c6kr6k4/s104/home.png) no-repeat;
}
</style>
Catatan :
Teks warna merah diatas adalah ULR Icon menu yang akan tampil pada slide menu drop down. Silahkan bila sobat menginginkan, ganti dengan milik sobat. Tapi ingat, bentuk icon sebaiknya bulat dengan ukuran icon = 50px, dan dengan format file PNG, agar dapat sesuai dengan tampilan menu ini.

7. Simpan Tamplate

Langkah selanjutnya sobat tinggal menambahkan kode dibawah ini pada gadget, dan letak gadget sesuka sobat Silahkan ikuti langkah berikut :
1. Dari menu blog sobat pilih Layout
2. Lalu Tambah Gadget
3. Pada jendela baru sobat Sobat pilih gadget HTML/JavaScript 
4. Copy dan paste kode dibawah ini pada gadget tersebut :

<ul class="slide-menu-drop-down" id="slide-menu-drop-down">

<li class="bg-icon1">
<div class="judul">Album</div>
<div class="sub-menu">
<p><a href="ULR ARTIKEL">Sub Menu 1</a></p>
<p><a href="
ULR ARTIKEL">Sub Menu 2</a></p>
<p><a href="ULR ARTIKEL">Sub Menu 3</a></p>
<p><a href="ULR ARTIKEL">Sub Menu 4</a></p>
<p><a href="ULR ARTIKEL">Sub Menu 5</a></p>

<p><a href="ULR ARTIKEL">Sub Menu 6</a></p>
<p><a href="
ULR ARTIKEL">Sub Menu 7</a></p>
<p><a href="ULR ARTIKEL">Sub Menu 8</a></p>

</div>
</li>

<li class="bg-icon2">
<div class="judul">Explorer</div>
<div class="sub-menu">
<p><a href="ULR ARTIKEL">Sub Menu 1</a></p>
<p><a href="
ULR ARTIKEL">Sub Menu 2</a></p>
<p><a href="ULR ARTIKEL">Sub Menu 3</a></p>
<p><a href="ULR ARTIKEL">Sub Menu 4</a></p>
<p><a href="ULR ARTIKEL">Sub Menu 5</a></p>

</div>
</li>

<li class="bg-icon3">
<div class="judul">Kontak</div>
<div class="sub-menu">
<p><a href="ULR ARTIKEL">Sub Menu 1</a></p>
<p><a href="
ULR ARTIKEL">Sub Menu 2</a></p>
<p><a href="ULR ARTIKEL">Sub Menu 3</a></p>
<p><a href="ULR ARTIKEL">Sub Menu 4</a></p>
<p><a href="ULR ARTIKEL">Sub Menu 5</a></p>

</div>
</li>

<li class="bg-icon4">
<div class="judul">About Me</div>
<div class="sub-menu">
<p><a href="ULR ARTIKEL">Sub Menu 1</a></p>
<p><a href="
ULR ARTIKEL">Sub Menu 2</a></p>
<p><a href="ULR ARTIKEL">Sub Menu 3</a></p>
<p><a href="ULR ARTIKEL">Sub Menu 4</a></p>
<p><a href="ULR ARTIKEL">Sub Menu 5</a></p>

</div>
</li>

<li class="bg-icon5">
<div class="judul">Home</div>
<div class="sub-menu">
<p><a href="ULR ARTIKEL">Sub Menu 1</a></p>
<p><a href="
ULR ARTIKEL">Sub Menu 2</a></p>
<p><a href="ULR ARTIKEL">Sub Menu 3</a></p>
<p><a href="ULR ARTIKEL">Sub Menu 4</a></p>
<p><a href="ULR ARTIKEL">Sub Menu 5</a></p>
</div>
</li>

</ul>
Catatam :
  • Silahkan sobat ganti Teks berwarna diatas.
5. Simpan.

Luangkan waktu sobat untuk memberi komentar

Note :- Kindly g+1 this post if you found it useful
Euro Live Streaming
You Might Also Like :


2 comments

December 23, 2011 at 10:43 AM  

Wahh,,, Infonya bagus sekali gan,,,,!!
terus berkarya

December 23, 2011 at 1:41 PM  

@Birrul Walidain Makasih sob..

Post a Comment