Cara Membuat Spoiler Seperti Kaskus Yang Keren Dengan Proteksi Password

Jokam-Informatika.com - Sobat sebelumnya mungkin sudah mempelajari tentang cara membuat spoiler seperti kaskus dan juga mempunyai warna yang bisa disesuaikan dengan keinginan sobat sendiri, pada penjelasan sebelumnya kaskus merupakan website yang didesain untuk menyelesaikan berbagai masalah penggunanya melalui postingannya yang dikomentari oleh berbagai pengunjung website kaskus dari berbagai penjuru dunia melalui Search Engine seperti Google, Bing, Yahoo dan Yandex.

Salah satu fitur yang unik dari website kaskus merupakan spoiler yang memiliki fungsi untuk menyembunyikan dan memperlihatkan konten ketika pengunjung menekan tombol tertentu. Kabar baiknya, sobat bisa membuatnya sendiri di dalam website atau blog sobat miliki tentunya.

Nah, selain itu sobat dapat memberi fitur keamanan berupa password pada spoiler sehingga tidak sembarang orang bisa membaca konten yang ada di dalam spoiler yang sobat sembunyikan.

Seperti apakah cara membuat spoiler dengan proteksi password di dalam blog ?

Simak ulasan di bawah ini untuk mengetahuinya beserta kode untuk membuatnya,

Spoiler - Merupakan salah satu metode untuk menyembunyikan sebuah konten apapun, baik itu gambar, video, teks dan lain sebagainya. Tujuan utama konten yang disembunyikan adalah untuk menghindari penuhnya konten pada sebuah halaman website, karena apabila sebuah halaman dipenuhi oleh banyak konten maka hal ini bisa menyebabkan pengunjung merasa bosan untuk membaca dan melihat konten hingga ke bagian bawah atau dasar dari halaman. Hingga banyaknya sampai-sampai membuat scrollbar menjadi sangat kecil.

Namun jangan salah, meski fungsi atau tujuan utama dari spoiler adalah untuk menyembunyikan konten akan tetapi sobat bisa memperlihatkan kembali apabila pengunjung menekan tombol tertentu yang sudah sobat buat, tombol tersebut memiliki fungsi untuk menyembunyikan konten sekaligus memperlihatkan content saat tombol tersebut diklik. Tentunya hal ini dapat menghemat ruang atau tempat dari halaman muka website milik sobat.

Untuk beberapa alasan tertentu, proteksi password mungkin akan tetap dibutuhkan pada fungsi spoiler untuk alasan keamanan supaya konten tidak dilihat atau disalahgunakan oleh sembaran pengunjung. Sehingga ketika pengunjung ingin melihat konten yang ada di dalam spoiler maka mereka akan dihadapkan dengan sebuah form yang memiliki fungsi untuk menginputkan password, sedangkan password nantinya akan digunakan untuk membuka spoiler. Anda bebas menentukan password apa yang akan diberlakukan dan ketika pengunjung salah memasukkan password maka mereka tidak akan bisa membuka spoiler yang didalamnya memiliki konten.

Sehingga konten yang sobat sembunyikan hanya bisa dilihat atau dibuka oleh orang tertentu yang mengetahui password spoiler milik sobat.

Berikut ini merupakan cara untuk membuatnya :

Kode Spoiler Password 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 type="button" value="Show" style="font-size: 10px; font-weight: bold; margin-bottom: 1px; padding: 2px; width: 15%;" onClick="password=prompt('Please enter password to view this content...',' ');
if (password=='Jokam-Informatika.com'){
 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';
 }
} else {
 if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') {
  alert('Password Salah!');
 }
 if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none') {
  this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none';
  this.innerText = '';
  this.value = 'Show';
 }
}

">
</div>

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

Ini Adalah Konten Spoiler

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

Keterangan :
(1). Kata "Ini Adalah Konten Spoiler" merupakan konten yang ada didalam spoiler. Sobat bisa mengubah sesuai dengan konten yang sobat inginkan.
(2). Sedangkan untuk " password=='Jokam-Informatika.com' " merupakan fungsi password, untuk menggantinya maka ubah Jokam-Informatika.com sesuai dengan password yang sobat inginkan.

Berikut ini merupakan contohnya :

Bagaimana ?
Cukup mudah bukan ?

Artikel terkait :

Cara Membuat Spoiler Seperti Kaskus Yang Keren Dan Berwarna Terbaru

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