√ Cara Menciptakan Spoiler Keren Terbaru Pada Blog

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

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

1. Login ke Blogger

2. Pilih Template » Edit HTML

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

.spoiler{background:#f9f9f9 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtXP_fxsKWgOjft435FC2rfuRhANKfD1OvNFhYpMT8-uVRvGuSBKSzetXN1WFNK9Wa2ZaFCE0TiBB8gW1s6mVlCe3zUfu-7Myn7v_7Hx6jnUpWO-v5inDYx52KoaGzRGUor3uqmIdOvXA/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 menciptakan postingan baru

5. Pilih HTML bukan Compose


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

Lihat arahan klik tombol buka » » »

<div class="spoiler">

<div class="spoirel">

Lihat arahan 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 ialah kalimat/gambar yang mau anda sembunyikan

7. Pilih Compose

8. Publikasikan dan lihat hasilnya

Demikian cara menciptakan spoiler keren terbaru pada blog, biar bermanfaat. Happy blogging !!


Sumber http://ap-thea.blogspot.com