Tutorial Dropdown Link Auto Buka Tutup

Tutorial kali ini tentang cara membuat link list dropdown dengan buka tutup otomatis saat kursor diletakkan pada tombol. Tujuan dropdown link ini agar blog terlihat lebih simple, rapi serta tidak tampak menumpuk dengan link list yang panjang kebawah sehingga blog terasa seperti halaman yang menjulang ke bawah penuh dengan link hingga membuat pengunjung lelah untuk scroll halaman blog. Hal ini dapat di sederhanakan dengan link list drop down otomatis buka tutup.

Sebagai demonya, bisa dilihat di sidebar kanan blog ini pada tombol "GARUX LINK"

Berikut adalah cara-cara membuatnya :

• Masuk ke halaman Blogger
• Lalu pilih opsi Theme/Tema di sebelah kiri
• Tekan titik tiga dan pilih Edit HTML
• Cari kode </b:skin> (cari menggunakan CTRL+F)
• Letakkan kode berikut di atas kode */]]></b:skin>

.garuxbtn {background-color: black; color: white; font-weight:bold; width:300px; border: none; cursor: pointer; padding:10px; margin-top:0px;}
.garuxdd { position: relative; display: inline-block;}
.garuxdd-child { display: none; background-color: white; min-width: 300px;}
.garuxdd-child a {color: #333; padding: 10px 20px; text-decoration: none; display: block; border-bottom:1px dashed #ddd;}
.garuxdd:hover {display: block;}

Nb : Ganti tulisan berwarna merah sesuai ukuran sidebar anda

• Kemudian cari kode </HTML>
• Letakkan kode berikut di atas kode </HTML>

<script src='https://code.jquery.com/jquery-3.4.1.min.js'/>
<script>
      $(document).ready(function() {
         $(&quot;.garuxdd&quot;).hover(function() {
            $(this).find(&quot;.garuxdd-child&quot;).slideToggle(&quot;slow&quot;);
      });
   });
</script>

• Lalu Simpan/Save
• Langkah selanjutnya, pilih opsi Layout/Tata Letak disebelah kiri
• Klik Add gadget sesuai posisi yang anda inginkan
• Pilih opsi HTML/Javascript
• Masukkan kode dibawah ini :

<div class="garuxdd">
    <button class="garuxbtn">JUDUL LINK LIST</button>
        <div class="garuxdd-child">
            <a href="LINK 1">NAMA WEBSITE 1</a>
            <a href="LINK 2">NAMA WEBSITE 2</a>
            <a href="LINK 3">NAMA WEBSITE 3</a>
            <a href="LINK 4">NAMA WEBSITE 4</a>
            <a href="LINK 5">NAMA WEBSITE 5</a>
        </div>
</div>

Nb : 

Ganti Tulisan berwarna biru dengan Judul link anda

Ganti tulisan berwarna merah dengan URL Link anda

Ganti tulisan berwarna Hijau dengan nama website anda

Jumlah link bisa ditambahkan sebanyak mungkin sesuai keperluan masing-masing

• Jika sudah, silakan di save
• Selesai

Silakan cek hasilnya di blog anda.

Dropdown link auto buka tutup sudah terpasang di blog anda, semoga bisa mempercantik blog anda agar bisa tampil lebih elegan dan simple. Semoga sharing tutorial ini bisa bermanfaat untuk kita semua, Sekian dan terimakasih

Share this on : FacebookGoogle+