Memasang Spoiler di Postingan - Arlina Design
Cara Mudah 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>

.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 kode 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 bisa dilihat disini:


Demikian untuk tips kali ini, semoga bermanfaat.

Source : https://www.arlinadzgn.com/2014/11/memasang-spoiler-di-postingan.html

Memasang Spoiler di Postingan

Cara Mudah 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>

.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 kode 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 bisa dilihat disini:


Demikian untuk tips kali ini, semoga bermanfaat.

Source : https://www.arlinadzgn.com/2014/11/memasang-spoiler-di-postingan.html
Portal Bola Online

Related Post

Portal Bola Online
Disqus Codes
  • To write a bold letter please use <strong></strong> or <b></b>
  • To write a italic letter please use <em></em> or <i></i>
  • To write a underline letter please use <u></u>
  • To write a strikethrought letter please use <strike></strike>
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>
    And use parse tool below to easy get the style.
Show Parser Box

strong em u strike
pre code pre code spoiler
embed

Subscribe Our Newsletter

Notifications

Disqus Logo