Blog Hanghangs

Berita terbaru seputar tekhnologi

Home » Tips And Trik Blog » jQuery Chatbox Slide Vertikal di blog

Saturday, October 22, 2011

jQuery Chatbox Slide Vertikal di blog


Untuk memasang chatbox slide vertikal dengan jQuery ini sangat mudah, anda tinggal menambahkan kode-kode HTML yang nanti akan saya uraikan secara lengkap 

ok langsung aja :
  1. Login ke Blogger dengan akun anda.
  2. Kemudian pilih Rancangan >> Edit HTML
  3. Seperti biasa klik Download Template Lengkap biar aman
  4. Jangan lupa centang Expand Template Widget
  5. Selanjutnya cari kode ]]>, jika sudah ketemu letakkan kode CSS dibawah ini tepat sebelum atau diatas kode ]]> tersebut:


kode: 
kode: 
.panel{position:fixed;top:20px;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 #444;width:330px;height:auto;filter:alpha(opacity=85);-moz-opacity:0.85;opacity:0.85;display:none;padding:30px 30px 30px 100px}
.panel p{color:#ccc;margin:0 0 15px;padding:0}
.panel a,.panel a:visited{color:#9FC54E;text-decoration:none;border-bottom:1px solid #9FC54E;margin:0;padding:0}
.panel a:hover,.panel a:visited:hover{color:#fff;text-decoration:none;border-bottom:1px solid #fff;margin:0;padding:0}
a.trigger{position:fixed;text-decoration:none;top:50px;left:0;font-size:16px;letter-spacing:-1px;font-family:verdana, helvetica, arial, sans-serif;color:#fff;font-weight:700;background:#333 url(http://lh6.ggpht.com/_xcD4JK_dIjU/S4QDwX8gRPI/AAAAAAAAD2U/TdhwLYRRzzA/d/plus.png) 85% 55% no-repeat;border:1px solid #444;-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:15px 40px 15px 15px}
a.trigger:hover{position:fixed;text-decoration:none;top:50px;left:0;font-size:16px;letter-spacing:-1px;font-family:verdana, helvetica, arial, sans-serif;color:#fff;font-weight:700;background:#222 url(http://lh6.ggpht.com/_xcD4JK_dIjU/S4QDwX8gRPI/AAAAAAAAD2U/TdhwLYRRzzA/d/plus.png) 85% 55% no-repeat;border:1px solid #444;-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:15px 40px 15px 15px}
a.active.trigger{background:#222 url(http://lh3.ggpht.com/_xcD4JK_dIjU/S4QDvxbreOI/AAAAAAAAD2M/Cz3Q2r5pdTM/d/minus.png) 85% 55% no-repeat}
.columns{clear:both;width:330px;line-height:22px;padding:0 0 20px}
.colleft{float:left;width:130px;line-height:22px}
.colright{float:right;width:130px;line-height:22px}
a:focus{outline:none}
.panel img{background-color:#262626;border:1px solid #333;float:right;margin:3px 3px 6px 8px;padding:5px}
.panel h3{border-bottom:1px solid silver;margin-bottom:5px;padding-bottom:3px;text-align:left;clear:both;color:#FFF;font-size:12px;font-weight:700}
.columns ul,.columns ul li{list-style-type:none;margin:0;padding:0}


6.Setelah itu cari kode </head> setelah itu copas kode dibawah ini dan taruh diatasnya.

kode: 
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>


#
Jika anda telah memasang script Jquery ini sebelumnya anda dapat meninggalkan langkah diatas
7. Masukan kode Javascript berikut dibawah script jQuery tadi:

kode: 
Judul Spoiler: 
<script type="text/javascript">
$(document).ready(function(){
$(".trigger").click(function(){
$(".panel").toggle("fast");
$(this).toggleClass("active");
return false;
});
});
</script>


9. Kemudian cari lagi kode berikut ini <body>
10. Setelah itu masukkan kode dibawah ini kemudian taruh diatasnya

kode: 
<div class="panel">

Kode script ChatBox Anda atau bisa diganti dengan kode apa saja

</div>
<a class="trigger" href="">ChatBox</a>


11. Dan yang terakhir Save Template anda. 

jQuery Chatbox Slide Vertikal di blog Rating: 4.5 Diposkan Oleh: Unknown

Artikel Terkait jQuery Chatbox Slide Vertikal di blog :

2 komentar:

  1. UnknownJanuary 4, 2016 at 1:54 AM

    KAMI SEKELUARGA TAK LUPA MENGUCAPKAN PUJI SYUKUR KEPADA ALLAH S,W,T
    dan terima kasih banyak kepada AKI atas nomor togel.nya yang AKI
    berikan 4 angka [7116] alhamdulillah ternyata itu benar2 tembus AKI.
    dan alhamdulillah sekarang saya bisa melunasi semua utan2 saya yang
    ada sama tetangga.dan juga BANK BRI dan bukan hanya itu AKI. insya
    allah saya akan coba untuk membuka usaha sendiri demi mencukupi
    kebutuhan keluarga saya sehari-hari itu semua berkat bantuan AKI..
    sekali lagi makasih banyak ya AKI… bagi saudara yang suka main togel
    yang ingin merubah nasib seperti saya silahkan hubungi KI JAYA WARSITO,,di no (((085-342-064-735)))
    insya allah anda bisa seperti saya…menang togel 970 JUTA , wassalam.


    dijamin 100% jebol saya sudah buktikan...sendiri....







    Apakah anda termasuk dalam kategori di bawah ini !!!!


    1"Dikejar-kejar hutang

    2"Selaluh kalah dalam bermain togel

    3"Barang berharga anda udah habis terjual Buat judi togel


    4"Anda udah kemana-mana tapi tidak menghasilkan solusi yg tepat


    5"Udah banyak Dukun togel yang kamu tempati minta angka jitunya
    tapi tidak ada satupun yang berhasil..







    Solusi yang tepat jangan anda putus asah... KI JAYA WARSITO akan membantu
    anda semua dengan Angka ritual/GHOIB:
    butuh angka togel 2D ,3D, 4D SGP / HKG / MALAYSIA / TOTO MAGNUM / dijamin
    100% jebol
    Apabila ada waktu
    silahkan Hub: KI JAYA WARSITO DI NO: [[[085-342-064-735]]]


    ANGKA RITUAL: TOTO/MAGNUM 4D/5D/6D


    ANGKA RITUAL: HONGKONG 2D/3D/4D/



    ANGKA RITUAL; KUDA LARI 2D/3D/4D/



    ANGKA RITUAL; SINGAPUR 2D/3D/4D/



    ANGKA RITUAL; TAIWAN,THAILAND



    ANGKA RITUAL: SIDNEY 2D/3D/4D

    ReplyDelete
  2. UnknownJanuary 12, 2016 at 1:28 AM

    KAMI SEKELUARGA TAK LUPA MENGUCAPKAN PUJI SYUKUR KEPADA ALLAH S,W,T
    dan terima kasih banyak kepada AKI atas nomor togel.nya yang AKI
    berikan 4 angka [2597] alhamdulillah ternyata itu benar2 tembus AKI.
    dan alhamdulillah sekarang saya bisa melunasi semua utan2 saya yang
    ada sama tetangga.dan juga BANK BRI dan bukan hanya itu AKI. insya
    allah saya akan coba untuk membuka usaha sendiri demi mencukupi
    kebutuhan keluarga saya sehari-hari itu semua berkat bantuan AKI..
    sekali lagi makasih banyak ya AKI… bagi saudara yang suka main togel
    yang ingin merubah nasib seperti saya silahkan hubungi KI JAYA WARSITO,,di no (((085-342-064-735)))
    insya allah anda bisa seperti saya…menang togel 970 JUTA , wassalam.


    dijamin 100% jebol saya sudah buktikan...sendiri....







    Apakah anda termasuk dalam kategori di bawah ini !!!!


    1"Dikejar-kejar hutang

    2"Selaluh kalah dalam bermain togel

    3"Barang berharga anda udah habis terjual Buat judi togel


    4"Anda udah kemana-mana tapi tidak menghasilkan solusi yg tepat


    5"Udah banyak Dukun togel yang kamu tempati minta angka jitunya
    tapi tidak ada satupun yang berhasil..







    Solusi yang tepat jangan anda putus asah... KI JAYA WARSITO akan membantu
    anda semua dengan Angka ritual/GHOIB:
    butuh angka togel 2D ,3D, 4D SGP / HKG / MALAYSIA / TOTO MAGNUM / dijamin
    100% jebol
    Apabila ada waktu
    silahkan Hub: KI JAYA WARSITO DI NO: [[[085-342-064-735]]]


    ANGKA RITUAL: TOTO/MAGNUM 4D/5D/6D


    ANGKA RITUAL: HONGKONG 2D/3D/4D/



    ANGKA RITUAL; KUDA LARI 2D/3D/4D/



    ANGKA RITUAL; SINGAPUR 2D/3D/4D/



    ANGKA RITUAL; TAIWAN,THAILAND



    ANGKA RITUAL: SIDNEY 2D/3D/4D

    ReplyDelete

Subscribe to: Post Comments (Atom)