Cara Membuat Menu Slide Dropdown Di Blog

Satu lagi menu drop down dari hasil kreasi saya, namanya 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 anda bisa manfaatkan slide menu drop down ini untuk web ataupun blog anda.

LIHAT DEMO

Nah..., bila anda berminat memasang slide menu drop down ini, silahkan anda bisa ikuti langkah - langkah sebagai berikut :

1. Login ke blogger dengan ID anda.

2. Klik Rancangan.

3. Dan KLik tab Edit HTML.

4. Seperti biasa alangkah baiknya setiap edit Html, Download dulu
Template Lengkap (back-up Template) agar template aman, bila terjadi
kesalahan.

5. Jangan lupa Klik tombol "Expand Widget Templates"

6. Cari kode di bawah ini atau yang mirip dengan kode ini :

</head>

7. Copy kode dibawah ini dan paste sebelum kode </head>:

8. Lalu copy lagi kode dibawah ini dan paste setelah kode diatas :

<style type='text/css'>

/*widget Fitur slide-menu-drop-down by noer Ceo http://www.carabuatwebgratis.com */



ul.slide-menu-drop-down li.bg-icon1{


    background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4iIRP0thj8mW0KkcHWtWnCPcfViRVoezm7tAbd2EjeFHJYhzjBtUiguclXdC4RFopP6HyfczhlZnv26q7gomNzGYGGKJITt2Cf_eWc17Kh53IIeIcJ_jFWzKIjXqX2SDUng3eYc2F1zTc/s104/photos.png) no-repeat;

}



ul.slide-menu-drop-down li.bg-icon2{

    background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKdSySZoh80BJEmqxRWPIjw5uxdJdcF4CgGjCl6TJJ0j4kXoG1oi3pPqG0GQXwep7BHnjr16uadE7zId05lkkPI6C_jPvaIGGe2TaVM1YENvHWyBKZim1c-pElLkGvGgJc3I_08HZzXaDY/s104/find.png) no-repeat;

}






ul.slide-menu-drop-down li.bg-icon3{

    background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAYwxRNG9DOs8D4fzLld_w9XiVjYUQJ_H0AmsZ35k6fH1IZIVadf-yz1tbFZfjjI6PoV_65_B27SApCf5rXUixReix9dSjLQEzw_2BB38ut9L3S3qM1QAAPNEmhp5RQ-iZc7Q3u3UeGeX3/s104/mail.png) no-repeat;

}



ul.slide-menu-drop-down li.bg-icon4{

    background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyObQ2FTI1wZ1ukLh6FWohaVn6a6EeFgaCh0cZQvefiTg-rkasZecZ9EGjJAD85FEwbZJ_fm5QSH32i-kpjBLIW_0yvP8yKK5DvvR-exsTBm9wJS7qWD_iJrxRvSpa6cfb4Ul-IqRwrXzw/s104/about.png) no-repeat;


}



ul.slide-menu-drop-down li.bg-icon5{

    background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0JgDCSFi6vuXSxOuFm3RKq0xe0sWNmS2x28vmSmU4F7v2DBgh_q_xt22RsEpIvq0_QHX9zPCHkHIbgvefPzyr7EzzuaZsPNbz-so-J3sDZSY4R5FkGUbkL6RUhhMAQNkNh2JVBoHgqXuC/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 anda menginginkan, ganti dengan milik anda. Tapi ingat, bentuk icon sebaiknya bulat dengan ukuran icon = 50px, dan dengan format file PNG, agar dapat sesuai dengan tampilan menu ini.



9. SIMPAN TEMPLATE.



Langkah selanjutnya anda tinggal menambahkan kode dibawah ini pada gadget, dan letak gadget sesuka anda akan menaruh menu ini dimana...OK...!!

Silahkan ikuti langkah berikut :

1. Klik Rancangan dan pilih Elemen Laman

2. Tambah Gadget

3. Pada jendela baru anda Anda 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>

Note :

• 
  
  Silahkan anda ganti Teks berwarna diatas.

5. Simpan.