Cara Membuat Spoiler di Blog dengan JQuery

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

Cara Membuat Spoiler di Blog dengan JQuery – Ketika kita ingin meletkan teks yang berupe kode atau kalimat yang berjumlah banyak, tentunya sangat tidak efektif jika kita menampilkanya secara keseluruhan pada halaman blog kita. Pengunjung akan merasa tidak nyaman, dan loading blogpun bertambah berat, karena banyaknya karakter yang dimuat.

Itulah mengapa kita membutuhkan spoiler. Untuk pengguna yang aktif di forum-forum dunia maya, tentu tidak asing lagi dengan spoiler ini. Spoiler itu adalah tombol yang berfungsi untuk menampilkan dan menyembunyikan karakter teks atau kode. Disini kita akan memplajari bagaimana Cara Membuat Spoiler di Blog dengan JQuery.

Langkah-Langkah :

1. Letakan kode Jquery dibawah ini pada template anda tepat diatas kode </head> ,jika sudah ada jangan lakukan langkah ini,

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

2. Salin kode CSS dibawah ini dan letakan diatas kode ]]></b:skin>

/*
Membuat Spoiler dengan JQuery

*/
blockquote.spoiler {
font:normal normal 11px/16px Verdana,Arial,Sans-Serif;
color:#666;
border:2px dashed #cec2c2;
background-color:#eee2e2;
padding:18px 20px;
-webkit-box-shadow:inset 0px 0px 7px #222;
-moz-box-shadow:inset 0px 0px 7px #222;
box-shadow:inset 0px 0px 7px #222;
margin:0px 30px 15px;
/*
overflow:auto;
height:250px;
(opsional) */
}

button.sp-trigger {
display:block;
outline:none;
cursor:pointer;
margin:20px 0px 10px 30px;
border:none;
background-color:green;
font:bold 11px Verdana,Arial,Sans-Serif;
color:white;
text-shadow:0px 1px 0px rgba(0,0,0,0.4);
padding:5px 10px;
-webkit-border-radius:15px;
-moz-border-radius:15px;
border-radius:15px;
-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
box-shadow:0px 1px 2px rgba(0,0,0,0.4);
}

button.sp-trigger.sp-active {background-color:#981515}