Cara Membuat Spoiler di Postingan Blog

Cara Membuat Spoiler di Blog,- Pasti kalian pernah melihat spoiler di forum forum terkenal dan besar seperti kaskus kan? Yap, spoiler adalah menyebunyikan atau men-hide kan sebagian postingan agar postingan tidak terlihat sangat pajang atau bisa dikatakan untuk membuat sebuah postingan menjadi lebih pendek walaupun postingan sebenarnya panjang. Spoiler banyak di gunakan para pembuat thread profesional di bebagai forum, tapi kini spoiler sudah hadir di dalam blog yang berbasis blogger. Ya, spoiler sekarang bisa di gunakan dalam blog. Pada kesempatan kali ini saya akan membagikan cara caranya secara lengkap agar anda juga bisa menerapkan untuk membuat spoilernya di postingan blog anda. Langsung saja, jika anda tertarik untuk membacanya simak postingan berikut ini.

Cara Membuat Spoiler di Blog

Nah pada postingan kali ini saya akan membahas tentang Cara Membuat Spoiler di Blog, langsung saja saya akan membagikannya secara lengkap dan jelas pada postingan kali ini. Simak tutorial atau cara caranya di bawah ini.

1. Login blogger,
2. Pada dashboard buka HTML lalu edit HTML,
3. lalu cari kode ]]></b:skin> , lalu letakkan kode berikut di atasnya,
   

   #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;
   }

4. Setelah itu cari kode </body> lalu letakkan kode berikut di atasnya,
   

   <script>
   $(document).ready(function() {
       $("#flippy").click(function() {
           $("#flippanel").slideToggle("normal");
       });
   });
   </script>

5. Simpan template.

Cara Memasang Spoiler:

1. Buat Postingan baru dalam mode html,
2. Masukka kode berikut dalam postingan mode html anda,
   

   <div id="flippy"><button>Cekidot</button></div>
   <div id="flippanel">
   ISI SPOILER ANDA
   </div>

Catatan : Ubah Isi spoiler anda dengan isi artikel anda yang ingin menjadi spoiler.

Baca Juga : MSPORTS.net portal berita bola dan olahraga terkini

Itulah postingan saya tentang Cara Membuat Spoiler di Blog, semoga dengan adanya artikel ini anda bisa membuat sebuah spoiler di blog anda, dan semoga artikel ini bisa menjadi refrensi jika anda sedang membutuhkannya.

Bagikan Artikel ini