Cara Sembunyikan Tulisan di Postingan Blog Dengan Kode CSS Spoiler

Benggala - Berbagai cara dilakukan bagi para bloger untuk mempercantik situs onlinenya. Salah satunya adalah menyembunyikan sebagian tulisan di sebuah artikel pada postingan blog. Mungkin bagi sebagian umum bloger pasti sudah paham dengan cara ini. Namun bagi pemula, kali ini Tim Benggala akan berbagi tips atau cara 'menyembunyikan tulisan di artikel'.

Sebenarnya untuk menyembunyikan sebagian tulisan di post blog tidaklah sulit yaitu dengan Spoiler. Spoiler adalah sebuah tombol yang memiliki fungsi untuk menyembunyikan teks, gambar dan lainnya yang muncul jika tombol tersebut di klik pembaca. Caranya kita hanya perlu menambahkan kode CSS Spoiler di HTML blog kita. Selanjutnya kita panggil melalui HTML postingan blog saat kita membutuhkan untuk menyembunyikan tulisan tertentu.

Baik langsung saja Tim Benggala akan berbagi tipsnya:

1. Pertama kali adalah masuk ke Template Blog

2. Masuk ke menu Edit HTML

3. Kemudian cari kode ]]></b:skin> dan tempel kode berikut tepat di atasnya.

/* Spoiler Box Pure CSS by BENGGALA.COM */

.benggalaSpoiler {

    display:block; margin:10px 0px; padding:7px 10px; border-radius:3px; -moz-border-radius:3px;

}

.benggalaSpoiler .tombol {

    background:#3498db; /* Warna tombol */

    color:#fff; /* Warna tulisan di tombol */

    display:inline-block; cursor:pointer; font:normal 600 14px Tahoma,sans-serif; padding:0px; border:none; outline:none; line-height:20px; border-radius:3px; -moz-border-radius:3px;

}

.benggalaSpoiler .tombol:focus {

    pointer-events:none;

}

.benggalaSpoiler .tombol:before {

    content:'Buka'; /* Tulisan untuk membuka tombol */

    display:inline-block; padding:7px 10px; border-radius:3px; -moz-border-radius:3px;

}

.benggalaSpoiler .tombol:focus::before {

    content:'Tutup'; /* Tulisan untuk menutup tombol */

    background:#cc0000; /* Warna tombol ketika spoiler terbuka */

}

.benggalaSpoiler .isi {

    background:#e4e4e4; /* Warna background isi spoiler */

    pointer-events:auto; visibility:hidden; opacity:0; height:0px; transition:all .5s ease;

}

.benggalaSpoiler .tombol:focus + .isi {

    visibility:visible; opacity:1; height:auto; margin:10px 0px 5px; padding:10px 15px; transition:all .5s ease;

}

Anda dapat mengganti kata 'Buka' dan 'Tutup' dengan kata lain sesuai selera masing-masing. Selain itu, warna tombol juga bisa disesuaikan dengan mengganti kodenya. Sampai di sini, urusan dengan template sudah selesai. Silakan simpan.

4. Setelah tersimpan, untuk menyembunyikan sebagian tulisan di artikel blog adalah menggunakan mode atau tampilan html dan masukkan kode berikut:

<div class="benggalaSpoiler">

    <div class="tombol" tabindex="0"></div>

    <div class="isi">

        <!-- Isi Spoiler -->

        Tulis konten yang ingin disembunyikan disini.

    </div>

</div>

Selesai! Cukup mudah bukan? Anda bisa melihat contoh penggunaan Spoiler di situs Benggala.com pada contoh di bawah ini.

Ini adalah contoh spoiler yang digunakan oleh Tim Benggala dalam menyusun Al-Quran online, silakan ganti tulisan tafsir dengan kata lain sesuai keinginan atau sesuai dengan fungsi pada situs atau blog masing-masing.

Semoga bermanfaat!