Tips Cara Memasang Spoiler di dalam Postingan Blog Sangat Keren

 

Cara Memasang Spoiler Keren pada Postingan Blog - Menambahkan spoiler pada blog sobat juga dapat menambahkan keistimewaaan pada blog sobat, spoiler ini tentunya sangat responsive dan mobile friendly enak dipandang.

Apa sih fungsinya dari spoiler ini? spoiler ini tombol yang digunakan untuk memunculkan misalkan daftar isi dan isi text yang biasanya menurut si penulis itu penting atau bisa yang lainnya seperti gambar maupun video.

Cara Memasang Spoiler Keren pada Postingan Blog

Pertama sobat masuk terlebih dahulu ke Blogger > Tema > Edit HTML copy kode CSS dibawah ini dan pastekan tepat diatas kode ]]><b:skin> atau </style>

/* Spoiler */ #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:500;font-size:14px;text-align:center;text-transform:uppercase;letter-spacing:0.5px;margin:10px auto;border-radius:3px;box-shadow:0 2px 8px rgba(0,0,0,0.05);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}

Baca Juga: Mudah, Cara Buat Sitemap Blog yang Menarik 2020

Kemudian memasang kode JQuery copy kode dibawah ini dan pastekan tepat diatas kode </body> atau &lt;/body&gt;

<script type='text/javascript'> //<![CDATA[ //Spoiler $(document).ready(function(){$("#flippy").click(function(){$("#flippanel").slideToggle("normal")})}); //]]> </script>

Simpan tema sobat kemudian memasang pada postingan sobat., copy kode dibawah ini dan pastekan didalam postingan artikel sobat.

<div id="flippy"><button>Klik untuk melihat semua</button> <div id="flippanel"> ---ISI DARI SPOILER DISINI--- </div> </div>

Jika sudah klik publikasikan coba lihat hasilnya sobat.

Baca Juga:

• Cara Membuat kotak Teks Pada Postingan Blog
• Cara pasang Banner Iklan Melayang Dengan Tombol Close Responsive

Oke sekian yang bisa saya sampaikan tentang Tips Cara Memasang Spoiler di dalam Postingan Blog Sangat Keren Terima Kasih yang sudah berkunjung semoga bermanfaat bagi kalian semua.