Cara membuat tombol Spoiler [Buka/Tutup] Keren

Oleh Unknown

Minggu, 13 Juli 2014

Bagikan :

Tweet

Sahabat Kang PP, saya kehabisan kata-kata untuk basa-basi dulu, hehehe. Oke fix, yang penting adalah tutorialnya bagus kan. Dan kalau tutorial ini berguna bagi anda, tolong dong komentar di bawah :) .

Sebelumnya, saya memberikan tutorial membuat tombol spoiler sederhana dan kali ini Kang PP share kembali dengan Tampilan Lebih Keren Abis, hehe lebay yah. Lihat dulu demonya :

Curahan Hati Kecil Kang PP

Saya sudah membuat blog dengan susah payah, selepas itu saya membuat tutorial sendiri dan akhirnya dibagikan. Tentu itu semua dengan biaya modem Kang PP. Semoga anda membalasnya dengan berkomentar dibawah. Silahkan berkomentar karena blog ini Dofollow.

Pertama, jika ingin di postingan/laman statis maka pilih Tab HTML atau di sidebar maka pilih Html/javascript.

Kedua, silahkan masukan atau letakan kode berikut :

<style>
div.css3droppanel {
position: relative;
margin-bottom: 1em;
}

div.css3droppanel > div {
height: 5px;
padding: 10px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
overflow: hidden;
border:  2px solid #8A0808;
border-radius: 5px;
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: 5px;
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: 200px;
opacity: 1;
overflow: auto;
}

div.css3droppanel label {
position: absolute;
left: 280px; 
width: 60px; 
height: 42px;
bottom: -25px;
border-radius:30%;
cursor: pointer;
z-index: 5;
background: #8A0808;
}

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: 'Lihat';
color:#00FFFF;
position: absolute;
top: 12px;
left: 14px;
}
</style>

<div class="css3droppanel">
<input id="paneltoggle" type="checkbox" />
<label for="paneltoggle" title="Buka/Tutup"></label>
<br />
<div class="content">
Isi spoiler
</div>
</div>

Ketiga, Selesai.

Gimana, bagus kan ? Silahkan berkomentar dibawah setelah membaca artikel diatas.

Semoga Bermanfaat ^_^

 

Tag : CSS, Tutorial Blog