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.
Selamat Mencoba Semoga Berhasil Dan Silahkan Tinggalkan Komentar untuk Keluhan, Pertanyaan Dan Request, Terima Kasih.
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 */Keterangan:
.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}
- 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(){
$(".trigger").click(function(){
$(".panel").toggle("fast");
$(this).toggleClass("active");
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'>Catatan:
Letakkan Apa Saja Disini Sesuai Selera Sobat Seperti Text Info, Kotak Chat Dan Lain Lain.
</div>
<a class='trigger' href='#'>Slide</a>
- 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.
kenapa setelah sy coba kok tampilan blog saya malah jadi gk aturan.
ReplyDeletelebar kolom postingnya menyusut.
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.
ReplyDeletetidak ada kode tersebut di atas head saya bos.
ReplyDelete@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@Filiex Boy
ReplyDeletetetap tidak ada bos.
tapi yg menjadikan blog saya acak-acakan itu kode yang d atas ]]> itu bos. tolong solusinya
@musikmokonk
ReplyDeleteSaya 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.
mantap ne gan post nya, izin noba gan
ReplyDeleteGimana Caranya Membuat widget itu secara berurutan secara vertical sprti pnya anda,....
ReplyDeletepnya q hasilnya numpuk2 gan,...
@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.
ReplyDeleteterima kasih kawan atas tipsnya... : D
ReplyDeleteUntuk Membuat 4 Panel Silahkan Baca Di Cara Membuat 4 Panel Info Filiex !!!
ReplyDeleteGan Punya ku kok ketutup posting ya,....
ReplyDeletenggak bisa d depan posting gtu,.......
http://e-bisniss.blogspot.com/
ReplyDelete@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!!!
ReplyDeleteMakasih gan,.....
ReplyDeleteBerhasil,.....
tank,.. bro,.. blognya mantap banget,.. kpn2 klau sempet mampir di blogQ y.. http://sangperaihimpian.blogspot.com/ terima kasih atas ilmunya
ReplyDeleteWah Bener-bener ne blog Mantap Buanget Asli Takjup ane liat an betah nyolongin ilmu dri sini...
ReplyDeletetpi 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...
@edi heriyantoBaca Di Sini ShowHide Compact Preview Filiex
ReplyDeletegan, kalau mau pasang 2 yang ginian gimana caranya.???
ReplyDeleteAPAKAH ENTRI POPULAR DAPAT DI BUAT SLIDE OUT PANEL SEPERTI DIATAS?
ReplyDeleteTERUS 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..
Visit blog saya gan ....
ReplyDeletehttp://akangyanto.blogspot.com/