Cara Membuat 4 Panel Info Diblog

Cara Membuat 4 Panel Info Diblog

 

da 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 ]]> Dan Copy Kode Dibawah ini Lalu Taruh Tepat Diatas Kode ]]> 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://lh5.googleusercontent.com/-2kyisxxZjQ8/Tng_A5C5YhI/AAAAAAAAAaA/wg1h8DDk4As/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://lh5.googleusercontent.com/-2kyisxxZjQ8/Tng_A5C5YhI/AAAAAAAAAaA/wg1h8DDk4As/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://lh5.googleusercontent.com/-kTEK5–jnLc/Tng_AowqsmI/AAAAAAAAAZ8/mfY6WCN_vPo/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://lh5.googleusercontent.com/-2kyisxxZjQ8/Tng_A5C5YhI/AAAAAAAAAaA/wg1h8DDk4As/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://lh5.googleusercontent.com/-2kyisxxZjQ8/Tng_A5C5YhI/AAAAAAAAAaA/wg1h8DDk4As/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://lh5.googleusercontent.com/-kTEK5–jnLc/Tng_AowqsmI/AAAAAAAAAZ8/mfY6WCN_vPo/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://lh5.googleusercontent.com/-2kyisxxZjQ8/Tng_A5C5YhI/AAAAAAAAAaA/wg1h8DDk4As/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://lh5.googleusercontent.com/-2kyisxxZjQ8/Tng_A5C5YhI/AAAAAAAAAaA/wg1h8DDk4As/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://lh5.googleusercontent.com/-kTEK5–jnLc/Tng_AowqsmI/AAAAAAAAAZ8/mfY6WCN_vPo/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://lh5.googleusercontent.com/-2kyisxxZjQ8/Tng_A5C5YhI/AAAAAAAAAaA/wg1h8DDk4As/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://lh5.googleusercontent.com/-2kyisxxZjQ8/Tng_A5C5YhI/AAAAAAAAAaA/wg1h8DDk4As/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://lh5.googleusercontent.com/-kTEK5–jnLc/Tng_AowqsmI/AAAAAAAAAZ8/mfY6WCN_vPo/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 Dan Taruh Semua Kode Berikut Tepat Diatasnya.

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

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

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

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

  • 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
    Letakkan Apa Saja Disini Sesuai Selera Sobat Seperti Text Info, Kotak Chat Dan Lain Lain.

    Panel 1

    GATGET 2
    Letakkan Apa Saja Disini Sesuai Selera Sobat Seperti Text Info, Kotak Chat Dan Lain Lain.

    Panel 2

    GATGET 3
    Letakkan Apa Saja Disini Sesuai Selera Sobat Seperti Text Info, Kotak Chat Dan Lain Lain.

    Panel 3

    GATGET 4
    Letakkan Apa Saja Disini Sesuai Selera Sobat Seperti Text Info, Kotak Chat Dan Lain Lain.

    Panel 4

  • Bila Langkah Diatas Sudah Selesai, Silahkan Sobat Save Atau Simpan Dan Lihat Hasilnya.
  • Selesai !!!

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