Membuat Kotak Spoiler di Blogger Responsive keren - Susah Tidur

Membuat Kotak Spoiler di Blogger Responsive keren


Membuat Kotak Spoiler di Blogger Responsive keren
Membuat Kotak di Blogger Responsive keren - SusahTidur - Halo selamat datang kembali, pada kesempatan kali ini saya akan berbagi tutorial tentang Membuat Kotak Spoiler di Blogger Responsive keren.

Kotak Spoiler adalah sebuah kotak yang berfungsi untuk menyembunyikan suatu konten blog. Umumnya suatu Kotak Spoiler dilengkapi dengan tombol buka - tutup atau istilah kerennya hide - show guna. Biasanya yang menggunakan Kotak Spoiler ( Spoiler Box ) ini adalah blog yang ber niche Film dan Anime, namun tidak jarang juga blog tutorial seperti punya saya ini menggunakannya. Ya biar terlihat lebih keren gitu hehe.

Lalu untuk kelebihan dari kotak spoiler ini apa sih? nah berikut ini adalah kelebihan dan Kekurangan kotak spoiler di blog

A. Kelebihan Kotak Spoiler

  • Menghemat ruang mulai dari panjang, lebar, dan pajang
  • Mempercepat muat halaman blog
  • Menghemat waktu pembaca
  • Untuk mempercantik halaman
  • Menyembunyikan konten teks, gambar, info, spoiler, dan beberapa keyword tertentu untuk optimalisasi posting (tidak dianjurkan)

B. Kekurangan Kotak Spoiler

  • Untuk pengguna awam pastinya ini cukup membingungkan walau hanya sekedar klik lalu terlihat kontennya

Bagaimana tertarik Cara Membuat Kotak Spoiler di Blog sendiri? baik beikut ini adalah beberapa style Spoiler Box, sobat bisa memilinya sesuai selera dari yang hanya CSS sampai menggunakan bantuan Script.

Cara Membuat Kotak Spoiler di Blogger Responsive keren

A. Spoiler Box default dari Blogger

  1. Masukkan kode dibawah ini di Posting atau Halaman > Mode HTML 
  2. <div id="spoiler">
    <div><input style="font-size: 11px; margin: 5px; padding: 0px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = ''; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = 'none'; this.innerText = ''; this.value = 'Sembunyikan'; } else { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = 'none'; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = ''; this.innerText = ''; this.value = 'Tampilkan Konten'; }" name="button" type="button" value="Tampilkan Konten" /></div>
    <div id="show" style="border: 1px solid white; display: none; margin: 5px; padding: 2px; width: 98%;">
    
    Masukkan Tulisan kalian disini
    
    </div><div id="hide"></div></div>
DEMO

B. Spoiler Text dari Blogger

  1. Masukkan kode dibawah ini di Posting atau Halaman > Mode HTML 
  2. <a id="show_id" onclick="document.getElementById('spoiler_id').style.display=''; document.getElementById('show_id').style.display='none';"><b>[Tampilkan Konten]</b></a><span id="spoiler_id" style="display: none;"><a class="link" onclick="document.getElementById('spoiler_id').style.display='none'; document.getElementById('show_id').style.display='';"><b>[Sembunyikan Konten]</b></a><br /> <br/>
    
    Masukkan tulisan kalian disini
    
    </span> 
DEMO
[Tampilkan Konten]

C. Spoiler Box ala Igniel dengan CSS

Kotak spoiler ini adalah buatan dari mbak Igniel, Spoiler Box dengan CSS saja. Ada 2 cara memasangnya, berikut cara pemasangannya
  1. Cara Pertama, Masukkan kode di bawah ini di Posting atau Halaman > Mode HTML
  2. <style>
    /* Spoiler Box Pure CSS by IGNIEL.COM */
    .ignielSpoiler {
        display:block; margin:10px 0px; border:1px solid #3498db; padding:7px 10px; border-radius:3px; -moz-border-radius:3px;
    }
    .ignielSpoiler .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;
    }
    .ignielSpoiler .tombol:focus {
        pointer-events:none;
    }
    .ignielSpoiler .tombol:before {
        content:'Lihat Spoiler'; /* Tulisan untuk membuka tombol */
        display:inline-block; padding:7px 10px; border-radius:3px; -moz-border-radius:3px;
    }
    .ignielSpoiler .tombol:focus::before {
        content:'Tutup Spoiler'; /* Tulisan untuk menutup tombol */
        background:#cc0000; /* Warna tombol ketika spoiler terbuka */
    }
    .ignielSpoiler .isi {
        background:#e4e4e4; /* Warna background isi spoiler */
        pointer-events:auto; visibility:hidden; opacity:0; height:0px; transition:all .5s ease;
    }
    .ignielSpoiler .tombol:focus + .isi {
        visibility:visible; opacity:1; height:auto; margin:10px 0px 5px; padding:10px 15px; transition:all .5s ease;
    }
    </style>
    <div class="ignielSpoiler">
        <div class="tombol" tabindex="0"></div>
        <div class="isi">
            <!-- Isi Spoiler -->
            Tulis konten yang ingin disembunyikan disini.
        </div>
    </div> 
  3. Cara kedua, Masukkan kode di bawah ini tepat di atas ]]></b:skin>
  4. /* Spoiler Box Pure CSS by IGNIEL.COM */
    .ignielSpoiler {
        display:block; margin:10px 0px; border:1px solid #3498db; padding:7px 10px; border-radius:3px; -moz-border-radius:3px;
    }
    .ignielSpoiler .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;
    }
    .ignielSpoiler .tombol:focus {
        pointer-events:none;
    }
    .ignielSpoiler .tombol:before {
        content:'Lihat Spoiler'; /* Tulisan untuk membuka tombol */
        display:inline-block; padding:7px 10px; border-radius:3px; -moz-border-radius:3px;
    }
    .ignielSpoiler .tombol:focus::before {
        content:'Tutup Spoiler'; /* Tulisan untuk menutup tombol */
        background:#cc0000; /* Warna tombol ketika spoiler terbuka */
    }
    .ignielSpoiler .isi {
        background:#e4e4e4; /* Warna background isi spoiler */
        pointer-events:auto; visibility:hidden; opacity:0; height:0px; transition:all .5s ease;
    }
    .ignielSpoiler .tombol:focus + .isi {
        visibility:visible; opacity:1; height:auto; margin:10px 0px 5px; padding:10px 15px; transition:all .5s ease;
    }
    Lalu masukkan kode pemanggil di bawah ini di Postingan > Mode HTML
    <div class="ignielSpoiler">
        <div class="tombol" tabindex="0"></div>
        <div class="isi">
            <!-- Isi Spoiler -->
            Tulis konten yang ingin disembunyikan disini.
        </div>
    </div> 
DEMO

Tulis konten yang ingin disembunyikan disini.

D. Spoiler Box Keren

  1. Masukkan kode pemanggil di bawah ini di Postingan > Mode HTML
    <style>@keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}
    #flippy{text-align:center;margin:auto;display:inline}#flippy button{background:#7bbefa;background-image: linear-gradient(110deg,rgba(255,255,255,0.2) 16%,rgba(255,255,255,0.2) 17%,rgba(255,255,255,0.1) 17%,rgba(255,255,255,0.1) 23%,transparent 8.5%,transparent 78%,rgba(255,255,255,0.1) 78%,rgba(255,255,255,0.1) 84%,rgba(255,255,255,0.2) 84%,rgba(255,255,255,0.2));background-size:200% auto;color:#fff;display:block;width:100%;padding:15px;font-weight:700;font-size:14px;text-align:center;text-transform:uppercase;letter-spacing:0.5px;margin:10px auto;border-radius:3px;box-shadow:0 2px 3px #fff,0 2px 3px #fff;transition:all .3s}#flippy button:hover,#flippy button:focus{background-position: right center;outline:none;opacity:1;color:#fff}#flippanel{display:none;padding:10px 0;text-align:left;background:#fff;margin:10px 0 0 0}#flippanel img{background:#f5f5f5;margin:10px auto}
    </style>
    <div id="flippy">
    <button>Tampilkan Konten</button></div>
    <div id="flippanel">
    Masukkan Gambar, Teks, Video di sini
    </div>
    <script>
    $(document).ready(function(){$("#flippy").click(function(){$("#flippanel").slideToggle("normal")})});
    </script>
    
DEMO

Masukkan Gambar, Teks, Video di sini

E. Spoiler Box Keren 2

  1. Masukkan kode pemanggil di bawah ini di Postingan > Mode HTML
    <style>
    .centerpedomane {text-align: center}
    .pedomane {text-align: center}
    button.pedomane {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}
    .pedomane button:hover, .pedomane button:focus {background: #9e4fbf; outline: none}
    .pedomanepanel {padding: 1px; text-align: left; background: #f5f5f5; border: 0}
    .pedomanepanel {padding: 24px; display: none}
    </style>
    <div class="centerpedomane"><button class="pedomane">Tampilkan Konten</button>
    <div class="pedomanepanel">
    Letakkan konten kalian disini
    </div>
    </div> 
    <script>
    $(function(){
     $(".pedomane").on("click", function(){
     $(this).parent().children(".pedomanepanel").slideToggle("normal");
     });
    });
    </script>
    
DEMO


Letakkan konten kalian disini


Baiklah selesai sudah tutorial Cara Membuat Kotak Spoiler di Blogger Responsive keren. Jika masih kesusahan silahkan bertanya di kolom komentar. Sekian dan terimakasih telah berkunjung ke SusahTidur
"Membuat Kotak Spoiler di Blogger Responsive keren"
Tampilkan Komentar
Sembunyikan Komentar

2 Komentar untuk "Membuat Kotak Spoiler di Blogger Responsive keren"

  1. Cara buat Buka tutup komentar gimana ya kak ?

    BalasHapus
    Balasan
    1. Baik ditunggu ya postingan selanjutnya, terimakasih telah berkunjung ke SusahTidur

      Hapus

Jangan malu bertanya!

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel