Bagaimana cara membuat panel push down dengan CSS3 di blog

Pada tutorial kali ini saya akan share kembali ke anda, tentang Bagaimana cara membuat panel push down dengan CSS3. Panel push down ini ketika kita klik akan mengungkap beberapa konten, proses panel ini akan turun ke bawah dan membuka seluruh konten / isi dari apa yang kita deskripsikan didalamnya. 

DEMO: Silahkan tekan panel dibawah ini..!

Kisah Prabu Siliwangi sangat dikenal dalam sejarah Sunda sebagai Raja Pajajaran. Salah satu naskah kuno yang menjelaskan tentang perjalanan Prabu Siliwangi adalah kitab Suwasit. Kitab tersebut berisi 22 bab perjalanan Prabu Siliwangi dimulai dari ayahnya, Prabu Anggararang Raja Kerajaan Gajah. Setelah Prabu Anggararang merasa puteranya layak memangku jabatan raja, akhirnya kerajaan diserahkan kepada Pangeran Pamanah Rasa (sebelum bergelar Siliwangi). Mengenai nama Siliwangi, dijelaskan bahwa nama tersebut adalah gelar setelah Pangeran Pamanah Rasa masuk Islam sebagai salah satu syarat mempersunting murid Syaikh Quro, yakni Nyi Ratu Subanglarang. Dari isteri ketiga ini, kemudian melahirkan Kian Santang yang bergelar Pangeran Cakrabuana di Cirebon dan Rara Santang, ibunda Sunan Gunung Jati.
Sumber: Sekilas cerita sejarah prabu siliwangi .

MENAMBAHKAN KODE CSS DI BLOG 

• Masuk ke akun blogger anda -> Klik Drop down menu 
• Kemudian klik Template -> Backup template terlebih dahulu -> Edit HTML

• Cari tag / kode ]]></b:skin> tekan CTRL+F  untuk memudahkan anda dalam proses pencarian
• pastekan kode CSS berikut tepat diatas kode  ]]></b:skin>

div.css3droppanel { /* Main wrapper for push down panel */
        position: relative;
        margin: 0;
        margin-bottom: 1em; /* margin with rest of content on page */
        }


div.css3droppanel > div { /* Content DIV DIV inside wrapper */
        height: 10px; /* initial height of content when hidden. Should be same height as bottom bar (see div.css3droppanel:after) */
        padding: 5px;
        -moz-box-sizing: border-box; /* ensure any padding and border declared inside content DIV doesn't increase DIV's declared dimensions */
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        overflow: hidden;
        background: #b5e5e0; /* background of content DIV */
        position: relative;
        opacity: 0;
    -moz-transition: all 0.2s ease-in-out 0.1s;  /* CSS3 transition of UL state. Last 0.1s specifies delay before animation */
    -o-transition: all 0.2s ease-in-out 0.1s; /* instead of ease-in-out, also try cubic-bezier(0.25, 0.1, 0.25, 1.4) instead */
    -webkit-transition: all 0.2s ease-in-out 0.1s;
    transition: all 0.2s ease-in-out 0.1s;
        }

div.css3droppanel:after { /* Add bottom bar beneath wrapper */
        content: '';
        display: block;
        bottom: 0;
        position: absolute;
        width: 100%;
        height: 10px;
        box-shadow: 0 3px 8px gray, 3px 3px 4px brown inset;
        background: #5a1619; /* dark redish background and its gradient versions */
        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"] { /* style invisible checkbox element used to toggle state of push down panel */
        position: absolute;
        right: 50px; /* right position of checkbox */
        width: 60px; /* width of checkbox */
        height: 42px; /* height of checkbox */
        bottom: -34px; /* bottom offset of checkbox */
        z-index: 10;
        cursor: pointer;
        opacity: 0;
        }

div.css3droppanel input[type="checkbox"]:checked ~ div { /* when checkbox is checked, expand content within wrapper */
        height: 250px; /* height of content to expand to. Scrollbar will be shown if content overflows this height */
        opacity: 1;
        overflow: auto;
        }

div.css3droppanel label { /* style label that's positioned below wrapper's bottom bar, and will toggle checkbox when interacted with */
        position: absolute;
        right: 50px; /* right position of label */
        width: 60px; /* width of label */
        height: 42px; /* height of label */
        bottom: -34px; /* bottom offset of label */
        border-bottom-left-radius: 30px;
        border-bottom-right-radius: 30px;
        cursor: pointer;
        z-index: 5;
        background: #5a1619; /* dark redish background and its gradient versions */
        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 { /* style of label when mouse rolls over it */
        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 { /* generated down arrow */
        content: '';
        position: absolute;
        display: block;
        width: 0;
        height: 0;
        border: 12px solid transparent;
        border-color: white transparent transparent transparent;
        top: 18px;
        left: 18px;
        box-shadow: 0 0 7px gray inset;
        }

•  Simpan Template ...

KODE HTML

• Tambahkan kode HTML berikut didalam postingan (HTML bukan compose) atau anda bisa meletaknnya di gadget HTML/Javascript
•  Klik Tata letak -> Tambahkan gadget -> masukan kode didalamnya -> Simpan gadget.

<div class="css3droppanel">
<input type="checkbox" id="paneltoggle" />
<label for="paneltoggle" title="Click to open Panel"></label>
<div class="content">

<!--panel content goes here-->

<br />
Kisah Prabu Siliwangi sangat dikenal dalam sejarah Sunda sebagai Raja Pajajaran. Salah satu naskah kuno yang menjelaskan tentang perjalanan Prabu Siliwangi adalah kitab Suwasit. Kitab tersebut berisi 22 bab perjalanan Prabu Siliwangi dimulai dari ayahnya, Prabu Anggararang Raja Kerajaan Gajah. Setelah Prabu Anggararang merasa puteranya layak memangku jabatan raja, akhirnya kerajaan diserahkan kepada Pangeran Pamanah Rasa (sebelum bergelar Siliwangi). Mengenai nama Siliwangi, dijelaskan bahwa nama tersebut adalah gelar setelah Pangeran Pamanah Rasa masuk Islam sebagai salah satu syarat mempersunting murid Syaikh Quro, yakni Nyi Ratu Subanglarang. Dari isteri ketiga ini, kemudian melahirkan Kian Santang yang bergelar Pangeran Cakrabuana di Cirebon dan Rara Santang, ibunda Sunan Gunung Jati.<br />
Sumber: <a href="http://jalu-pangna.blogspot.com/2012/12/sekilas-cerita-sejarah-prabu-siliwangi.html">Sekilas cerita sejarah prabu siliwangi</a>.
<br />

<!-- end panel content -->

</div>

</div>

 KETERANGAN: 

• Warna kuning adalah konten yang dideskripsikan
• Ganti warna hijau dengan URL/Link sumber anda
• Warna Aqua adalah nama judul dari link sumber

Semoga bermanfa'at..