Cara Membuat Spoiler Keren Dengan CSS di Blog
Bocah Poris Blog's | Pada Kesempatan Kali ini Saya akan Berbagi Tentang Cara Membuat Widget Spoiler Keren Dengan CSS di Blog Mungkin Sebagian Blogger Sudah Tidak Asing Lagi Dengan Namanya Spoiler ini yang Biasanya Muncul di Forum-Forum . Karena Dengan Menggunakan Spoiler Juga Termasuk Mempercepat Loading Blog . Dengan Memasang Spoiler di Blog Anda ini Semoga Kecepatan Blog Anda Berkurang . Memasang Spoiler di widget Blog Sangat Bermanfaat Karena Dengan Membuat Widget Spoiler Tidak Memakan Banyak Tempat dan Pastinya Membuat Pengunjung Nyaman Dengan Tampilan Blog Anda yang Rapi. dan Cepat. Semakin Banyak Widget Blog Semakin Lambat Juga Kecepatan Blog Kalian di Hadapan Google dan Pengunjung . Jika Terlalu Lambat Akan Mengakibatkan Google Tidak Suka Dengan Blog Tersebut Hingga Robot Google Tidak Bisa Menjelajah di Blog Kesayangan Anda .

Maka Dari Itu Saya Sarankan Membuat Widget Spoiler Keren Dengan CSS ini . Untuk Meminimalisir Widget Blog dan Membuat Tampilan Blog nyaman akan widget blog yang tidak bermanfaat bagi para pengunjung blog. Semoga Cara Memasang Widget Spoiler ini Bermanfaat ya. Spoiler ini Bisa Kalian Pasang di Widget maupun di Postingan Blog Kalian Sesuai Kemauan Anda Saja ya,.


Langkah Memasang Spoiler Widget di blog

1.Login Ke Akun Blogger Anda

2. Masuk Ke Menu Template Anda

3. Klik Edit HTML > Lanjutkan

4. Lalu Cari Kode dibawah
]]></s:kin>
5. Copy Kode dibawah dan Pastekan Tepat diatas ]]></s:kin>
.spoiler{background:#f9f9f9 url(https://lh3.googleusercontent.com/-CoP7gpji2kI/UAlWXkvzDfI/AAAAAAAABA0/i49o5VKz3F0/h120/gradient2.php.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}
6. Setelah Langkah diatas Dilakukan Klik Save

7. Sekarang Anda Ke Menu Tata Letak Blogger ya

8. Klik Tambah Gadget > Klik Tambah HTML/Javascript
<div class="spoiler"> <div class="spoirel">Judul Widget Anda<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: #8B4513; font-family: arial; font-size: 10px; margin: 0px;font-weight:bold;text-transform:uppercase;float:right;" type="button" value="LIHAT" /></div> <div style="border: 0px inset #fff; color: blue; margin: 0 10px 0px 10px; text-align:center;padding: 0px;"> <div style="display: none;"> <br />Masukan Kode Widget Anda</div> </div> </div>
Keterangan : Ganti Tulisan yang Berwarna Sesuai Kemauan Anda

9. Jika Ingin Membuat Spoiler Lagi Tinggal Copy Paste Saja Lagi Kode diatas .

Cukup Mudah Bukan?


Sekian Artikel Tentang Cara Membuat Spoiler Keren Dengan CSS di Blog Semoga Artikel ini Bermanfaat Untuk Kalian .


Happy Blogging
 

Artikel Menarik Lainnya :
Judul : Cara Membuat Spoiler Keren Dengan CSS di Blog
Di Tulis Oleh:MRizal Wrc
URL : http://bocahporis.blogspot.com/2013/03/cara-membuat-spoiler-keren-dengan-css.html
Date Published : 23:05
Desription : Bocah Poris Blog's | Pada Kesempatan Kali ini Saya akan Berbagi Tentang Cara Membuat Widget Spoiler Keren Dengan CSS di Blog   Mung...
Rating Blog: 5 dari 5