Cara Membuat Spoiler Keren terbaru Pada Blog

Spoiler berfungsi untuk menyembunyikan kalimat/gambar pada sebuah postingan. Apabila blog anda berisi tutorial blogging, tentunya spoiler ini sangat berguna sekali. Berikut langkah-langkah cara membuat spoiler keren terbaru pada blog. Silahkan disimak ! Sebagai contoh mirip seperti yang Kang AP gunakan dibawah.

Baca juga :
» Cara Membuat Tombol Share Efek 3D 
» Cara Mudah Memasang Back To Top Pada Blog
» Cara Membuat Tulisan Berjalan Pada Postingan Blog

1. Login ke Blogger

2. Pilih Template » Edit HTML

3. Pasang kode berikut diatas kode ]]></b:skin>

.spoiler{background:#f9f9f9 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZN4uPLIyBIfbyn-a_k3ZmFC5MGPK76PxXI7pFHllr4k2o7nppP3TeX6U9TGBt6287zqiakzSeJGt7ziLMvn_hxMzHHAjoWnOpYiGkYF2Q6D6vkQt4zigU6kS1_Lshif38mmk1UuYTcfg/s1600/spoiler+ap-thea.png)repeat-x;border:1px solid #ddd;padding:3px}.spoirel{font-family:arial;font-size:12px;color:#555;margin-bottom:0;font-weight:bold;text-align:left}

4. Sekarang silahkan anda membuat postingan baru

5. Pilih HTML bukan Compose


6. Pasang kode dibawah ini diantara kalimat yang mau anda sembunyikan

Lihat kode klik tombol buka » » »

<div class="spoiler">

<div class="spoirel">

Lihat kode klik tombol » » »<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 = 'TUTUP'; this.value = 'tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = 'buka'; this.value = 'buka'; }" style="background: #f9f9f9; border: 0px solid #000; color: saddlebrown; float: right; font-family: &quot;arial&quot;; font-size: 10px; font-weight: bold; margin: 0px; text-transform: uppercase;" type="button" value="BUKA" /></div>

<div style="border: 0px inset #fff; color: blue; margin: 0 10px 0px 10px; padding: 0px; text-align: left;">

<div style="display: none;">Kalimat Yang Mau Anda Sembunyikan

</div> </div> </div>

Note.
»  Yang berwarna biru adalah kalimat/gambar yang mau anda sembunyikan

7. Pilih Compose

8. Publikasikan dan lihat hasilnya

Demikian cara membuat spoiler keren terbaru pada blog, semoga bermanfaat. Happy blogging !!

Please Share » » Facebook Google+ Twitter