Cara Membuat Tombol Show Hide atau Spoiler Keren di Postingan Blog

Cara Membuat Tombol Show Hide atau Spoiler Keren di Blog - Tombol Show Hide atau bisa disebut juga tombol spoiler adalah tombol yang berfungsi untuk menyembunyikan atau menampilkan sebuah konten antara lain teks, video, atau gambar. Sebuah gambar atau teks akan muncul apabila fungsi show hide di klik begitu pula untuk menyembunyikannya juga di klik kembali.

Kenapa harus menggunakan button show hide atau spoiler? Pernahkah kalian berselancar ke website forum seperti kaskus atau ads id? Biasanya banyak dari thread atau postingan di dalamnya menggunakan fitur add spoiler. Tujuannya agar ketika memuat halaman postingan lebih ringan dan juga menyingkat panjang artikel agar lebih simpel. Nah maka dari itu Kita aplikasikan fungsi tombol show hide tersebut ke dalam blog Kita. Untuk cara membuat spoiler di blog sebenarnya tidak sulit, tetapi Kali ini akan Saya berikan tutorial mengenai cara membuat tombol show hide keren di blog.

Terinspirasi dari tombol spoiler di blog Arlina yang menurut Saya keren dan juga responsive, maka dari itu Saya berikan cara membuat tombol spoiler keren seperti milik Arlina design. Mari simak sampai selesai.

Cara Membuat Tombol Show Hide Spoiler di Blog

#1 Buka dashbor blogger

#2 Pilih Tema>Edit HTML

#3 Letakkan kode CSS di bawah ini sebelum kode ]]></b:skin> atau </style>

/* Animation */
@keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}
#flippy{text-align:center;margin:auto;display:inline}#flippy button{background:#fff;background-image:linear-gradient(to right,#34ea78 0%,#2da7e3 51%,#34ea78 100%);background-size:200% auto;color:#fff;display:block;width:100%;padding:15px;font-weight:700;font-size:14px;text-align:center;text-transform:uppercase;letter-spacing:0.5px;margin:10px auto;border-radius:3px;box-shadow:0 2px 3px rgba(0,0,0,0.06),0 2px 3px rgba(0,0,0,0.1);transition:all .3s}#flippy button:hover,#flippy button:focus{background-position: right center;outline:none;opacity:1;color:#fff}#flippanel{display:none;padding:10px 0;text-align:left;background:#fff;margin:10px 0 0 0}#flippanel img{background:#f5f5f5;margin:10px auto}

#4 Letakkan kode di bawah ini sebelum kode </body>

<script>
$(document).ready(function(){$("#flippy").click(function(){$("#flippanel").slideToggle("normal")})});
</script>

#5 Letakkan kode HTML di bawa ini di tab html ketika membuat postingan

<div id="flippy"><button>Klik untuk melihat semua pilihan animasi</button></div><div id="flippanel"> Masukkan Gambar, Teks, Video di sini
</div>

 Berikut hasilnya

Running Dot

See the Pen Running Dots by Rek Blogging (@rezal-muis) on CodePen.

Demikian tutorial kali ini mengenai cara membuat tombol show hide atau spoiler keren di postingan blog. Apabila ada cara lain untuk membuat button show hide spoiler di blog maka akan Saya update lagi di artikel ini. Semoga bermanfaat dan apabila ada yang kurang jelas atau yang ingin ditanyakan silahkan berkomentar di bawah.