Home / BLOGGER / CSS / JavaScript / Basic Pembuatan Spoiler!

Cara Download Basic Pembuatan Spoiler! Update Terbaru

Sedikit Info Seputar Basic Pembuatan Spoiler! Terbaru 2017 - Hay gaes kali ini team Free Template BLogspot.Com, kali ini akan membahas artikel dengan judul Basic Pembuatan Spoiler!, kami selaku Team Free Template BLogspot.Com telah mempersiapkan artikel ini untuk sobat sobat yang menyukai Free Template BLogspot.Com. semoga isi postingan tentang Artikel BLOGGER, Artikel CSS, Artikel JavaScript, yang saya posting kali ini dapat dipahami dengan mudah serta memberi manfa'at bagi kalian semua, walaupun tidak sempurna setidaknya artikel kami memberi sedikit informasi kepada kalian semua. ok langsung simak aja sob
Judul: Berbagi Info Seputar Basic Pembuatan Spoiler! Terbaru
link: Basic Pembuatan Spoiler!

"jangan lupa baca juga artikel dari kami yang lain dibawah"

Berbagi Basic Pembuatan Spoiler! Terbaru dan Terlengkap 2017

SPOILER ICON PNG
Maksud saya kali ini adalah untuk berbagi tentang bagaimana cara membuat Link spoiler dengan mudah! mengapa saya katakan basic? karena hanya script yang pada intinya saja yang akan saya share di sini, setelah itu bisa sobat bisa kreasikan sendiri ..

Demo Spoiler

Untuk Demo-nya silahkan sobat lihat & praktekan langsung di : JSFiddle.net

Pemasangan

Untuk pemasangan pastikan sobat sebelumnya sudah menyimpan 1 jQuery Library, jika belum silahkan simpan kode jQuery libray di bawah ini sebelum kode </head> : 

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

Pemasangan jQuery pada template cukup 1 saja. Apabila ada beberapa versi jQuery library, maka efek-efek tidak akan berjalan.


Lanjut ke Langkah Pertama : Simpan kode CSS di bawah ini sebelum kode </head> 

<style type='text/css'>
/* ----------------
CSS SPOILER BASIC
------------------ */
.buka-tutup {
    text-align:center;
    cursor:pointer;
}

#tkp {
  margin-top:15px;
padding:5px;
}
</style>

Langkah Kedua : Simpan kode JavaScript dibawah ini sebelum tag </body> 


<script type='text/javascript'>
//<![CDATA[
$('.buka-tutup').toggle(function() {
    $(this).text('Tutup Box Spoiler!');
    $('#tkp').slideDown(800);
}, function() {
    $(this).text('Buka Lagi Box Spoier-nya!');
    $('#tkp').slideUp(100);
});
//]]>  
</script>
Perhatikan Angka 800 dan 100 pada kode di atas, itu adalah value/nilai untuk menentukan kecepatan saat box terbuka dan tertutup.


Penulisan Pada HTML

Terakhir : Pemasangan kode HTML pada area posting / widget sesuai dengan yang di inginkan! 


<button class="buka-tutup">Buka Box Spoiler!</button>
<div id="tkp" style="display:none;">Ini adalah Content yang di hasilkan dari tombol yang sudah sobat klik! :)</div>

Semoga postingan Cara Membuat Spoiler di Blog ini bermanfaat untuk sobat yang membutuhkan.

Itulah sedikit Artikel Basic Pembuatan Spoiler! terbaru dari kami

Semoga artikel Basic Pembuatan Spoiler! yang saya posting kali ini, bisa memberi informasi untuk anda semua yang menyukai Free Template BLogspot.Com. jangan lupa baca juga artikel-artikel lain dari kami.
Terima kasih Anda baru saja membaca Basic Pembuatan Spoiler!

Share this