cara membuat widget spoiler background style

Cara membuat widget spoiler background style ini tidak rumit, widget spoiler background style ini memiliki tampilan yang menarik, dan anda layak untuk mencobanya. Widget spoiler background style ini valid HTML 5 dan memiliki kode script yang ringan sehingga tidak mempengaruhi loading halaman blog kesayangan anda. Buat para bloger mania yang menyajikan berbagai khususnya berbagai kode pada halaman blog kesayangannya pemasangan widget spoiler background style ini sangat cocok. Bila anda tertarik dengan widget spoiler background style silahkan simak penjelasan dibawah ini, jangan lupa lihat DEMO pada spoiler " CODE CSS " dibawah ini langsung saja menuju TKP.

Install Program CSS

1. Login ke dashboard anda
2. Masuk ke "TEMPLATE" lalu klik " Edit HTML "
3. Cari code ]]></b:skin> 
4. Copy Code script CSS dibawah ini, pastekan diatas code ]]></b:skin> tadi atau bila template blog anda memakai </style> silahkan pastekan kode CSSnya tepat diatas </style> template anda.

/*****************************************
Name : Widget Spoiler Background Style
By : Rivai Silaban | Blog Design
Update : Jumat, 11 Oktober 2013
******************************************/
.BDRS_spoiler{
border: 2px solid #666;
border-bottom:none;
border-radius: 15px 15px 0 0;
color:#FFFFFF;
cursor:pointer;
font-family:Georgia;
font-weight:bold;
text-shadow:2px 1px 2px #000;
width:100%;
background-color: #999999;
font-size: 14px;
}
.BDRS_spoiler:hover{
background-color: #666666;
color: #FFFFFF;
box-shadow: 0 1px 4px #000 inset;
}
/*** Blog Design CSS and ***/

Keterangan : Tampilan Spoiler diatas ini merupakan DEMO dari tutorial kali ini, hanya tombol spoiler yang berbeda, silahkan anda edit CSSnya sesuai dengan selera atau warna tampilan template anda .

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgG3EL-meD5ca2wnKX-syu3TTajdmsP5VH4HqtvKVxQQ-a8xq3kax_VjhxcQdcecOSJODGpKdff2CBcZ7-J6Me-ObNmHDAO_TXbnHHiGjP5chPrByauU8XF8KN-K5jMZZg8B-HEJ9lNw8A/s1600/bg.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUeoEhNS_QeS1i9I_kWS6MVsEAp0PCg_lQQKbahlUD6vajY009OUf7MLQVGQH34K7cOQPJbwAhvLNsHyCPDb9mivxYbXDkFwGNLmLZIUHoUXpcr7gB1DoI7N-scWrRBKlLVji90eaQcMw/s1600/black.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWNPorznn2QjvLtwRq7piK-VKNpDmixFPMI8XJeRVddqMtPOxqsomUmPWKyAdl3OmCDxoClJb_K0icXGiqsVY2q1QU6FyUwOzlQDFoj5qYHC_i8r7bz3czisQdB7VSTtdNQxgto6sB4Ro/s1600/blue.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyCDVLwsx4pR3747pO9N6kPIzSP4fGcI46gw7b2zAvicXcAGBJpf4eVX7h5t8eLoCkk99YCA-xwNUaPjm43_0EishwnDHYHhPARXmsGIDDYX9XdXTWulKCwXxVGwGiG1GodGNxnbwGHYw/s1600/brown.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9N0PYiiXqpMYWwFiHR62z5dxbpeAX5pdAW8jCNXQghSfZyDBU5pM_II1lbnze0-w9g0wwUMsYFAYpWKDrtXjsiZUVYIHa7JY77f796ZTq00RL3OD0bQO4G6YyaSxmiEy047hXFosukho/s1600/green.png

Install dihalaman postingan

• Untuk pemasangan code tag SPOILER ini tergantung dengan kebutuhan halaman blog anda,
• Untuk memasang dihalaman postingan artikel , anda hanya memasukkan SPOILER code CSS dan tag html dibawah ini pada artikel yang anda posting.
• Masuk ke " Post "
• Kemudian buat " Entri baru "
• Untuk menyematkan code dibawah ini pada postingan anda harus klik " HTML " ( bukan "compose " ) Setelah anda klik " HTML " masukkan code html dibawah ini ditempat yang anda inginkan, kemudian ganti tulisan warna BIRU pada kode yang ada didalam spoiler dibawah dengan tulisan kode html , script atau CSS anda,Untuk HTML atau Scriptnya silahkan konvers dulu.
• Setelah selesai lihat dulu " Pratinjau " sebelum anda save untuk melihat kesempurnaan pemasangan spoiler tersebut.
• Setelah benar benar sudah sempurna silahkan klik " publikasikan "

<!-- BDRS code - start -->
<div style="margin: 2px;text-align:center" >
<div style="margin-bottom: 0px;"><input type="button" class="BD_spoler" style="margin: 0px; padding: 0px; width: 200px; font-size: large; text-align: center;" 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 = 'Close Code'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open Code Here !!'; }" value="Open Code Here !!"/></div>
<div style="border: 1px inset; margin: 0px; padding: 4px; background-color: #EBEBEB; font-family: 'Courier New', Courier, monospace; font-size: 12px;box-shadow:0 0 4px #111 inset;">
<div style="display: none;text-align: left;padding:0 10px;margin:-10px 0;line-height: 20px;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNObcQrYvplqNGND0ReQaVl3tIRjIUWasvlctQ5c_gK_1aaI5xQzT8zlzqA9ChhI2tiEB9To23XJDxw1GrAulRG2MEJ9QaCVIKTKCvFQocU_uwqgZ2bzFMfgtbTzWIFYT9bxaoKW3b6Dc/s1600/code_bg.png);"><p>

Kode Anda Disini

</p></div></div></div>
<!-- BDRS code - start -->

Keterangan Code

• Tulisan kode warna BIRU Merupakan isi dari spoiler, baik itu berupa sebuah code ataupun tulisan.
• Tulisan warna MERAH merupakan link dari background spoiler tersebut, bila anda ingin mengganti backgroundnya sesuai selera anda, silahkan ganti dengan link gambar pada tabel link gambar diatas.

Kesimpulan

Widget Spoiler background style ini kebanyakan digunakan hanya untuk keperluan tutorial yang bersangkutan dengan kode kode html maupun script.

Bila teman teman mengalami masalah dalam pemasangan wiget ini atau ada kesalahan penulisan kode silahkan hubungi saya atau share bersama saya lewat form komentar dibawah ini.

Widget Spoiler background style
Jumat, 11 Oktober 2013
By : Rivai Silaban | Blog Design

Terimakasih atas kunjungannya,Bila anda suka dengan artikel ini silahkan JOIN TO MEMBER BLOG atau berlangganan geratis Artikel dari blog ini, daftarkan email anda pada form subscribe dibawah halaman . Pergunakan vasilitas diblog ini untuk mempermudah anda. Bila ada masalah dalam penulisan artikel ini silahkan kontak saya melalui kotak komentar yang ada dibawah atau gunakan fasilitas yang ada diblog ini untuk menghubungi saya.

Salam Blogger.... !!! .

Admin Rivai Silaban

Share article with : Google+ Facebook Twitter

Di posting oleh : Unknown Update pada : 11:05 AM