Cara Membuat 4 Panel

Pada Kesempatan Kali ini Saya Akan Kembali Menuliskan Tutorial Blogger

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/AVvXsEgys4XG2HheAG6tLHiN5mETkaO4zmsK3s5w9XPjQdpXNNdJtweFbEZRJrMrdZhDnnGZMsXvoiGu8hY_OHzCg2qaIvlX0YPjdgy43C26KBTePMknZul6kd7n6Xa6uQtlAXW3Fkkqy_rhkO65/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/AVvXsEgys4XG2HheAG6tLHiN5mETkaO4zmsK3s5w9XPjQdpXNNdJtweFbEZRJrMrdZhDnnGZMsXvoiGu8hY_OHzCg2qaIvlX0YPjdgy43C26KBTePMknZul6kd7n6Xa6uQtlAXW3Fkkqy_rhkO65/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/AVvXsEhy6YUdLN8j-sRZYkREWhlz3sBomcxE-kSYOiYEg3-JlWTqI_1XvJ6QHawQiVfQ4QfoA4io5_EgSk4-Zhqe_YRTv4h4K0f84uELQWgRpoxxQFkuONSfUHI_1LR_vGwbuZZzNbeKY_3nl83T/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/AVvXsEgys4XG2HheAG6tLHiN5mETkaO4zmsK3s5w9XPjQdpXNNdJtweFbEZRJrMrdZhDnnGZMsXvoiGu8hY_OHzCg2qaIvlX0YPjdgy43C26KBTePMknZul6kd7n6Xa6uQtlAXW3Fkkqy_rhkO65/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/AVvXsEgys4XG2HheAG6tLHiN5mETkaO4zmsK3s5w9XPjQdpXNNdJtweFbEZRJrMrdZhDnnGZMsXvoiGu8hY_OHzCg2qaIvlX0YPjdgy43C26KBTePMknZul6kd7n6Xa6uQtlAXW3Fkkqy_rhkO65/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/AVvXsEhy6YUdLN8j-sRZYkREWhlz3sBomcxE-kSYOiYEg3-JlWTqI_1XvJ6QHawQiVfQ4QfoA4io5_EgSk4-Zhqe_YRTv4h4K0f84uELQWgRpoxxQFkuONSfUHI_1LR_vGwbuZZzNbeKY_3nl83T/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/AVvXsEgys4XG2HheAG6tLHiN5mETkaO4zmsK3s5w9XPjQdpXNNdJtweFbEZRJrMrdZhDnnGZMsXvoiGu8hY_OHzCg2qaIvlX0YPjdgy43C26KBTePMknZul6kd7n6Xa6uQtlAXW3Fkkqy_rhkO65/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/AVvXsEgys4XG2HheAG6tLHiN5mETkaO4zmsK3s5w9XPjQdpXNNdJtweFbEZRJrMrdZhDnnGZMsXvoiGu8hY_OHzCg2qaIvlX0YPjdgy43C26KBTePMknZul6kd7n6Xa6uQtlAXW3Fkkqy_rhkO65/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/AVvXsEhy6YUdLN8j-sRZYkREWhlz3sBomcxE-kSYOiYEg3-JlWTqI_1XvJ6QHawQiVfQ4QfoA4io5_EgSk4-Zhqe_YRTv4h4K0f84uELQWgRpoxxQFkuONSfUHI_1LR_vGwbuZZzNbeKY_3nl83T/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/AVvXsEgys4XG2HheAG6tLHiN5mETkaO4zmsK3s5w9XPjQdpXNNdJtweFbEZRJrMrdZhDnnGZMsXvoiGu8hY_OHzCg2qaIvlX0YPjdgy43C26KBTePMknZul6kd7n6Xa6uQtlAXW3Fkkqy_rhkO65/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/AVvXsEgys4XG2HheAG6tLHiN5mETkaO4zmsK3s5w9XPjQdpXNNdJtweFbEZRJrMrdZhDnnGZMsXvoiGu8hY_OHzCg2qaIvlX0YPjdgy43C26KBTePMknZul6kd7n6Xa6uQtlAXW3Fkkqy_rhkO65/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/AVvXsEhy6YUdLN8j-sRZYkREWhlz3sBomcxE-kSYOiYEg3-JlWTqI_1XvJ6QHawQiVfQ4QfoA4io5_EgSk4-Zhqe_YRTv4h4K0f84uELQWgRpoxxQFkuONSfUHI_1LR_vGwbuZZzNbeKY_3nl83T/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 !!!

Penulis : Unknown ~ Sebuah blog yang menyediakan berbagai macam informasi

Artikel Cara Membuat 4 Panel ini dipublish oleh Unknown pada hari Kamis, 18 April 2013. Semoga artikel ini dapat bermanfaat.Terimakasih atas kunjungan Anda silahkan tinggalkan komentar.sudah ada 0 komentar: di postingan Cara Membuat 4 Panel