Cara Membuat Tombol Dropdown (Show Hide) Keren di Blog

Anirocksite.com - Pada postingan kali ini saya akan membagikan sebuah tutorial bagaimana caranya membuat tombol Dropdown (Show Hide) dihalaman posting Blogger. Tutorial ini hasil request dari salah satu anggota Grup blogger yang ada di WA saya, nah jadi saya bikinin.

Tombol Dropdown yang akan saya bagikan ini kurang lebih hasilnya sama seperti tombol spoiler yang pernah kamu lihat di artikel tutorial tutorial blog di web lain, namun agak sedikit berbeda karena efek tombolnya dropdown atau jatuh kebawah, atau sebagai DEMOnya kamu dapat menekan tombol dibawah ini untuk melihat hasilnya

Arittakeno yume o kakiatsume
sagashi mono sagashini yuku no sa ONE PIECE

rashinban nante jyutai no moto
netsu ni ukasare kaji o toru no sa

HOKORI ka butteta takara no chizu mo
tashikameta no nara densetsu jyanai

kojin teki na arashi wa dareka no
BIORHYTHM nokkatte
omoi sugose ba ii

arittakeno yume o kakiatsume
sagashi mono sagashini yuku no sa
POCKET no COIN soreto
YOU WANNA BE MY FRIEND?
WE ARE, WE ARE ON THE CRUISE! WE ARE!

zembu mani ukete shinji chattemo
kata o osarete iippo LEAD sa

Nah seperti itulah hasilnya yang akan saya bagikan kali ini (Btw isi dari tombol diatas lirik One Piece :v). Selain menyembunyikan Teks, kamu juga dapat menyisipkan gambar didalam tombol tersebut. Nah jika kamu tertarik yuk ikuti langsung tutorial dibawah ini.

Cara Membuat Tombol Dropdown Dihalaman Posting Blog

1. Pertama, login terlebih dahulu ke Blogger,
2. Pada dashboard Blogger pilih Tema ⇒ Edit HTML,
3. Kemudian kamu copy kode CSS dibawah ini dan letakkan tepat diatas kode </b:skin> atau </style>,

/* Button Dropdown By Anirocksite */
.flippanel {
    text-align: left;
    margin-top: 15px;
    padding: 4px;
    display: none;
}
.centerflip {
    text-align: center;
}
.flippy {
    text-align: center;
}
button.flippy {
    width: 100%;
    background: #FF69B4;
    color: #fff;
    text-align: center;
    border: 0px;
    border-radius: 4px;
    padding: 5px 10px;
    font-size: 16px;
    font-weight: 500;
    vertical-align: middle;
    cursor: pointer;
    outline: none;
}
.button-preview {
    color: #393939;
    font-family: inherit;
    font-size: 15px;
    font-weight: normal;
    padding: 10px;
    text-align: left;
}

4. Setelah meletakkan CSS, letakkan juga kode Javascript dibawah ini dan letakkan tepat diatas </body>,

<script>
$(function(){
  $(".flippy").on("click", function(){
    $(this).parent().children(".flippanel").slideToggle("normal");
  });
});
</script>

5. Setelah itu simpan atau save template.

Belum Selesai, sekarang kembali ke Beranda Blogger, pilih Posting ⇒ Entri Baru ⇒ Pilih mode penulisan HTML.

Untuk cara memanggil tombol dropdown tersebut, copy kode HTML dibawah ini, sekalian aja kamu ingat biar gak ribet nantinya,

<div class="centerflip">
<button class="flippy">Preview ▾</button>
<div class="flippanel">
<div class="button-preview">
ISI TEKS ATAU GAMBAR KAMU DISINI
</div>
</div>
</div>

Nah terakhir tinggal publish artikel dan lihat hasil tombol Dropdown yang kamu buat.

Sekian tutorial bagaimana cara membuat tombol dropdown dihalaman posting yang dapat saya bagikan untuk kamu, dan Semoga bermanfaat :D