Modifikasi Spoiler Box Dengan CSS3 Efek Toggle

Modifikasi Spoiler Box Dengan CSS3 Efek Toggle - Spoiler Box seperti yang sudah kita ketahui merupakan sebuah kotak yang kita gunakan untuk menyimpan sebuah text, gambar atau beberapa widget yang terdapat pada sidebar blog, namun jarang sekali yang menggunakan cara ini dikarenakan tampilan spoiler box yang default mode, sehingga pada pertemuan sebelumnya saya telah modifikasi spoiler box dengan tampilan PANEL HOVER, selengkapnya anda boleh baca artikel saya sebelumnya tentang Membuat Panel Slide Untuk Menyimpan Text.

Tidak jauh berbeda pada artikel sebelumnya, jika pada panel sebelumnya saya menggunakan sentuhan CSS default code, kali ini saya akan coba membalut kodenya dengan CSS3 Efek Toggle.

<div class="css3droppanel">
.codefile_design  .css3file {http://googlecode.com/sahabatblogger77.blogspot.com/input_css3code;}
<input type="checkbox" id="paneltoggle" />
<label for="paneltoggle">
div.css3droppanel {position: relative; margin: 0; margin-bottom: 1em;}
</ div>
</ label>

Coba perhatikan kode diatas, sekilas tidak ada kesalahan, namun coba kita kirimkan kode tersebut kepada W3C Validator, maka akan ada beberapa kode yang error, tidak mau bukan meng-copy kode yang error untuk HTML Template blog anda? hehe..!!
Mari kita modifikasi kode berikut dan kita kembangkan untuk menampilkan Spoiler Box Dengan CSS3 Efek Toggle versi terbaru. Kode dibawah ini akan saya susun dengan pemapatan EXTRA dan menempatkan susunan letaknya diarea yang benar, agar anda lebih mudah memahami dan meng-custom buat tampilan spoiler box pada postingan blog anda.

CSS3 Kode

div.css3droppanel {position: relative;margin-bottom: 1em;}
div.css3droppanel > div {height: 10px;padding: 5px;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;overflow: hidden;background: #b5e5e0;position: relative;opacity: 0;-moz-transition: all 0.2s ease-in-out 0.1s;-o-transition: all 0.2s ease-in-out 0.1s;-webkit-transition: all 0.2s ease-in-out 0.1s;transition: all 0.2s ease-in-out 0.1s;}
div.css3droppanel:after {content: '';display: block;position: absolute;width: 100%;height: 10px;box-shadow: 0 3px 8px gray, 3px 3px 4px brown inset;background: #5a1619;background: -moz-linear-gradient(top, rgba(118,36,41,1) 0%, rgba(117,5,11,1) 50%, rgba(56,38,39,0.72) 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(118,36,41,1)), color-stop(50%,rgba(117,5,11,1)), color-stop(100%,rgba(56,38,39,0.72)));background: -webkit-linear-gradient(top, rgba(118,36,41,1) 0%,rgba(117,5,11,1) 50%,rgba(56,38,39,0.72) 100%);background: -o-linear-gradient(top, rgba(118,36,41,1) 0%,rgba(117,5,11,1) 50%,rgba(56,38,39,0.72) 100%);background: -ms-linear-gradient(top, rgba(118,36,41,1) 0%,rgba(117,5,11,1) 50%,rgba(56,38,39,0.72) 100%);background: linear-gradient(to bottom, rgba(118,36,41,1) 0%,rgba(117,5,11,1) 50%,rgba(56,38,39,0.72) 100%);}

div.css3droppanel input[type="checkbox"] {position: absolute;right: 50px;width: 60px;height: 42px;bottom: -34px;z-index: 10;cursor: pointer;opacity: 0;}
div.css3droppanel input[type="checkbox"]:checked ~ div {height: 250px;opacity: 1;overflow: auto;}
div.css3droppanel label {position: absolute;right: 50px;width: 60px;height: 42px;bottom: -34px;border-bottom-left-radius: 30px;border-bottom-right-radius: 30px;cursor: pointer;z-index: 5;background: #5a1619;background: -moz-linear-gradient(top, rgba(118,36,41,1) 0%, rgba(117,5,11,1) 50%, rgba(124,31,32,0.72) 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(118,36,41,1)), color-stop(50%,rgba(117,5,11,1)), color-stop(100%,rgba(124,31,32,0.72)));background: -webkit-linear-gradient(top, rgba(118,36,41,1) 0%,rgba(117,5,11,1) 50%,rgba(124,31,32,0.72) 100%);background: -o-linear-gradient(top, rgba(118,36,41,1) 0%,rgba(117,5,11,1) 50%,rgba(124,31,32,0.72) 100%);background: -ms-linear-gradient(top, rgba(118,36,41,1) 0%,rgba(117,5,11,1) 50%,rgba(124,31,32,0.72) 100%);background: linear-gradient(to bottom, rgba(118,36,41,1) 0%,rgba(117,5,11,1) 50%,rgba(124,31,32,0.72) 100%);box-shadow: 0 3px 8px black, 5px 5px 6px brown inset, 0 -3px 3px rgba(152,41,47,0.7) inset, 0 5px 0 rgba(255,255,255,0.7) inset;}

div.css3droppanel label:hover {
box-shadow: 0 3px 8px black, 5px 5px 6px brown inset, 0 -3px 3px rgba(152,41,47,0.7) inset, 0 5px 0 rgba(255,255,255,0.7) inset, 0 0 15px rgba(255,255,255,0.8) inset;}
div.css3droppanel label:after {content: '';position: absolute;display: block;border: 12px solid transparent;border-color: white transparent transparent transparent;top: 18px;left: 18px;box-shadow: 0 0 7px gray inset;}

Kode HTML

<div class="css3droppanel">
<input type="checkbox" id="paneltoggle" />
<label for="paneltoggle" title="OPEN"> </ label>
<div class="content">
<p> TULIS TEKS ANDA DISINI </ p>

Buat semua kawan pecinta SAHABAT BLOGGER 77, jika ingin membuat Spoiler Box Dengan CSS3 Efek Toggle versi terbaru, berikut tutorial pemasangan kode css3 pada HTML Template anda

1. Pada dashboard pilih Template + SESUAIKAN + Tingkat Lanjut, selanjutnya gulir menu kebawah, lihat dan temukan icon tambahkan CSS
2. Cukup copy kode diatas pada kolom CSS3 Code, Paste kode tersebut pada tab halaman CSS, lihat gambar

3.  Terapkan ke Blog 
4. Selanjutnyan copy kode HTML diatas, letakkan pada halaman postingan mode HTML bukan Compose, ganti text Merah dengan tulisan anda
5. Tambahkan kode </div> </div> pada akhir tulisan anda
6. Publikasikan tulisan anda, jika anda melakukannnya dengan benar akan seperti ini tampilan hasilnya

DEMO