Cara Membuat Spoiler di blogspot /Blogger
Apa Itu Spoiler
Bisa dikatakan tombol spoiler merupakan tombol show/hide yang biasa kalian temukan di forum-forum seperti Kaskus,dll
Untuk Apa sih kita memasang Spoiler di blog?
Cara Membuat Tombol Show/hide (spoiler) di Blog
#1. Buka dashboard Blogger kalian
#2. Pilih Tema >> Klik Titik Tiga >> Pilih Edit HTML.
#3. Cari Code ]]></b:skin> atau </style> (Gunakan CTRL+F untuk mempermudah pencarian). Salin code CSS dibawah ini lalu letakan sebelum code ]]></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. Letakan code dibawah ini diatas / sebelum code</body>
<script> $(document).ready(function(){$("#flippy").click(function(){$("#flippanel").slideToggle("normal")})}); </script>
#5. Nah jika sudah melakukan cara diatas ,kalian sudah bisa meletakan spoiler didalam postingan
Caranya letakan code dibawah ini pada postingan kalian di mode HTML bukan Mode Compose
<div id="flippy"><button>Klik untuk melihat semua pilihan animasi</button></div><div id="flippanel"> Masukkan Gambar, Teks, Video di sini </div>
Akhir Kata
Demikian cara membuat spoiler di blog,kali ada tutorial yang silih dipahami comment dibawah ya 😉
Pengen belajar coding?nah admin merekomendasikan kepada kalian untuk berkunjung ke blog panduancode
Salah satu artikel :
https://www.panduancode.com/2020/01/scratch-download-dan-pengenalan-scratch-dasar.html
Cara membuat show hide di blog.cara menyembunyikan tulisan di blog. Cara membuat spoiler keren.