Lompat ke konten Lompat ke sidebar Lompat ke footer

Cara Membuat Spoiler Buka Tutup di Postingan Blog dengan Css

spoiler dengan css
spoiler dengan css

SPOILER yang dimaksud disini bukanlah spoiler yang ada di belakang mobil yang berfungsi menambah downforce atau tekanan ke bawah pada mobil untuk mengurangi gaya angkat yang timbul akibat kecepatan tinggi

di wikipedia spoiler diartikan bahasa indonesia sebagai beberan (Dalam media dan Internet) adalah tulisan atau keterangan mengenai suatu cerita, yang membeberkan jalan cerita tersebut. Membaca beberan dari suatu cerita dapat menyebabkan berkurangnya kesenangan membaca cerita itu, karena kesenangan membaca sebuah cerita biasanya tergantung kepada dramatisasi atau ketegangan yang ditimbulkan oleh cerita tersebut. Biasanya dalam media massa maupun Internet, beberan disembunyikan dengan cara tertentu, sehingga hanya terbaca oleh yang ingin melihat beberan tersebut.

antara beberan dan spoiler, rasanya lebih memungkinkan dengan menyebut dengan spoiler, tidak ada maksud apa apa, di judul postingan ini kami lebih senang dengan istilah Spoiler

#Penggunaan Spoiler Di Penulisan Blog

Di Blogger maka spoiler merupakan tehnik menyembunyikan seluruh atau sebagian isi dari postingan sehingga muncul ketika pengunjung menghendakinya saja. spoiler dapat menyembunyikan text , gambar ataupun skript sehingga mampu menghemat space posting, spoiler biasanya ditemukan pada website ataupun forum diskusi yang memiliki banyak pengunjung sebut saja salah satunya adalah https://www.kaskus.co.id/.

jika pernah berkunjung di kaskus maka kita akan sering jumpai spoiler di tread tulisan diskusi. tidak semua pengunjung ingin membaca secara keseluruhan tulisan yang diposting, bagi sebagian orang hanya perlu membaca di bagian yang dianggapnya penting saja. tidaklah salah author menyediakan semua informasi yang berkaitan dengan isi postingan secara mendetail dan terperinci, dengan anggapan mungkin akan ada yang membaca semuanya secara keseluruhan.

isi postingan yang panjang tentunya membutuhkan banyak space atau tempat, belum lagi jika web / blog yang memiliki banyak pengunjung serta menyediakan forum diskusi dan komentar, spoiler merupakan salah satu solusi untuk meringkas postingan selain itu juga spoiler dapat di buka dan ditutup ketika di klik sesuai kehendak.

namun pada perkembangannya, spoiler juga digunakan pada bidang pendidikan seperti memunculkan dan menyembunyikan penjelasan dari pertanyaan (tanya jawab), untuk melihat kunci jawaban yang benar pada pilihan ganda (buka tutup untuk kunci jawaban pilihan ganda yang benar), contoh pada postingan berikut ini https://www.mandandi.com/2020/05/soal-skb-pendidikan-guru-20.html

#Cara Membuat Spoiler Buka Tutup di Postingan Blog dengan Css

untuk membuat spoiler di postingan blog ada beberapa cara yang bisa digunakan seperti menggunakan javascript, langsung menyisipkan di HTML postingan, tapi pada postingan ini menggunakan css tanpa javascript, dengan alasan memperhatikan pengaruhnya terhadap loading suatu web blog. spoiler dengan css akan terlihat lebih indah dibandingkan dengan spoiler yang langsung disisipkan pada html postingan blog tapi dalam pemasangannya lebih rumit karena harus menyisipkan kode css dibandingkan spoiler yang langsung disisipkan di html postingan blog.

contoh spoiler dengan css
Tulis konten yang ingin disembunyikan disini.

berikut adalah langkah langkah Membuat Spoiler Buka Tutup di Postingan Blog dengan Css tanpa javascript

1. sign in blogger, di theme pilih Edit HTML


2. cari kode  ]]</b:skin> , gunakan ctrl + f untuk mempermudah mencari  ]]</b:skin>
tempelkan kode berikut sebelum  kode ]]</b:skin>

.mooreyispoiler {
    display:block; margin:5px 0px; border:1px solid #3498db; padding:5px 5px; border-radius:3px; -moz-border-radius:3px;
}
.mooreyispoiler .tombol {
    background:#3e145c; /* Warna tombol */
    color:#fff; /* Warna tulisan di tombol */
    display:inline-block; cursor:pointer; font:normal 14px Tahoma,sans-serif; padding:0px; border:none; outline:none; line-height:10px; border-radius:3px; -moz-border-radius:3px;
}
.mooreyispoiler .tombol:focus {
    pointer-events:none;
}
.mooreyispoiler .tombol:before {
    content:'Lihat spoiler'; /* Tulisan untuk membuka tombol */
    display:inline-block; padding:7px 10px; border-radius:3px; -moz-border-radius:3px;
}
.mooreyispoiler .tombol:focus::before {
    content:'Tutup spoiler'; /* Tulisan untuk menutup tombol */
    background:#0092cc; /* Warna tombol ketika spoiler terbuka */
}
.mooreyispoiler .isi {
    background:#defab4; /* Warna background isi spoiler */
    pointer-events:auto; visibility:hidden; opacity:0; height:0px; transition:all .3s ease;
}
.mooreyispoiler .tombol:focus + .isi {
    visibility:visible; opacity:1; height:auto; margin:5px 0px 5px; padding:5px 5px; transition:all .3s ease;
}

#3e145c  ganti Warna tombol maupun background spoiler dengan kode hexa colour yang dikehendaki
Lihat spoiler';ganti dengan Tulisan untuk membuka tutup spoiler yang diinginkan




  • bila kesulitan menemukan kode ]]</b:skin> . gunakan opsi lain menyimpan kode css diatas, yaitu lewat layout kemudian pilih theme designer, lalu di advanced pilih add css , tempelkan kode css tersebut kemudian apply
  • 3. save template
    4. buat postingan  di new post

    5. sisipkan kode berikut di html (bukan compose ) untuk membuat spoiler
    <div class="mooreyispoiler">
        <div class="tombol" tabindex="0"></div>
        <div class="isi">
            <!-- Isi Spoiler -->
            Tulis konten yang ingin disembunyikan disini.
        </div>
    </div>
    6. publish
    7. lihat tampilan postingan di preview
    apabila melakukan sesuai langkah diatas maka hasilnya dapat dilihat sendiri di tampilan postingan blog

    demikianlah Cara Membuat Spoiler Buka Tutup di Postingan Blog dengan Css, semoga bermanfaat

    Posting Komentar untuk "Cara Membuat Spoiler Buka Tutup di Postingan Blog dengan Css"

    data-ad-format="auto">
    data-ad-format="auto">

    Berlangganan via Email