Halo sob, kembali lagi dengan saya RJS Blog. Kali ini saya akan share yang tentunya sesuai dengan judulnya. Sobat bisa melihat contoh-contoh spoiler yang ada pada blog saya yaitu saya gunakan untuk spoiler Referensi yang berada di paling bawah postingan.
Ya, langsung saja saya berikan tutorialnya ... Cekidot :
Pertama kali yang harus sobat lakukan adalah menambahkan kode javascript Jquery pada blog sobat agar Animasi Spoilernya dapat berjalan. Caranya yaitu dengan menaruh kode dibawah ini dibawah kode <head>.
Berikut kodenya :
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js' type='text/javascript'/>
Lewatkan langkah pemberian script jquery pada blog sobat jika Script jquery sudah terdapat pada blog sobat. Cara mengetahuinya adalah dengan cara menekan tombol CTRL+F lalu masukkan /jquery.min.js dan enter. Jika terdapat script sama seperti yang diatas atau dengan versi yang berbeda lewatkan langkah yang tadi
Setelah itu masukkan kode CSS dibawah ini di atas kode ]]></b:skin> ,
Berikut kodenya :
/* ----------------
CSS SPOILER
------------------ */
.buka-tutup {
background:#56af2e;
color:white;
text-align:center;
padding:8px 12px;
font-family:Tahoma, Verdana;
font-size:13px;
border-radius:5px;
cursor:pointer;
text-align:center;
cursor:pointer;
}
Lalu yang terakhir adalah memasukkan kode JavaScript dibawah ini diatas kode </body>,
Berikut kodenya :
<script type='text/javascript'>
//<![CDATA[
$('.buka-tutup').toggle(function() {
$(this).text('Tutup');
$('#tkp').slideDown(800);
}, function() {
$(this).text('Referensi');
$('#tkp').slideUp(100);
});
//]]>
</script>
Contohnya seperti ini :
Cara pemanggilannya adalah dengan mengetikkan kode berikut pada html bukan compose ya sob.
Berikut kodenya :
<button class="buka-tutup">Referensi</button>
<div id="tkp" style="display: none;">
Isi dari Spoiler
</div>Pada HighLight Hijau Ganti dengan Isi berupa tulisan , gambar ( dengan memasukkan kode ) atau objek yang ingin sobat masukkan kedalam spoiler tersebut.
Itu adalah salah satu contoh spoiler yang saya gunakan sebagai Spoiler Referensi. Jadi, sobat bisa merubah/mengkreasikannya sesuai selera sobat.
3 komentar
Genital hpv warts could be cancerous sometimes
and may lead to vaginal as well as anal cancers in ladies.
Conventional treatments (which means a trip to the doctor or dermatologist) work
when it comes to safely removing a plantar wart.
"Duct Tape for the Treatment of Common Warts in Adults: A Double-blind Randomized Controlled Trial.
Also visit my web site officialwartrolreviews.com
thanks infonya gan, nanti saya praktekkan ya
mas mau tanya nih
kalo kumpulan kata-kata yang ada pada script jquery yang bahasa indonesia dimana ya ?
-Berilah komentar yang sesuai dengan Artikel
-Berilah komentar yang sopan
-Dilarang keras membuat link aktif di komentar
-Dilarang menggunakan kata-kata yang kasar dalam berkomentar
Jika sobat tidak memiliki akun gmail untuk berkomentar, sobat dapat memilih beri komentar sebagai -> pilih yang .." Name/URL ".. Lalu Isikan Nama sobat. Dan jika sobat memiliki blog jgn lupa untuk menuliskannya "URL"-nya ya.
Dan yang paling penting, jangan gunakan panggilan gan atau yang sejenisnya. Wkwk.
Salam hangat dari saya, Reinhard J.S