Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / Blogger / Tutorial

Membuat Spoiler Didalam Postingan Blog

Membuat Spoiler Pada Postingan Blog - Spoiler pada blog yaitu sebuah format bingkai yang dipakai untuk membingkai atau menyembunyikan teks, gamabar, video maupun apa saja semoga dapat di sembunyikan di blog. Nantinya pengunjung dapat melihat isi spoiler dengan cara meng-klik tombol buka tutup atau Show-Hide.

Spoiler ini bermanfaat untuk meringankan loading blog. Jika anda meng-upload banyak gambar dalam postingan, maka anda sebaiknya anda memasukkan gambar-gambar tersebut kedalam spoiler semoga loading blog tidak berat. Selain itu postingan anda akan nampak rapi dan praktis.

Contoh Spoiler :
Judul Spoiler:
Selain dapat dipasang di postingan spoiler ini juga dapat dipasan disidebar blog.

Kode Spoiler :
 <div style="margin: 5px 20px 20px;">  
     <div class="smallfont" style="margin-bottom: 2px;">  
       <b>Judul Spoiler</b>: <input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Buka'; }" style="font-size: 12px; margin: 0px; padding: 0px; width: 55px;" type="button" value="Buka" />  
         </div>  
           <div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;">  
             <div style="display: none;">  
               Teks atau arahan script (Gambar atau Video)  
                 </div>  
                   </div>  
                     </div>
                    Cara Memasang Spoiler :

                    1. Upload gambar di entry baaru
                    2. Setelah gambar terupload, buka HTML di entry gres (bukan Compose) 
                    3. Kemudian letakkan arahan spoiler di kawasan yang anda inginkan, kemudian pindahkan script gambar yang telah anda upload tadi ke tengah spoiler. Contohnya dapat anda lihat dibawah ini:
                     
                       <div style="margin: 5px 20px 20px;">  
                         <div class="smallfont" style="margin-bottom: 2px;">  
                           <b>Judul Spoiler</b>: <input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Buka'; }" style="font-size: 12px; margin: 0px; padding: 0px; width: 55px;" type="button" value="Buka" />  
                             </div>  
                               <div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;">  
                                 <div style="display: none;">  
                                   <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjejA5TJ78aSGUP1fid_5tPsh_F_Ksll3YsVORE9l4hn_G2BSE_B60Sq7IAgLLBV-oDMMyqr2Wl3CJMCEdAm3Hrq9m_zQAooStk9vLkwwMunvURCrI3ajjjLTejuTj4IRqdYb-jq1M_8U/s1600/spoiler+blog.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjejA5TJ78aSGUP1fid_5tPsh_F_Ksll3YsVORE9l4hn_G2BSE_B60Sq7IAgLLBV-oDMMyqr2Wl3CJMCEdAm3Hrq9m_zQAooStk9vLkwwMunvURCrI3ajjjLTejuTj4IRqdYb-jq1M_8U/s1600/spoiler+blog.jpg" /></a></div>  
                                     </div>  
                                       </div>  
                                         </div>
                                         4. Kembali ke Compose dan klik Publikasikan. Selesai.

                                        Keterangan :
                                        Kode yang berwarna merah itu yaitu arahan gambar, anda juga dapat memasukan lebih dari satu gambar kedalam satu spoiler, atau dapat menambah script apa saja.

                                        Untuk Pemasangan Disidebar :
                                        Anda tinggal pastekan arahan spoiler beserta script gambar atau video kedalam gadget HTML, kemudian tempatkan disidebar. Namun anda haruss menyesuaikan ukuran lebar gambar atau video lebih dulu semoga sesuai dengan lebar sidebar anda.

                                        Sumber : www.juragancipir.com

                                        Anda mungkin menyukai postingan ini :