Cara Membuat Spoiler Keren tanpa Edit HTML di blog

Unknown

Blogger, Informasi, Tutorial

Saturday, 21 December 2013

7 Komentar

Selamat malem sobat blogger, jiah sambil nunggu timnas Indonesia lawan Thailand di Final sepak bola kejuaraan SEA GAME. Saya sempet sempetin buat posting artikel yang satu ini tentang bagaimana cara membuat Spoiler keren. Kalian tau kan spoilter itu apah?, Spoiler itu merupakan salah satu fasilitas yang di buat untuk menampilkan dan menyembunyikan suatu obyek seperti widget dan lain lain . Sudah paham sobat blogger

Tanpa tunggu lama lama sampi hujan gledek muncul :
Oke yang pertama seperti biasa sobat buka BLOGGER
Pilih Layout
Lalu tambah element/ add element
Pilih HTML/Javascript
Masukin kode berikut kedalamnya :

<style>
.spoiler{background:#f9f9f9 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRR6B1_5M8w4pltb7sWsRYVUda5VOgxN4Ew33mLOGi-iAeThEs1buOIJhk-6CX92rkMmmF-vkKZAV_HKNXp_r_VURVq5GpD73s3geTyujrqN6kwB2Q1i093MfGqKOqxsLawQxajJCC4_sy/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} </style>

<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><span style="font-size: xx-small;"><i><b>Get This <a href="http://fbacklink.blogspot.com/2013/12/cara-membuat-spoiler-keren-tanpa-edit.html/" target="_blank" rel="dofollow" title="widget">Widget</a></b></i></span>

Pilih simpan /save
Selesaiiii  Horeeee horeee horeee

Sampai disni dulu tutor kali ini, ane mau nonton indonesia  lawan thailand dulu
#Glory Glory Indonesia #Forza INDONESIA

Live DEMO

DEMO

Masukan Kode Widget Anda