-->
Showing posts with label JQuery. Show all posts
Showing posts with label JQuery. Show all posts
Cara Membuat Slider Keren dibawah Header BloggingCSSDesign TemplateJavascriptJQuerySlider

-

Selamat Malam buat sobat blogger semua. pada kesempatan kali ini aku akan bagikan bagaimana membuat slider post di bawah header tutorial ini merupakan kelanjutan dari cara membuat recent post slide disidebar yang sudah aku share beberapa waktu yang lalu, dan juga permintaan salah satu sobat saya yang kemarin request tentang tutorial ini. untuk melihat DEMOnya silahkan buka halaman Gemsmeet.
Lanjutkan Membaca »
Cara Membuat Tab View buka-tutup dengan JQuery JQuery

-


Sebelum menggunakan efek ini tentunya blog sobat harus sudah tertanam framework jQuery seperti ini :

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

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

Syntax (Penulisan)

$(selektor).show(kecepatan)
$(selektor).hide(kecepatan)
$(selektor).toggle(kecepatan)

Selektor merupakan objek yang dikenai perintah, sedangkan Kecepatan bisa menggunakan Mildetik (contoh 500, 1000) 'normal', 'slow' atau 'fast'.

Contoh syntax terhadap satu id misalkan #kotak :
$('#kotak").toggle('slow')


Contoh Penggunaan


<span class="hilang">Hilang</span>
<span class="muncul">Muncul</span>
<div id="target"></div>

.muncul, .hilang {
    background:#56af2e;
    color:white;
    text-align:center;
    padding:8px 12px;
    font-family:Tahoma, Verdana;
    font-size:13px;
    border-radius:5px;
    cursor:pointer;
}
#target {
  background:#1f57a3;
  height:150px;
  margin-top:15px;
}

$(document).ready(function() {
    $('.hilang').click(function() {
        $('#target').hide('fast');
    });
    $('.muncul').click(function() {
        $('#target').show('slow');
    });
});


DEMO