Tambahkan CSS Untuk Modifikasi Tampilan Spoiler Button Dan Ruang

Di hari ini taukahbahwa.blogspot.com akan membahas artikel tentang Tambahkan CSS Untuk Modifikasi Tampilan Spoiler Button Dan Ruang. Semoga dengan artikel Tambahkan CSS Untuk Modifikasi Tampilan Spoiler Button Dan Ruang akan menambah pengetahuan bagi anda pembaca setia taukahbahwa.blogspot.com

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.

.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;
}

tambahkan script ini 

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

dan script ini

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

 

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 aku melakukan penghapusan style css yang sudah ada pada script spoiler awal.

Dapatkan berita terupdate dan unik setiap saat hanya di taukahbahwa.blogspot.com

Homepage|http://taukahbahwa.blogspot.com