Pages

Cara Membuat 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 ]]></b:skin> Dan Biar Mudah Gunakan Ctrl F Aja
  • Bila Kode Di Atas Sudah Ketemu Silahkan Sobat Tambah Kode Berikut Tepat Diatas Kode ]]></b:skin> 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyMC7nF-O99RTgZpn7WWCvvnZJXU7wOCgA6FVn42wIJskIUbdgOTQvfnW7nPHR0PFTYxE0ruMW9qDHyZDlpUC1TqCNU0hTuAgfYErggD33h2JqlPC_Q4epxGXmOstBjGTa0qJuQD3UTlHW/) 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyMC7nF-O99RTgZpn7WWCvvnZJXU7wOCgA6FVn42wIJskIUbdgOTQvfnW7nPHR0PFTYxE0ruMW9qDHyZDlpUC1TqCNU0hTuAgfYErggD33h2JqlPC_Q4epxGXmOstBjGTa0qJuQD3UTlHW/) 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9RKekrD5j1qMYGXWLDFJ58quF5Jk6sZ-DoAOBFD4i2XQaEO5AZmRPjLTpwDDCHouRaar-KjYzC24Xz23uxLQJgvObefqs9faGqpX1zX_AOiUiakKqV05lRLYnPq87tjJbyyrjvXqUekSJ/) 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 </head>
  • Bila Sudah Ketemu Silahkan Sobat Tambah Kode Berikut Tepat Diatas Kode </head> Tadi.
    <script src='http://filiex.googlecode.com/files/jquery-1.3.2.js' type='text/javascript'/>

    <script type='text/javascript'>
    $(document).ready(function(){
    $(&quot;.trigger&quot;).click(function(){
    $(&quot;.panel&quot;).toggle(&quot;fast&quot;);
    $(this).toggleClass(&quot;active&quot;);
    return false;
    });
    });
    </script>
  • 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.
    <div class='panel'>
    Letakkan Apa Saja Disini Sesuai Selera Sobat Seperti Text Info, Kotak Chat Dan Lain Lain.
    </div>
    <a class='trigger' href='#'>Slide</a>
    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.

Selamat Mencoba Semoga Berhasil Dan Silahkan Tinggalkan Komentar untuk Keluhan, Pertanyaan Dan Request, Terima Kasih.

Alfiona

Phasellus facilisis convallis metus, ut imperdiet augue auctor nec. Duis at velit id augue lobortis porta. Sed varius, enim accumsan aliquam tincidunt, tortor urna vulputate quam, eget finibus urna est in augue.

21 comments:

  1. kenapa setelah sy coba kok tampilan blog saya malah jadi gk aturan.
    lebar kolom postingnya menyusut.

    ReplyDelete
  2. Coba Perhatikan Kode Diatas </head> Bila BLog sobat Sudah Ada kode jquery-1.3.2.js Sobat Tidak Perlu Memasang Kode jquery-1.3.2.js Yang Saya Berikan. intinya Tidak Boleh Double Dan Harus Pakai Satu Kode.

    ReplyDelete
  3. tidak ada kode tersebut di atas head saya bos.

    ReplyDelete
  4. @musikmokonkCoba Pakai Ctrl F Untuk Melakukan Pencarian Kode jquery-1.3.2.js Mungkin Ada Di Template Sobat Dan Kalau Tetap Tidak Ada Coba Sobat Ulangi Langkah Langkah Tutorialnya.

    ReplyDelete
  5. @Filiex Boy
    tetap tidak ada bos.
    tapi yg menjadikan blog saya acak-acakan itu kode yang d atas ]]> itu bos. tolong solusinya

    ReplyDelete
  6. @musikmokonk
    Saya Sudah Mengubah Beberapa Kode Pada Tutorial Diatas Dan Silahkan Sobat Ulangi Langkah2 nya Dan Kali ini Pasti Berhasil. Template Sobat Menyusut itu Karna Ada Kode Yang Bentrok Coz Template Sobat Adalah Template Bawaan Blogspot.
    SObat Tenang Aja Kali ini Sobat 100% Pasti Berhasil kok.

    ReplyDelete
  7. mantap ne gan post nya, izin noba gan

    ReplyDelete
  8. Gimana Caranya Membuat widget itu secara berurutan secara vertical sprti pnya anda,....
    pnya q hasilnya numpuk2 gan,...

    ReplyDelete
  9. @Arie Wibowo Caranya Sangatlah Mudah, Pertama Sobat Harus Mengubah top:15px Pada Kode CSS (Diatas Kode ]]></b:skin>) Dan Selanjutnya Bila Sobat Ingin membuat Lebih Dari Satu Panel, Sobat Harus Mengubah Nama/Kode saja Pada CSS (Diatas Kode ]]></b:skin>) Dan Javascript (Diatas Kode </head>) Dan Contohnya: Panel Diganti Banel Dan a.trigger Diganti a.jogger Dan Intinya Tidak boleh Ada Nama Kode Yang Sama.

    ReplyDelete
  10. terima kasih kawan atas tipsnya... : D

    ReplyDelete
  11. Gan Punya ku kok ketutup posting ya,....
    nggak bisa d depan posting gtu,.......

    ReplyDelete
  12. http://e-bisniss.blogspot.com/

    ReplyDelete
  13. @Arie Wibowo Kalau Panel Yang Mas Arie buat Tertutup Oleh Postingan Blog, Silahkan mas Arie masuk ke Elemen Laman Dan pindahkan atau Drag Gadget Panel HTML/Javascript Ke Sidebar Sebelah kanan Lalu Jangan lupa Di SAVE Atau Simpan. Lihat Hasilnya.... Pasti Bisa!!!

    ReplyDelete
  14. Makasih gan,.....
    Berhasil,.....

    ReplyDelete
  15. tank,.. bro,.. blognya mantap banget,.. kpn2 klau sempet mampir di blogQ y.. http://sangperaihimpian.blogspot.com/ terima kasih atas ilmunya

    ReplyDelete
  16. Wah Bener-bener ne blog Mantap Buanget Asli Takjup ane liat an betah nyolongin ilmu dri sini...
    tpi Giman Cara Buat kaya Tutorial Blog biar kalau di klik Muncul Menu2nya kaya pnya suhu ne hehehe Shar doong Sukses gan best of the best lah...

    ReplyDelete
  17. gan, kalau mau pasang 2 yang ginian gimana caranya.???

    ReplyDelete
  18. APAKAH ENTRI POPULAR DAPAT DI BUAT SLIDE OUT PANEL SEPERTI DIATAS?
    TERUS GIMANA CARANYA? APAKAH CUKUP GANTI KODE HTML "Letakkan Apa Saja Disini Sesuai Selera Sobat Seperti Text Info, Kotak Chat Dan Lain Lain"
    INI DIGANTI DENGAN TULISAN ENTRI POPULAR ATAU GIMANA CARANYA AGAR WIDGED ENTRI POPULAR PADA BLOG SY DAPAT SEPERTI TAMPILAN PADA TUTORIAL INI..

    ReplyDelete
  19. Visit blog saya gan ....
    http://akangyanto.blogspot.com/

    ReplyDelete