Memasang Spoiler di Postingan

11/10/2014
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>

#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:


Demikian untuk tips kali ini, semoga bermanfaat.


Source : http://arlinadesign.blogspot.com/2014/11/memasang-spoiler-di-postingan.html

Artikel Terkait

Next Article
« Prev Post
Previous Article
Next Post »
Penulisan markup di komentar
  • Untuk menulis huruf bold gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline gunakan <u></u>.
  • Untuk menulis huruf strikethrought gunakan <strike></strike>.
  • Untuk menulis kode HTML gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silakan parse kode pada kotak parser di bawah ini.

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

38 comments

pertamax semoga, ini spoiler yang kayak di kaskus itu ya mbak?

Balas

iya, seperti di kaskus dan forum2 lainnya

Balas

Me sorprendes amigo sos el mejor bloggero que conozco muchas gracias por compartir :)

Balas

thanks again fella

Balas

ini maksud saya mbak :-d

Balas

penerapannya sudah sama seperti yg diatas blm? kl sudah, seharusnya spoiler bisa jln sesuai dengan demo

Balas

ini yg saya cari mbak :) mkasiiii yaa. guru blog banget deh

Balas

iya mas sama2, mudah2an bermanfaat

Balas

Kenapa ya di posting spoilernya tidak berfungsi, tapi di laman spoilernya berfungsi

Seperti ini:
Posting
http://dfgdfgdfsfgdsf.blogspot.sg/2014/11/lorem-ipsum-dolor-sit-amet-consectetur.html

Laman
http://dfgdfgdfsfgdsf.blogspot.sg/p/blog-page.html

Balas

informasi yag sangat bermanfaat..
terima kasih sharenya ijin simpan untuk diterapkan di blog baru saya.... :)

Balas

atur kembali penempatan kode jquery nya, silahkan cari //Spoiler di page source post ini

http://lycoris9.blogspot.com/2014/09/lorem-ipsum-cute-girl.html

Balas

Iya, silahkan mas Ade

Balas

Makasih ya :) akhirnya bisa juga :D

Balas

makin mantep aja dah blog saya pake ini makasih ya !

Balas

keren ya sis,, dengan tampilan baru lebih bagus dengan perpaduan warna flat :D

Balas

hehe, jd dibikin gado2 ceritanya :D

Balas

itu yang kode html di taruh di pling bawah atau boleh dimana aja mba?

Balas

yang penting banyak pengunjung,eheheh

Balas

bisa dimana aja bebas

Balas

hehe, begitulah.. tp lumayan sepi disini

Balas

Keren! Tak coba ya mbake :D

Balas

ini yang saya dapatkan disini adalah memakai Toggle di javascriptnya.. :)
nie post mbk..

Balas

jquerynya bentrok kali tuh mas....masalahnya demonya jalan aja kok.

Balas

One part of the code is incorrect:


$(document).ready(function() {
$("#flippy").click(function() {
$("#flippanel").slideToggle("normal");
});It's here
});


Withdrawing this detached part, the problem is solved.

Balas

There no error in my code, try http://codepen.io/ create new pen and put that code

Balas

On the Blogger only worked after deleting of this part = );
I just wanted to warn you ^^

Balas

mbak mau tanya ,spiler y sdh jadi tapi kalo buat 2 spoiler ato 3 ko yang bisa di buka cm 1 spoiler y ?

Balas

Iya hanya untuk satu spoiler

Balas

Even when I put in blogger code, is working fine

Balas

Silakan tambahkan komentar sesuai dengan topik dan komentar dengan link akan dihapus, terima kasih.