Sudah berapa hari ini aku lagi tidak fokus untuk update artikel di karenakan sibuk nya aneka macam acara di daerah saya. Dan untuk untuk hari ini mencoba untuk update artikel yang se'simple mungkin semoga tidak terlalu lama" berada di layar hp. Dan untuk artikel kali ini aku mau mengembangkan kepada sahabat Cara Membuat Kotak Spoiler Dengan CSS (Tanpa JavaScript). Cara nya cukup praktis dan tidak membutuhkan waktu yang usang untuk kalian baca artikel ini dan mempraktekan nya langsung. Tutorial ini aku sanggup kan dari sahabat aku yaitu Mba Igniel dengan blog nya yang berjulukan www.igniel.com.
Sebelum kita lanjut tutorial nya,, aku akan jelaskan apa itu spoiler kali saja sahabat ada yang belum tau apa itu spoiler. Spoiler yakni sebuah kotak yang berfungsi untuk menyembunyikan dan membuka konten atau isi yang kita taro di dalam nya.
Biasa nya spoiler box tampil dengan gaya buka/tutup, sebagian banyak yang menyebutnya show/hide. Kebanyakan di buat melalui javascript atau Jquery alasannya mungkin lebih mudah. Tapi untuk spoiler kali ini yang akan aku bagikan yaitu cukup memakai CSS saja, alasannya bagi aku cukup praktis juga dan kalian sanggup merubah bentuk atau warna yang ada di CSS sesuka kalian.
Cara Membuat Kotak Spoiler Dengan CSS (Tanpa JavaScript)
1. Silakan kalian copy code di bawah ini dan letakan di atas code </style> Atau di ]]></b:skin>. Silakan kalian cocokan dimana sekiranya yang work di template kalian masing", alasannya setiap template berbeda-beda sob. /* Spoiler Box Pure CSS by IGNIEL.COM */ .ignielSpoiler { display:block; margin:10px 0px; border:1px solid #3498db; padding:7px 10px; border-radius:3px; -moz-border-radius:3px; } .ignielSpoiler .tombol { background:#3498db; /* Warna tombol */ color:#fff; /* Warna goresan pena di tombol */ display:inline-block; cursor:pointer; font:normal 600 14px Tahoma,sans-serif; padding:0px; border:none; outline:none; line-height:20px; border-radius:3px; -moz-border-radius:3px; } .ignielSpoiler .tombol:focus { pointer-events:none; } .ignielSpoiler .tombol:before { content:'Lihat Spoiler'; /* Tulisan untuk membuka tombol */ display:inline-block; padding:7px 10px; border-radius:3px; -moz-border-radius:3px; } .ignielSpoiler .tombol:focus::before { content:'Tutup Spoiler'; /* Tulisan untuk menutup tombol */ background:#cc0000; /* Warna tombol dikala spoiler terbuka */ } .ignielSpoiler .isi { background:#e4e4e4; /* Warna background isi spoiler */ pointer-events:auto; visibility:hidden; opacity:0; height:0px; transition:all .5s ease; } .ignielSpoiler .tombol:focus + .isi { visibility:visible; opacity:1; height:auto; margin:10px 0px 5px; padding:10px 15px; transition:all .5s ease; } 2. Lalu untuk code pemanggil nya silakan kalian gunakan code di bawah ini. Dan letakan di setiap kali kalian ingin gunakan di dalam postingan.
<div class="ignielSpoiler"> <div class="tombol" tabindex="0"></div> <div class="isi"> <!-- Isi Spoiler --> Tulis konten yang ingin disembunyikan disini. </div> </div> 3. Selesai. Dan silakan lihat hasil nya. Sebagai teladan liat di bawah ini. Meskipun tampilan teladan nya beda dengan orisinil nya tapi kira - kira menyerupai itu teladan nya. Soal nya spoiler yang aku gunakan sudah aku edit sendiri.
ISI KONTEN DISINI
Mungkin itu saja yang sanggup aku bagikan pada kesempatan kali ini, semoga artikel ini sanggup bermanfaat buat sahabat yang sedang mencari Cara Membuat Kotak Spoiler Dengan CSS (Tanpa JavaScript). Selamat mencoba!
