Memasang Spoiler di Postingan
Memasang Spoiler di Postingan - Kali ini saya akan berbagi tips sederhana cara membuat spoiler dengan efek slide di postingan blog.
Berikut cara penerapannya :
Pertama, buka blogger > Template > Edit HTML > Terapkan kode CSS di bawah ini sebelum </style> atau ]]></b:skin> dan untuk kode jQuery terapkan sebelum </body>
#flippy { text-align: center; } #flippy button { background: #aa65c7; color: #fff; text-align: center; margin: 0 auto; border: none; border-radius: 3px; padding: 8px 16px; margin: 10px auto; font-size: 14px; font-weight: bold; box-shadow: 0px 3px 0px 0px #883da7; vertical-align: middle; cursor: pointer; text-shadow: 0 1px rgba(0, 0, 0, 0.3); transition: background 0.1s ease-in-out; } #flippy button:hover, #flippy button:focus { background: #9e4fbf; outline: none; } #flippanel { padding: 1px; text-align: left; background: #f5f5f5; border: 0px; } #flippanel { padding: 24px; display: none; }<script> $(document).ready(function() { $("#flippy").click(function() { $("#flippanel").slideToggle("normal"); }); }); </script>Kemudian terapkan kode di bawah ini di postingan tab HTML
<div id="flippy"><button>Cekidot</button></div> <div id="flippanel"> ---ISI KONTEN ANDA TERAPKAN DISINI--- </div>Contoh penerapan bisa dilihat disini:
Result
Demikian untuk tips kali ini, semoga bermanfaat.
Source : http://arlinadesign.blogspot.com/2017/11/memasang-spoiler-di-postingan.html