Cara Membuat Spoiler di Blogger dan Wordpress Full Css

Hi web developer!  kembali lagi bersama dengan guru design, kali ini kita akan membahas bagaimana cara membuat spoiler di blogger dan wordpress. sebelumnya kita jelasin dulu spoiler itu apa, siapa tahu ada yang belum tahu apa itu spoiler.

Cara Membuat Spoiler di Blogger dan Wordpress

Pengertian Spoiler blogger/wordpress

Spoiler blogger/wordpress adalah sebuah tombol yang berfungsi untuk menampilkan dan menyembunyikan kontent ketika user melakukan tindakan klik pada tombol. Umumnya spoiler blogger/wordpress tampil dengan gaya buka/tutup.

 

Cara membuat spoiler

Tambahkan Style CSS Kedalam Template

Mungkin kalian bertanya kenapa harus menambah css ke template? itu tujuannya supaya kalian tidak perlu menuliskan kembali css di dalam artikel. sampai disini paham?

1. Pilih Menu Tema
2. Pilih Edit HTML
3. Cari kode head penutup seperti ini </head> atau kemudian copy dan paste-kan style css berikut diatasnya, atau paste bersama kode css kalian.

/*spoiler full css by:www.gurudzgn.com*/
.spoilerme{display:block;margin:10px;padding:0;}
.spoilerme .tombol{background:#039be5;color:#fff;cursor:pointer;font:normal 600 14px Tahoma,sans-serif;padding:10px;border:none;outline:none;border-radius:3px;-moz-border-radius:3px;}
.spoilerme .tombol:before{content:'Lihat';}
.spoilerme .tombol:focus:before{content:'Tutup';}
.spoilerme .tombol:focus{pointer-events:none;cursor:pointer;}
.spoilerme .isi{background:#e4f6ff;pointer-events:auto;visibility:hidden;opacity:0;height:0;transition:all .5s ease}
.spoilerme .tombol:focus + .isi{visibility:visible;opacity:1;height:auto;margin:10px 0 5px;padding:10px 15px;transition:all .5s ease;}
.spoilerme .tombol:after{content:'';background-image:url('data:image/svg+xml,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M17,7H7A5,5 0 0,0 2,12A5,5 0 0,0 7,17H17A5,5 0 0,0 22,12A5,5 0 0,0 17,7M7,15A3,3 0 0,1 4,12A3,3 0 0,1 7,9A3,3 0 0,1 10,12A3,3 0 0,1 7,15Z" fill="%23fff"/></svg>');width:30px;height:30px;display:block;margin:-5px 5px;float:right;}
.spoilerme .tombol:focus::after{content:'';background-image:url('data:image/svg+xml,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M17,7H7A5,5 0 0,0 2,12A5,5 0 0,0 7,17H17A5,5 0 0,0 22,12A5,5 0 0,0 17,7M17,15A3,3 0 0,1 14,12A3,3 0 0,1 17,9A3,3 0 0,1 20,12A3,3 0 0,1 17,15Z" fill="%23fff"/></svg>');width:30px;height:30px;display:block;margin:-5px 5px;float: right;}

 Yang saya blok warna merah (buka/tutup) silahkan ubah sesuai dengan kebutuhan

Tambahkan HTML Kedalam Artikel

Silahkan tambahkan kode html berikut yang nantinya akan menjadi tombol spoiler.

<div class="spoilerme">
<div class="tombol" tabindex="0">
</div>
<div class="isi">
<p>Tulis judulmu di sini</p>
<p>Isi spoilermu di sini.</p>
</div>
</div>

Result

Sekian tutorial Cara Membuat Spoiler di Blogger dan Wordpress Full Css semoga bermanfaat, terimakasih.