Tambahkan CSS Untuk Modifikasi Tampilan Spoiler Button Dan Ruang

Situseo Blog : Memperbaiki tampilan spoiler dengan menambahkan css, Penggunaan spoiler sekarang ini sudah jarang dipakai, mungkin karena tampilannya yang standar, tapi secara fungsi spoiler bisa dipergunakan untuk memperbaiki tampilan blog, baik itu untuk bagian posting maupun bagian sidebar, tentunya tampilan spoiler sendiri harus berubah supaya menjadi sedikit elegan dan lebih enak dipandang mata, tampilan spoiler tentunya bisa kita ubah dengan menambahkan style css untuk memperbaiki (modifikasi) bentuk tampilannya, baik itu modifikasi tampilan tombol maupun modifikasi tampilan ruang spoiler itu sendiri.

Spoiler yang berfungsi untuk menyembunyikan teks atau gambar dan menampilkannya dengan cara meng-klik tombol show, sangat berguna untuk meringkas bagian ruang, terutama untuk bagian ruang posting jika spoiler tersebut dipergunakankan pada bagian posting. Script spoiler secara umum yang beredar di internet adalah seperti ini :

<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; margin-top: 5px; width: 60px;" type="button" value="Show" />
<div style="border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">
ISI SPOILER
</div>
</div>

Sayangnya untuk browser chrome fungsi show/hide (teks-nya) tidak berjalan baik, dalam artian setelah meng-klik tombol show seharusnya teks show berganti dengan teks hide, tapi untuk browser firefox dan opera fungsi teks-nya masih berjalan baik.

Dengan script tersebut akan menghasilkan spoiler dengan tampilan standar pada bagian button-nya (tombol) dan tampilan yang sederhana pada bagian ruang spoilernya, walaupun sudah ada style css di dalamnya.

Untuk memperbaiki tampilan spoiler pada bagian button, kita bisa tambahkan style css untuk modifikasi bagian button-nya. Layaknya kita membuat tombol atau button pada blog, kita bisa mempergunakan script css button untuk memodifikasi bagian tombol spoiler, sebagai contoh dibawah ini adalah script css yang membentuk sebuah tombol/button :

Css untuk Tombol Spoiler

.button_spoiler {
color: #808080;
padding: 5px 25px;
display: inline-block;
text-decoration: none;
border: 1px solid #9c9c9c;
text-shadow: 1px 1px 0px #c7c7c7;
font: bold 16px Arial, Helvetica, sans-serif;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
-moz-box-shadow: inset 0px 1px 0px 0px #ffffff;
-webkit-box-shadow: inset 0px 1px 0px 0px #ffffff;
box-shadow: inset 0px 1px 0px 0px #ffffff;
background-color: #ebebeb;
background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ebebeb), color-stop(1, #919191) );
background: -moz-linear-gradient( center top, #ebebeb 5%, #919191 100% );
filter:progid: DXImageTransform.Microsoft.gradient(startColorstr='#ebebeb', endColorstr='#919191');
}
.button_spoiler:hover {
background-color: #919191;
background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #919191), color-stop(1, #ebebeb) );
background: -moz-linear-gradient( center top, #919191 5%, #ebebeb 100% );
filter:progid: DXImageTransform.Microsoft.gradient(startColorstr='#919191', endColorstr='#ebebeb');
}
.button_spoiler:active {
position: relative;
top: 1px;
}

Dengan script css tersebut akan membentuk sebuah tombol untuk menggantikan tampilan tombol spoiler yang standar (default).

Seperti pada script spoiler diatas, posisi tombol akan berada pada sebelah kiri, untuk merubah posisi tombol pada posisi tengah, kalian bisa menambah kode css seperti ini :

Css Untuk Posisi Tombol

#spoiler {
margin-top: 10px;
text-align: center;
}

Jika posisi tombol ingin berada pada posisi kanan, kalian bisa merubah perintah text-align menjadi right, atau jika lebih menyukai posisi tombol tetap default pada posisi sebelah kiri, kalian tidak perlu menambah kode css tersebut atau bisa juga mengganti perintah text-align menjadi left.

Selesai sudah css tambahan untuk memodifikasi bagian tombol pada spoiler, tentunya dengan tampilan tombol spoiler yang sudah dimofikasi menjadi lebih baik dari segi tampilannya, untuk mengimbangi tampilan tombol supaya tidak janggal dari segi tampilannya, kita juga perlu memodifikasi bagian ruang spoiler, dalam hal ini Situseo Blog hanya mengganti dari sisi background-nya saja untuk ruang spoiler, untuk lebih baiknya, kalian bisa memodifikasi tampilannya dengan menambah style yang lain.

Css Untuk Ruang Spoiler

.ruang_spoiler {
-webkit-border-radius: 15px
-moz-border-radius: 15px;
border-radius: 15px;
background: #ebebeb;
padding: 5px 10px;
color: #000;
}

Keseluruhan css untuk modifikasi tampilan spoiler, baik itu css untuk tombol dan bagian ruang sudah ada, sekarang kita tinggal menempatkan script tersebut pada tempatnya, supaya tampilan spoiler berubah :

Menerapkan Modifikasi Tampilan Spoiler

Hal pertama yang dilakukan, masuk pada menu Tempalate - Edit HTML dan letakan kode css tersebut diantara <b:skin><![CDATA[ dan ]]></b:skin> atau secara umum biasanya peletakannya diatas kode ]]></b:skin> kemudian Save template kalian.

Hal kedua, perhatikan script spoiler diatas dan tambahkan kode pemanggil untuk memanggil script css yang telah di letakan pada template, sehingga script spoiler-nya menjadi seperti ini :

<div id="spoiler">
<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'; }" type="button" class="button_spoiler" value="Show" /> </div>
<div class="ruang_spoiler">
<div style="display: none;">
ISI SPOILER
</div>
</div>

Perhatikan dan bandingkan dengan teliti script spoiler awal dan script spoiler akhir, karena Situseo Blog melakukan penghapusan style css yang sudah ada pada script spoiler awal.

Selesai sudah modifikasi tampilan spoiler button dan ruang spoiler, selanjutnya terserah kalian mau dipergunakan untuk apa spoiler tersebut. Untuk melihat hasilnya, bisa melihat pada sample hasil modifikasi spoiler dengan mengklik link demo dibawah ini.

Demo Hasil Modifikasi Spoiler

Semoga bermanfaat,