Pada Kesempatan Kali ini Saya Akan Kembali Menuliskan Tutorial Blogger Yang Telah Di Request Oleh Salah Satu Sobat Filiex Yang Sebelumnya Sudah Membaca Tutorial Cara Membuat Slide Out Panel Dengan JQuery Namun Sobat Tersebut Berambisi Untuk Membuat Lebih Dari Satu Panel Pada Blognya Sendiri. Nah Buat Sobat Yang Berminat Untuk Membuatnya Silahkan Simak Langkah Langkahnya Berikut ini.
- Pertama Silahkan Sobat Login Ke Akun Blogger.
- Masuklah Pada Rancangan Dan Pilih Edit HTML Lalu Centang Expand Template Widget.
- Nah Buat Sobat Yang Sudah Menggunakan Panel Info Silahkan Sobat Hapus Semua Kode Tersebut.
- Selanjutnya Silahkan Sobat Cari Kode ]]></b:skin> Dan Copy Kode Dibawah ini Lalu Taruh Tepat Diatas Kode ]]></b:skin> Tersebut.
/* 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/s128/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyMC7nF-O99RTgZpn7WWCvvnZJXU7wOCgA6FVn42wIJskIUbdgOTQvfnW7nPHR0PFTYxE0ruMW9qDHyZDlpUC1TqCNU0hTuAgfYErggD33h2JqlPC_Q4epxGXmOstBjGTa0qJuQD3UTlHW/s128/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9RKekrD5j1qMYGXWLDFJ58quF5Jk6sZ-DoAOBFD4i2XQaEO5AZmRPjLTpwDDCHouRaar-KjYzC24Xz23uxLQJgvObefqs9faGqpX1zX_AOiUiakKqV05lRLYnPq87tjJbyyrjvXqUekSJ/s128/minus.png) 85% 55% no-repeat}
.columns{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}
.columns ul,.columns ul li{list-style-type:none;margin:0;padding:0}
/* Pans */
.pans{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}
.pans p{color:#fff;margin:0 0 15px;padding:0}
.pans a,.pans a:visited{color:#9FC54E;text-decoration:none;margin:0;padding:0}
.pans a:hover,.pans a:visited:hover{color:#fff;text-decoration:none;margin:0;padding:0}
a.ligger{position:fixed;text-decoration:none;top:150px;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/s128/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.ligger:hover{position:fixed;text-decoration:none;top:150px;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/s128/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.ligger{background:#222 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9RKekrD5j1qMYGXWLDFJ58quF5Jk6sZ-DoAOBFD4i2XQaEO5AZmRPjLTpwDDCHouRaar-KjYzC24Xz23uxLQJgvObefqs9faGqpX1zX_AOiUiakKqV05lRLYnPq87tjJbyyrjvXqUekSJ/s128/minus.png) 85% 55% no-repeat}
.polumns{clear:both;width:330px;line-height:22px;padding:0 0 20px}
a:focus{outline:none}
.pans img{border:1px solid #666;float:right;margin:3px 0px 6px 5px;padding:2px}
.pans 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}
.polumns ul,.polumns ul li{list-style-type:none;margin:0;padding:0}
/* dans */
.dans{position:fixed;bottom: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}
.dans p{color:#fff;margin:0 0 15px;padding:0}
.dans a,.dans a:visited{color:#9FC54E;text-decoration:none;margin:0;padding:0}
.dans a:hover,.dans a:visited:hover{color:#fff;text-decoration:none;margin:0;padding:0}
a.kigger{position:fixed;text-decoration:none;bottom:150px;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/s128/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.kigger:hover{position:fixed;text-decoration:none;bottom:150px;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/s128/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.kigger{background:#222 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9RKekrD5j1qMYGXWLDFJ58quF5Jk6sZ-DoAOBFD4i2XQaEO5AZmRPjLTpwDDCHouRaar-KjYzC24Xz23uxLQJgvObefqs9faGqpX1zX_AOiUiakKqV05lRLYnPq87tjJbyyrjvXqUekSJ/s128/minus.png) 85% 55% no-repeat}
.tolumns{clear:both;width:330px;line-height:22px;padding:0 0 20px}
a:focus{outline:none}
.dans img{border:1px solid #666;float:right;margin:3px 0px 6px 5px;padding:2px}
.dans 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}
.tolumns ul,.tolumns ul li{list-style-type:none;margin:0;padding:0}
/* boys */
.boys{position:fixed;bottom: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}
.boys p{color:#fff;margin:0 0 15px;padding:0}
.boys a,.boys a:visited{color:#9FC54E;text-decoration:none;margin:0;padding:0}
.boys a:hover,.boys a:visited:hover{color:#fff;text-decoration:none;margin:0;padding:0}
a.zigger{position:fixed;text-decoration:none;bottom: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/s128/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.zigger:hover{position:fixed;text-decoration:none;bottom: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/s128/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.zigger{background:#222 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9RKekrD5j1qMYGXWLDFJ58quF5Jk6sZ-DoAOBFD4i2XQaEO5AZmRPjLTpwDDCHouRaar-KjYzC24Xz23uxLQJgvObefqs9faGqpX1zX_AOiUiakKqV05lRLYnPq87tjJbyyrjvXqUekSJ/s128/minus.png) 85% 55% no-repeat}
.rolumns{clear:both;width:330px;line-height:22px;padding:0 0 20px}
a:focus{outline:none}
.boys img{border:1px solid #666;float:right;margin:3px 0px 6px 5px;padding:2px}
.boys 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}
.rolumns ul,.rolumns ul li{list-style-type:none;margin:0;padding:0}
- Selnjutnya Carilah Kode </head> Dan Taruh Semua Kode Berikut Tepat Diatasnya.
<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>
<script type='text/javascript'>
$(document).ready(function(){
$(".ligger").click(function(){
$(".pans").toggle("fast");
$(this).toggleClass("active");
return false;
});
});
</script>
<script type='text/javascript'>
$(document).ready(function(){
$(".kigger").click(function(){
$(".dans").toggle("fast");
$(this).toggleClass("active");
return false;
});
});
</script>
<script type='text/javascript'>
$(document).ready(function(){
$(".zigger").click(function(){
$(".boys").toggle("fast");
$(this).toggleClass("active");
return false;
});
});
</script>
- Bila Semua Langkah Diatas Sudah Selesai, Sobat Bisa Save Atau Menyimpan Tempalte Sobat.
- Selanjunya Silahkan Sobat Masuk Rancangan Dan Pilih Elemen Laman Dan Kemudian Silahkan Sobat Click Tambah Gatget Dan Pilih HTML/JavaScript Sebanyak 4 Gatget.
- Silahkan Sobat Taruh Salah Satu Kode Dibawah ini Pada Satu Gatget.
GATGET 1<div class='panel'>
Letakkan Apa Saja Disini Sesuai Selera Sobat Seperti Text Info, Kotak Chat Dan Lain Lain.
</div>
<a class='trigger' href='#'>Panel 1</a>
GATGET 2<div class='pans'>
Letakkan Apa Saja Disini Sesuai Selera Sobat Seperti Text Info, Kotak Chat Dan Lain Lain.
</div>
<a class='ligger' href='#'>Panel 2</a>
GATGET 3<div class='dans'>
Letakkan Apa Saja Disini Sesuai Selera Sobat Seperti Text Info, Kotak Chat Dan Lain Lain.
</div>
<a class='kigger' href='#'>Panel 3</a>
GATGET 4<div class='boys'>
Letakkan Apa Saja Disini Sesuai Selera Sobat Seperti Text Info, Kotak Chat Dan Lain Lain.
</div>
<a class='zigger' href='#'>Panel 4</a>
- Bila Langkah Diatas Sudah Selesai, Silahkan Sobat Save Atau Simpan Dan Lihat Hasilnya.
- Selesai !!!
Selamat Mencoba! Semoga Berhasil Dan Cukup Sekian Disini Untuk Tutorial Kali ini Dan Semoga Bermanfaat Untuk Sobat Semua. Terima Kasih !!!
Wah mantap neeeh bang..boleh lah kapan2 di coba..templetnya juga dah makin mantap sukses selalu smoga semakin baik dan lebih baik lagi manatp
ReplyDelete