Cara Membuat Spoiler Seperti Kaskus Yang Keren Dan Berwarna Terbaru

Jokam-Informatika.com - Sobat mungkin sudah tidak asing dengan website Kaskus, website tersebut merupakan forum untuk umum yang memiliki tujuan agar semua orang dapat memberikan keluhan atau permasalahan mereka kedalam forum tersebut agar dapat dilihat banyak orang, jika keluhan dilihat banyak orang maka bukan hal yang mustahil akan banyak orang juga yang membantu keluhan tersebut kedalam komentar postingan.

Karena postingan didesain dapat diindex sehingga mudah sekali ditemukan kedalam sistem pencarian online seperti Google. Namun, tahukah anda fitur yang sangat fenomenal pada kaskus ialah fiturnya yang dapat menyembunyikan konten tertentu dan dapat dilihat apabila kita menekan tombol yang terkait.

Seperti apakah Kegunaan dan apa itu Spoiler ?

Simak ulasan dibawah ini untuk mengetahui kode beserta fungsinya,

Spoiler - Merupakan metode yang cukup unik karena memiliki fungsi untuk menyembunyikan konten agar tidak memenuhi sebuah halaman website, saat fungsi ini diterapkan ke dalam halaman maka anda bisa melihat konten halaman yang cukup praktis dan tidak berceceran. Konten yang disembunyikan biasanya berupa konten yang dapat memenuhi halaman misalkan Koding dan juga Gambar. Jika fungsi ini diterapkan maka halaman akan terkesan canggih dan juga tidak dipadati oleh konten besar.

Metode yang saya pakai menggunakan kode HTML dan juga CSS, perpaduan keduanya bisa membentuk sebuah tampilan dan juga fungsi yang menyerupai apa yang diterapkan pada halaman website kaskus. Selain itu, anda juga bisa memberikan warna kesukaan atau pilihan anda ke dalam spoiler yang dimaksud dengan tujuan agar lebih elegan dan juga menarik.

Metode ini tidak memakan banyak resource atau bandwith, mengingat fungsionalnya hanya memakai metode HTML dengan CSS. Sehingga dapat dipastikan cukup ringan dan tidak mempengaruhi kinerja website menjadi lebih berat.

Dengan adanya Spoiler, anda membantu pengunjung agar mereka tidak menjelajahi halaman atau website anda terlalu jauh ke bawah yang dapat menyebabkan tangan pengunjung menjadi kelelahan, jika halaman anda dapat diminimize konten yang besar maka hal ini sangat baik situs anda terhadap pelanggan dalam hal konten management.

Oke, langsung saja saya akan memberikan Kode beserta Contoh penerapan apabila sobat menerapkannya kedalam blog atau website sobat.

Kode Spoiler Keren

CSS :

Untuk penempatannya silahkan sobat masukan script CSS dibawah ini kedalam template blog sobat atau website, untuk blogger yakni " Theme > Edit HTML " Kemudian cari tag "</html>" dengan cara CTRL + F kedalam box kode template. Dan tempatkan kode ini tepat diatas kode </hrml>, berikut ini adalah kodenya :


<style>
.clr-spoiler{background-color: #0064ff; border: 1px solid #000000; color: white; padding: 5px;}
</style>

Keterangan :
Sobat bisa mengganti warna kode #0064ff yang memiliki fungsi sebagai warna biru langit menjadi warna kesukaan sobat lainnya dengan kode warna sesuai keinginan sobat.

HTML :

Untuk kode HTML ini bisa sobat terapkan pada artikel tepatnya pada code HTML artikelnya, berikut ini merupakan kodenya :


<div>
<div>
<input 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 = 'HIDE'; } else {
this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none';
this.innerText = ''; this.value = 'SHOW'; }" style="font-size: 10px; font-weight: bold; margin-bottom: 1px; padding: 2px; width: 15%;" type="button" value="SHOW" />
</div>

<div class="clr-spoiler">
<div style="display: none;">



<h1> Selamat Datang Di JOKAM INFORMATIKA[OFFICIAL] </h1>
<br />
<p>Ini merupakan tutorial membuat <b>Spoiler</b></p>



</div>
</div>
</div>

Keterangan :
Diatas 3 penutup div yang lebih tepatnya pada div yang memiliki style display none yang berarti tidak boleh ditampilkan merupakan konten, konten akan tampil apabila button atau tombol di klik oleh pengunjung.

Berikut ini merupakan contohnya :

Bagaimana ?
Cukup mudah bukan ?

Artikel terkait :

Mungkin itu yang dapat saya sampaikan didalam artikel saya yang berjudulkan Cara Membuat Spoiler Seperti Kaskus Yang Keren Dan Berwarna Terbaru.
Semoga apa yang sudah saya sampaikan dapat bermanfaat bagi anda maupun orang lain yang ingin mengetahui tentang Cara Membuat Spoiler Seperti Kaskus Yang Keren Dan Berwarna Terbaru.
Sekian dan terimakasih.