Cara Buat Slide Out Panel Dengan JQuery

Cara Buat Slide Out Panel Dengan JQuery

Pada Kesempatan Kali ini Saya Akan Berbagi Tutorial Blogger Yang Di Request Salah Satu Sobat Filiex Yakni Cara Membuat Slide Out Panel Dengan JQuery Dan Sebagai Contoh Sobat Bisa Melihat Di Sisi Kiri Blog ini!!! Nah Biar Gak Penasaran Mari Kita Langsung Pada Tutorial Pembuatannya.


Berikut Langkah Langkah Pembuatannya.

  • Login Ke Akun Blogger Sobat.
  • Masuk Pada Rancangan
  • Pilih Edit HTMl Dan Seperti Biasa Jangan Lupa Centang Expand Template Widget
  • Lalu Cari Kode ]]> Dan Biar Mudah Gunakan Ctrl F Aja
  • Bila Kode Di Atas Sudah Ketemu Silahkan Sobat Tambah Kode Berikut Tepat Diatas Kode ]]> Tadi.
    /* Panel */
    .panel{position:fixed;top:10px;left:0;background:#000;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;border:1px solid #666;width:320px;height:auto;filter:alpha(opacity=85);-moz-opacity:0.85;opacity:0.85;display:none;padding:10px 30px 30px 100px}
    .panel p{color:#fff;margin:0 0 15px;padding:0}
    .panel a,.panel a:visited{color:#9FC54E;text-decoration:none;margin:0;padding:0}
    .panel a:hover,.panel a:visited:hover{color:#fff;text-decoration:none;margin:0;padding:0}
    a.trigger{position:fixed;text-decoration:none;top:15px;left:0;font-size:16px;letter-spacing:-1px;font-family:verdana, helvetica, arial, sans-serif;color:#fff;font-weight:700;background:#000 url(https://lh5.googleusercontent.com/-2kyisxxZjQ8/Tng_A5C5YhI/AAAAAAAAAaA/wg1h8DDk4As/plus.png) 85% 55% no-repeat;border:1px solid #fff;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;-moz-border-radius-bottomleft:0;-webkit-border-bottom-left-radius:0;display:block;padding:10px 35px 10px 10px;filter:alpha(opacity=85);-moz-opacity:0.85;opacity:0.85;}
    a.trigger:hover{position:fixed;text-decoration:none;top:15px;left:0;font-size:16px;letter-spacing:-1px;font-family:verdana, helvetica, arial, sans-serif;color:#fff;font-weight:700;background:#000 url(https://lh5.googleusercontent.com/-2kyisxxZjQ8/Tng_A5C5YhI/AAAAAAAAAaA/wg1h8DDk4As/plus.png) 85% 55% no-repeat;border:1px solid #fff;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;-moz-border-radius-bottomleft:0;-webkit-border-bottom-left-radius:0;display:block;padding:10px 40px 10px 10px}
    a.active.trigger{background:#222 url(https://lh5.googleusercontent.com/-kTEK5–jnLc/Tng_AowqsmI/AAAAAAAAAZ8/mfY6WCN_vPo/minus.png) 85% 55% no-repeat}
    .kolom{clear:both;width:330px;line-height:22px;padding:0 0 20px}
    a:focus{outline:none}
    .panel img{border:1px solid #666;float:right;margin:3px 0px 6px 5px;padding:2px}
    .panel h3{border-bottom:1px solid #666;margin-bottom:5px;padding-bottom:3px;text-align:left;clear:both;color:#fff;font-size:13px;font-weight:700}
    .kolom ul,.kolom ul li{list-style-type:none;margin:0;padding:0}

    Keterangan:

    • Kode Yang Di Warnai Orange Adalah Tinggi Posisi Tombol Panel.
    • Kode Yang Di Warnai Hijau Adalah Tinggi Posisi Slide Out Panel.
  • Selanjutnya Sobat Cari Kode
  • Bila Sudah Ketemu Silahkan Sobat Tambah Kode Berikut Tepat Diatas Kode Tadi.

    $(document).ready(function(){
    $(".trigger").click(function(){
    $(".panel").toggle("fast");
    $(this).toggleClass("active");
    return false;
    });
    });

  • Bila Sudah Selesai Sekarang Sobat Bisa Menyimpan Template nya.
  • Selanjutnya Sobat Masuk Pada Rancangan Dan Pilih Elemen Laman.
  • Lalu Tambah Gadget Dan Pilih HTML/JavaScript Dan Masukkan Kode Berikut.
    Letakkan Apa Saja Disini Sesuai Selera Sobat Seperti Text Info, Kotak Chat Dan Lain Lain.

    Slide

    Catatan:

    • Silahkan Hapus Text Yang Berwarna Biru Dan ganti Dengan Sesuatu Yang Ingin Sobat Tampilkan Pada Slide Out.
    • Sobat Bisa Mengganti Nama Tombol Panel Dengan Mengganti Tulisan Slide Pada Kode Diatas.
  • Selanjutnya Simpan.
  • Selesai Dan Lihat Hasilnya.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s