Cara Menciptakan Tombol Show Hide Atau Spoiler Keren Di Postingan Blog

Cara Membuat Tombol Show Hide atau Spoiler Keren di Blog - Tombol Show Hide atau dapat disebut juga tombol spoiler yaitu 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 memakai button show hide atau spoiler? Pernahkah kalian berselancar ke website lembaga menyerupai kaskus atau ads id? Biasanya banyak dari thread atau postingan di dalamnya memakai fitur add spoiler. Tujuannya semoga dikala memuat halaman postingan lebih ringan dan juga menyingkat panjang artikel semoga lebih simpel. Nah maka dari itu Kita aplikasikan fungsi tombol show hide tersebut ke dalam blog Kita. Untuk cara menciptakan spoiler di blog bekerjsama tidak sulit, tetapi Kali ini akan Saya berikan tutorial mengenai cara menciptakan tombol show hide keren di blog.

Terinspirasi dari tombol spoiler di blog Arlina yang berdasarkan Saya keren dan juga responsive, maka dari itu Saya berikan cara menciptakan tombol spoiler keren menyerupai milik Arlina design. Mari simak hingga selesai.

Cara Membuat Tombol Show Hide Spoiler di Blog

#1 Buka dashbor blogger

#2 Pilih Tema>Edit HTML

#3 Letakkan arahan 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 arahan di bawah ini sebelum kode </body>

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

#5 Letakkan arahan HTML di bawa ini di tab html dikala menciptakan 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 (@rezal-muis) on CodePen.

Demikian tutorial kali ini mengenai cara menciptakan 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 terperinci atau yang ingin ditanyakan silahkan berkomentar di bawah.