Juni 06, 2012

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

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.


Semoga bermanfaat,

6 Diskusi untuk Tambahkan CSS Untuk Modifikasi Tampilan Spoiler Button Dan Ruang

22 Juni 2012 11.42  

itu kok kurang jelas kita harus taruh dmananya?kurang jelas gan

26 Juni 2012 20.55  

@Ignatiustrf untuk spoilernya sendiri bisa di letakan pada postingan dalam mode html, atau bisa diletakan pada sidebar sebagai widget (tergantung kebutuhan peletakannya)

13 Agustus 2012 01.09  

pak mau tanya, kode kalo di letakkan di widget sidebar bisa jalan, tapi kalo di mode html posting gak jalan. mohon bantuannya

2 Oktober 2012 02.32  

wah, sayang sekali kurang perfect pas di pakai di chrome,padahal kern bgt tuh spoilernya sob...

2 Juni 2013 20.25  

ga nyangka nemu blog keren gini, jadi ngiri gue...

24 November 2016 08.29  

Apakah Anda menderita secara finansial atau Anda membutuhkan uang tunai mendesak untuk membayar tagihan Anda? Dan Anda ingin mengambil risiko mengubah hidup Anda sendiri. Mencoba dan mendapatkan kartu ATM kosong Anda hari ini dan menjadi salah satu yang beruntung seseorang yang mendapatkan manfaat dari kartu ini. Kartu ATM ini diatur mampu hacking ke setiap mesin ATM mana saja di dunia. Aku harus tahu tentang kartu ATM kosong ini ketika saya sedang mencari pekerjaan secara online sekitar sebulan yang lalu. Ini benar-benar mengubah hidup saya selamanya dan sekarang saya bisa mengatakan saya kaya karena saya kesaksian hidup. Semakin sedikit uang yang saya dapatkan dalam satu hari dengan kartu ini adalah $ 3.000. Bahkan sekarang dan kemudian terus memompa uang ke rekening saya. Meskipun kartu tersebut ilegal namun tidak ada resiko tertangkap. Hal ini diprogram sedemikian rupa sehingga tidak dapat dilacak dan juga memiliki teknik yang membuat tidak mungkin untuk kamera CCTV untuk mendeteksi Anda ketika menggunakannya. Untuk rincian tentang cara untuk mendapatkan Anda hari ini kontak speedhackersnetwork001@gmail.com

Posting Komentar

supaya diskusi berjalan baik, gunakan tombol jawab untuk reply. penggunaan tombol jawab, jangan menghapus kode komentar pada kotak komentar, cukup mengetikan komentar disebelah atau dibawah kode komentar. Terima kasih.

rate this post
beri nilai posting ini
Terima kasih,

Template by Dicas Blogger | Modifikasi ulang oleh Mas Dalang

101011  ©Situseo Blog | Powered by Blogger | Back to Top