mas template

Membuat Chatbox Slide Vertikal Dengan jQuery di Blog

Satu lagi fasilitas untuk berinkteraksi dengan pengunjung anda, chatbox namanya. Sebenarnya fungsinya sama dengan buku tamu dari shoutmix tapi kali ini agak dimodifikasi sedikit sehingga tempatnya tersembunyi. Jika kita ingin menampilkan menu ini, kita harus meng-klik tombol chatbox yang ada di sebelah kiri blog . Untuk memasang chatbox slide vertikal dengan jQuery ini sangat mudah, anda tinggal menambahkan kode-kode HTML yang nanti akan saya uraikan secara lengkap di bawah. Gambar di bawah adalah contoh chatbox slide vertikal yang ada di demo blog saya, jika anda belum jelas gambar itu ada disini. Klik tombol chatbox yang ada di sebelah kiri, anda akan melihat tampilannya.


Oke, tidak pakai lama, langsung saja ke langkah-langkah pembuatannya :
  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 ]]></b:skin>, jika sudah ketemu letakkan kode CSS dibawah ini tepat sebelum atau diatas kode ]]></b:skin> tersebut:
    .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.
    <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:
    <script  type="text/javascript">
    $(document).ready(function(){
    $(".trigger").click(function(){
    $(".panel").toggle("fast");
    $(this).toggleClass("active");
    return false;
    });
    });
    </script>
  8. Kemudian cari lagi kode berikut ini <body>
  9. Setelah itu masukkan kode dibawah ini kemudian taruh diatasnya
    <div class="panel">

    Kode script ChatBox Anda atau bisa diganti dengan kode widget atau apa sajalah terserah.....

    </div>
    <a class="trigger" href="">ChatBox</a>
  10. Dan yang terakhir Save Template anda.
Anda bisa ganti tulisan warna kuning berkedip dengan kode shoutmix yang sudah anda buat sebelumnya. Untuk cara membuat shoutmix di blog sudah pernah saya jelaskan sebelumnya. Nah, sampai disini dulu tutorialnya ya, selamat berkreasi dan semoga bermanfaat.
Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Creating Website

20 comments:

  1. This comment has been removed by the author.

    ReplyDelete
  2. mas..kok post san saya n widget" lainnya jadi pindah ke kiri smua ya?? tapi slide chatboxnya udah bisa kok ..tolong d jawab ya mas.. pliss..

    ReplyDelete
  3. mas, tombol save template aku yang berada di paling bawah ngga bisa muncul gara gara toolbar yahoonya sampai bawah, ada cara lain ngga buat save template setelah selesai di edit atau di expand. dengan tombol mungkin atau bagaimana?

    ReplyDelete
  4. Lah mas
    biar kotak Chatbox nya agar gag transparan Gimana mas.?
    hadeuh transparan susah ngebaca nya hehe
    mohon tutor nya mas,.

    ReplyDelete
  5. thx infonya gan.. langsung pasang ni, jgn lupa mampir..

    ReplyDelete
  6. ijin gan,,
    ayo kita ramaikan chat di www.afik.com.
    bagi yang ingin belajar trading,ingin mendapatkan analisa dari pakar trading silahakan kunjugi www.afikc.com

    ReplyDelete
  7. Terimakasih atas tips-nya sangat bermanfaat . . .
    salam kenal saja buat semuanya
    ~
    www.anfilem.blogspot.com

    ReplyDelete
  8. Thanks mas, sangat membantu sekali.
    Maaf mau tanya, untuk menghilangkan READ MORE yang ada di template bagaimana caranya?..

    ReplyDelete
  9. gan kenapa chatboxny berada dibelakang post y?
    jadi susah liatny?

    ReplyDelete
  10. agar chatboxnya tampil di depan bagaiman ya..

    ReplyDelete
  11. makasih mas silahkan mampir di blog ane www.toko-gemini.blogspot.com

    ReplyDelete
  12. makasi mas, ilmunya bermanfaat sekali

    *saling berkunjung, follow dan meninggalkan jejak yah. Tunjukan bahwa kita adalah blogger sejati :*

    http://rizkykaw.blogspot.com

    ReplyDelete
  13. Saya ingin bertanya pak, mengapa blog saya tidak bisa (tidak berhasil) jika dipasang code CSS?

    ReplyDelete
  14. Produk dijamin asli
    TILLA SHOP : Barang yang Kami Tawarkan Semuanya Barang Asli Original Garansi Resmi Distributor dan Garansi TAM .
    Semua Produk Kami Baru dan Msh Tersegel dLm BOX_nya.
    BERMINAT HUB-SMS:0896-9198-6275 ATAU KLIK WEBSET RESMI KAMI
    BlackBerry>Samsung>Nokia>Apple>Acer>Dell>Nikon>DLL

    Dijual

    Ready Stock !
    BlackBerry 9380 Orlando - Black
    Rp.900.000,-

    Ready Stock !
    BlackBerry Curve 8520 Gemini
    Rp.500.000,-

    Ready Stock !
    BlackBerry Bold 9780 Onyx 2
    Rp.800.000,-

    Ready Stock !
    Blackberry Curve 9320
    Rp.700.000,-

    Ready Stock !
    Samsung Galaxy Tab 2 (7.0)
    Rp. 1.000.000

    Ready Stock !
    Samsung Galaxy Nexus I9250 - Titanium Si
    Rp.1.500.000,-

    Ready Stock !
    Samsung Galaxy Note N7000 - Pink
    Rp.1.700.000

    Ready Stock !
    Samsung Galaxy Y S5360 GSM - Pure White
    Rp.500.000,-

    Ready Stock !
    Nokia Lumia 800 - Matt Black
    Rp.1.700.000,-

    Ready Stock !
    Nokia Lumia-710-white
    Rp. 900.000,-

    Ready Stock !
    Nokia C2-06 Touch & Type - Dual GSM
    Rp.450.000,-

    Ready Stock !
    Nokia Lumia 710 - Black
    Rp. 900.000,-

    Ready Stock !
    Apple iPhone 4S 16GB (dari XL) - Black
    Rp.1.200.000,-

    Ready Stock !
    Apple iPhone 4S 16GB (dari Telkomsel)
    Rp.1.200.000,-

    Ready Stock !
    Apple iPod Touch 4 Gen 8GB
    Rp.700.000

    Ready Stock !
    APPLE iPod Nano 8GB - Pink
    Rp.500.000,-

    Ready Stock !
    Acer Aspire 4752-2332G50Mn Core i3 Win7 Home
    Rp 1.300.000

    Ready Stock !
    Acer Aspire S3-951-2364G34iss
    Rp. 1.200.000,-

    Ready Stock !
    Acer Aspire 5951G Core i7 2630 Win 7
    Rp. 2.500.000,-

    Ready Stock !
    Acer Aspire 4755G Core i5 2430 Win 7 Home Premium Green
    Rp. 2.500.000,-

    Ready Stock !
    Nikon D7000 kit 18-105mm
    Rp.1.700.000

    Ready Stock !
    Nikon D90 Kit 18-105mm Vr
    Rp 1.300.000

    Ready Stock !
    Nikon Coolpix L 120 Red
    Rp. 900.000

    Ready Stock !
    Nikon Coolpix P 500 Black
    Rp 1.000.000

    ReplyDelete
  15. Produk di Jamin Asli.
    ELECTRONIC SOLUTION-SHOP.
    Menawarkan harga Promo , Barang yang Kami Tawarkan Semuanya Barang Asli Original Garansi Resmi Distributor dan Garansi Tam .Semua Produk Kami Baru dan Msh Tersegel dLm BOX_nya,
    Berminat Hub: Hotline/sms: 0857-7087-2865 ATAU KLIK WEBSET RESMI KAMI http://electronicsulution-shop.blogspot.com
    BlackBerry>Samsung>Nokia>Apple>Acer>Toshiba
    Led tvlg>Led tv Samsung>Nikon>Canon>DLL

    Dijual,
    Ready Stock !
    Blackberry Bold 9780
    Harga Promo Rp.1.500.000,-
    Ready Stock !
    BlackBerry Bold Curve 9300,
    Harga promo Rp.1.000.000,-
    Ready Stock !
    BlackBerry Torch 9800
    Rp.1.600.000,-
    Ready Stock !
    BlackBerry Z10
    Rp.3.500.000,-
    Ready Stock !
    BlackBerry Q 10
    Rp.4.000.000,-
    Ready Stock !
    Samsung Galaxy S3 Mini
    Rp. 2.700.000,-
    Ready Stock !
    Samsung Galaxy Ace
    Rp.1.400.000,-
    Ready Stock !
    Samsung Galaxy S2
    Rp.2.500.000,-
    Ready Stock !
    Samsung Galaxy S4
    Rp.4.500.000,-
    Ready Stock !
    Nokia 808 Pure View
    Rp.4.200.000,-
    Ready Stock !
    Nokia Lumia 820
    Rp. 2.700.000,-
    Ready Stock !
    Nokia Lumia 920
    Rp.3.400.000,-
    Ready Stock !
    Nokia Lumia 620
    Rp. 1.500.000,-
    Ready Stock !
    Apple iPhone 5G 16GB
    Rp.4.100.000,-
    Ready Stock !
    Apple iPhone 4G- 32GB
    Rp.3.500.000,-
    Ready Stock !
    Apple iPhone 3G-16GB
    Rp.2.900.000,-
    Ready Stock !
    Apple iPhone 4S-64GB
    Rp.4.000.000,-
    Ready Stock !
    Acer Aspire one 756
    Rp.1.400.000,-
    Ready Stock !
    Acer Aspire E1-471G
    Rp.2.800.000,-
    Ready Stock !
    Acer Aspire S5 Ultrabook Core 17
    Rp.7.000.000,-
    Ready Stock !
    Toshiba Satellite C800D-1006
    Rp.2.500.000,-
    Ready Stock !
    Toshiba Satellite C800D-1003
    Rp.1.500.000,-
    Ready Stock !
    Toshiba Satellite L840-1045XR
    Rp.3.700.000,-
    Ready Stock !
    Led TV Lg 42 inch LN5100
    Rp 3.500.000,-
    Ready Stock !
    Led TV Lg 42 inch LN5710
    Rp. 4.000.000,-
    Ready Stock !
    Led TV Lg 39 inch LN5100
    Rp. 3.000.000,-
    Ready Stock !
    Led TV Samsung UA 32 inch F5000
    Rp. 2.100.000,-
    Ready Stock !
    Led TV Samsung UA 32 inch F4000
    Rp.1.500.000,-
    Ready Stock !
    Nikon D5100+18-15Kit
    Rp 3.500.000,-
    Ready Stock !
    Nikon D3000 Kit 18-15mm VR
    Rp. 1.500.000,-
    Ready Stock !
    Nikon D3200 Kit 18-105mm VR
    Rp 3.100.000,-
    Ready Stock !
    Canon Eos 600D Kit EF-S 18-135mm
    Rp.3.800.000,-
    Ready Stock !
    Canon Eos 70D Kit EF-S 18-55mm is stm
    Rp.4.700.000,-
    Ready Stock !
    Canon Eos 600D Body
    Rp.2.500.000,-


    Kami melakukan Pengiriman barang lewat Tiki atau Jne ,Pos,Cargo,bagi luar kota,Ongkir ditanggung pembeli
    Berkat Anda Usaha Kami Jadi Semakin Lancar,Terima kasih telah berbelanja di Electronic Solution-Shop.

    Nikmati berbagai keuntungan berbelanja di sini.
    *Barang berkualitas dan harga relatif lebih murah
    *Dapat diantar ke seluruh indonesia
    *Keamanan di jamin karna setiap pengiriman di sertai asuransi proses cepat dan sederhana
    Barang di jamin 100% original baru dan bergaransi resmi.
    Selamat Berbelanja ! ! !

    ReplyDelete
  16. berhasil gan... tp widget chatbox-nya tampil di belakang posting >> http://ndherawati.blogspot.com/

    ReplyDelete
  17. thx infonya...
    saya pke yg dr google cari kodenya, gpp lah

    ni toko saya sekarang dah jadi :

    www.uniksshop.com

    Jual barang unik china, buku bantal, buku islami dll dengan harga murah dan terjangkau

    ReplyDelete
  18. Sujud syukur saya ucapkan kepada ALLAH SWT dan saya sekeluarga sangat berterimakasih banyak kepada EYANG SEMAR atas bantuannya saya bisa menang togel dan nomor ghoib yang diberikan 4d (6300) alhamdulillah BENAR2 berhasil sya menang 79 juta’ karna sekarang ini kehidupan saya jauh lebih baik dari sebelumnya dan semua utang2 saya sudah pada lunas semua, jika anda mau bukti bukan rekayasa silahkan hubungi EYANG SEMAR:(_0_8_5_3_1_6_1_1_0_0_1_2_) ini lah kisah nyata dari saya
















    Sujud syukur saya ucapkan kepada ALLAH SWT dan saya sekeluarga sangat berterimakasih banyak kepada EYANG SEMAR atas bantuannya saya bisa menang togel dan nomor ghoib yang diberikan 4d (6300 ) alhamdulillah BENAR2 berhasil sya menang 79 juta’ karna sekarang ini kehidupan saya jauh lebih baik dari sebelumnya dan semua utang2 saya sudah pada lunas semua, jika anda mau bukti bukan rekayasa silahkan hubungi EYANG SEMAR:(_0_8_5_3_1_6_1_1_0_0_1_2_) ini lah kisah nyata dari saya















    Sujud syukur saya ucapkan kepada ALLAH SWT dan saya sekeluarga sangat berterimakasih banyak kepada EYANG SEMAR atas bantuannya saya bisa menang togel dan nomor ghoib yang diberikan 4d (6300 ) alhamdulillah BENAR2 berhasil sya menang 79 juta’ karna sekarang ini kehidupan saya jauh lebih baik dari sebelumnya dan semua utang2 saya sudah pada lunas semua, jika anda mau bukti bukan rekayasa silahkan hubungi EYANG SEMAR:(_0_8_5_3_1_6_1_1_0_0_1_2_) ini lah kisah nyata dari saya















    Sujud syukur saya ucapkan kepada ALLAH SWT dan saya sekeluarga sangat berterimakasih banyak kepada EYANG SEMAR atas bantuannya saya bisa menang togel dan nomor ghoib yang diberikan 4d (6300 ) alhamdulillah BENAR2 berhasil sya menang 79 juta’ karna sekarang ini kehidupan saya jauh lebih baik dari sebelumnya dan semua utang2 saya sudah pada lunas semua, jika anda mau bukti bukan rekayasa silahkan hubungi EYANG SEMAR:(_0_8_5_3_1_6_1_1_0_0_1_2_) ini lah kisah nyata dari saya















    Sujud syukur saya ucapkan kepada ALLAH SWT dan saya sekeluarga sangat berterimakasih banyak kepada EYANG SEMAR atas bantuannya saya bisa menang togel dan nomor ghoib yang diberikan 4d (6300 ) alhamdulillah BENAR2 berhasil sya menang 79 juta’ karna sekarang ini kehidupan saya jauh lebih baik dari sebelumnya dan semua utang2 saya sudah pada lunas semua, jika anda mau bukti bukan rekayasa silahkan hubungi EYANG SEMAR:(_0_8_5_3_1_6_1_1_0_0_1_2_) ini lah kisah nyata dari saya















    Sujud syukur saya ucapkan kepada ALLAH SWT dan saya sekeluarga sangat berterimakasih banyak kepada EYANG SEMAR atas bantuannya saya bisa menang togel dan nomor ghoib yang diberikan 4d (6300 ) alhamdulillah BENAR2 berhasil sya menang 79 juta’ karna sekarang ini kehidupan saya jauh lebih baik dari sebelumnya dan semua utang2 saya sudah pada lunas semua, jika anda mau bukti bukan rekayasa silahkan hubungi EYANG SEMAR:(_0_8_5_3_1_6_1_1_0_0_1_2_) ini lah kisah nyata dari saya















    Sujud syukur saya ucapkan kepada ALLAH SWT dan saya sekeluarga sangat berterimakasih banyak kepada EYANG SEMAR atas bantuannya saya bisa menang togel dan nomor ghoib yang diberikan 4d (6300 ) alhamdulillah BENAR2 berhasil sya menang 79 juta’ karna sekarang ini kehidupan saya jauh lebih baik dari sebelumnya dan semua utang2 saya sudah pada lunas semua, jika anda mau bukti bukan rekayasa silahkan hubungi EYANG SEMAR:(_0_8_5_3_1_6_1_1_0_0_1_2_) ini lah kisah nyata dari saya

    ReplyDelete
  19. tq gan atas infonya & sukses selalu gan :)


    PROMOSI

    hello semua para coment gan gan :)
    ayo bergabung bersama kami di website www.senang77.com
    cara mendapatkan uang dengan mudah gabunglah bersama kami..
    kami juga menyediakan bonus turn over 0.3% dan akan di bagikan dalam

    1 minggu dan balance akan masuk kedalam secara otomatisnya


    WWW.senang77.COM
    PENDAFTARAN
    http://senang77.com/Register000.aspx

    Kami juga menyediakan kode referral :)

    http://www.senangpoker.com/?ref=859522

    kami bisa dihunbungi melalui :

    YM : cs.senangpoker@yahoo.com
    FACEBOOK : cs.senangpoker@yahoo.com
    BBM : 764a99d1
    Twitter : senangpoker
    SKYPE : senang.poker


    Untuk anda kami suport dengan 5 bank Lokal : BANK BCA, BANK BNI, BANK

    BRI, BANK MANDIRI, DAN BANK DANAMON.


    TERIMA KASIH
    salam manis :) senang77.com / senang77.net / senang77.info :)

    ReplyDelete

No comment moderation in this page
Do not put the link in this comment, I'll make it disappear forever
I hate when people play cheat to increase their blog, meanwhile everyone else do it politely and honestly

 
CREATING WEBSITE © 2012 the other blog Mas Template | Look at this Johny Template | Powered by Blogger