√ Menciptakan Spoiler Di Postingan Blog

Membuat Spoiler di Postingan Blog » Membuat Spoiler di dalam posting merupakan hal yang tidak penting untuk di lakukan, Namun walapu begitu dengan adanya Spoiler akan mempersingkat postingan blog kamu, teladan ketika kau ingin membagikan suatu code HTM di dalam postingan kau dapat menyembunyikan code tersebut dengan Spoiler semoga tampilan lebih rapi.

Artikel ini saya buat sebab ada temen admin di group FB yang ingin tahu bagaimana membuat Spoiler didalam postingan. Walapun ini ngak sama menyerupai yang ketika ini admin terapkan di blog lapaklama, namun paling tidak ini dapat menjawab pertanyaan teman-teman di FB.

Nanti karenanya kurang lebih menyerupai gambar dibawah ini gan.!!! 

Penasaran Gimana Buatnya? Silahkan Ikuti tutorial dibawah ini.

Cara Membuat Spoiler di Postingan Blog

1. Masuk kehalaman dasboard blogger


2. Pilih Menu Template lalu Edit HTM


3. Letakan arahan CSS dibawah ini sebelum kode </style>
   CSS

   .centerflip{text-align:center}
   
   .flippy{text-align:center}
   
   button.flippy{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}
   
   .flippy button:hover,.flippy button:focus{background:#9e4fbf;outline:none}
   
   .flippanel{padding:1px;text-align:left;background:#f5f5f5;border:0}
   
   .flippanel{padding:24px;display:none}


4. Kemudian letakan juga kode jQuery sebelum kode </body>
   jQuery

   <script>
   
   $(function(){
   
   $(“.flippy”).on(“click”, function(){
   
   $(this).parent().children(“.flippanel”).slideToggle(“normal”);
   
   });
   
   });
   
   </script>


5. Kemudian pastekan arahan dibawah ini di dalam postingan atau halaman statis dalam mode HTML
   HTML

   <div class=”centerflip”><button class=”flippy”>Cekidot</button>
   
   <div class=”flippanel”>
   
   —ISI KONTEN ANDA TERAPKAN DISINI—
   
   </div>
   
   </div>


6. Publikasikan.

Live Demo

Sekian gosip kali ini, Jika kau suka dengan konten menyerupai ini, silahkan artikel ini kesosial media teman-teman dan jangan lupa berlangganan artikel gratis via email. Terimakasih telah membacartikel Membuat Spoiler di Postingan Blog

Sumber aciknadzirah.blogspot.com