Cara Membuat Tombol Spoiler (Show/hide) di blog Dengan Effect Warna Gradian

Cara Membuat Spoiler di blogspot /Blogger

Assalamualaikum Wr.Wb

Dikesempatan kali ini Admin akan membagikan tutorial cara membuat spoiler di Blog

Apa Itu Spoiler

Spoiler di blog bukan berarti menceritakan jalan cerita film yang sudah kalian tonton ke teman-teman.Melainkan Adalah sebuah tombol yang berfungsi untuk menyembunyikan teks,gambar,dan lain-lain,yang akan muncul jika tombol di klik.

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?

Spoiler ini sangat tepat sekali digunakan jika kalian mempunyai artikel yang terlalu panjang.

tidak hanya itu,spoiler juga berguna untuk kalian yang mempunyai blog film,Maupun descripsi file yang ingin dibagikan,jadi kalian bisa menyembunyikan descripsi tersebut agar tertata rapi dan akan muncul jika tombol spoiler di tekan.

Atau juga kalian ingin membagikan kejutan kepada pengunjung blog kalian,berupa teks ,gambar,atau hal menarik lainya.

Intinya banyak sekali fungsi spoiler kalian bisa menggunakan apa saja yang kalian mau.Tertarik mencobanya? Berikut tutorialnya.

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.

Code by : rezal-Muis