Memasang Spoiler Di Postingan

Memasang Spoiler di Postingan - Kali ini aku akan membuatkan tips sederhana cara menciptakan spoiler dengan dampak slide di postingan blog.

Berikut cara penerapannya :

Pertama, buka blogger > Template > Edit HTML > Terapkan arahan CSS di bawah ini sebelum </style> atau ]]></b:skin> dan untuk arahan jQuery terapkan sebelum </body>

.centerflip{text-align:center} .flippy{text-align:center} button.flippy{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:0 3px 0 0 #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:0} .flippanel{padding:24px;display:none}

<script> $(function(){   $(".flippy").on("click", function(){     $(this).parent().children(".flippanel").slideToggle("normal");   }); }); </script>

Kemudian terapkan arahan di bawah ini di postingan tab HTML

<div class="centerflip"><button class="flippy">Cekidot</button> <div class="flippanel"> ---ISI KONTEN ANDA TERAPKAN DISINI--- </div> </div>

Contoh penerapan dapat dilihat disini:

Result

Demikian untuk tips kali ini, supaya bermanfaat.

Source : https://tutoorbagus.blogspot.com//search?q=memasang-spoiler-di-postingan

Tweet

Subscribe to receive free email updates: