Membuat Chatbox Dengan Efek Jquery Anonymous Saturday, 29 September 2012 No Comment

Mungkin anda  sangat tertarik membuat sebuah chatbox dengan efek sebuah jquery yang ada disebelah gambar ituh atau anda sedanh mepercntik tampilan sebuah blog anda biar lebih bagus lagi,sekarang saya akan mebahas sebuah cara Chtbox slide Vertikal dengan efek jquey..
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 .






Pertama anda sebelum mebuat sebuah efek jquery ini ada beberapa tahapan langkah anda yang harus dimengerti seperti dibawah ini:
  • log in dalam blog anda
  • kemudian klik rancangan-edit html anda
  • jangan lupan anda check list sebuah expadt widget
  • selanjutnya anda cari sebuah code ]]></b:skin>...
  •  setelah ituh anda copykan code dibawah ini diatas code ]]></b:skin> 
  • .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}
  • 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 
  • Masukan kode Javascript berikut dibawah script jQuery tadi:

/li>
  • <script  type="text/javascript">  
  • $(document).ready(function(){  
  • $(".trigger").click(function(){  
  • $(".panel").toggle("fast");  
  • $(this).toggleClass("active");  
  • return false;  
  • });  
  • });  
  • </script>  
  • Kemudian cari lagi kode berikut ini <body>
  • 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>
  • Dan yang terakhir Save Template anda.
    • by Jillur Rahman

    Jillur Rahman is a Web designers. He enjoys to make blogger templates. He always try to make modern and 3D looking Templates. You can by his templates from Themeforest.

    Follow him @ Twitter | Facebook | Google Plus

    Tags: /
    Diposkan oleh Anonymous
    Label: ,
    Related

    No Comment

    [-] BaelNo Rule :
    -MAX LIVE ( 3 )
    -Comment Dengan User Anonim akan saya Delete
    -DONT SPAM
    -DONT FLOOD
    -BILA ANDA SUKA DENGAN ARTIKEL INI SILAHKAN BERKOMENTAR
    -GUNAKANLAH BAHASA YANG SOPAN
    Keuntungan :
    -BLOG INI TELAH MENJADI BLOG DOFOLLOW JADI JIKA KALIAN BERKOMENTAR AKAN MEDAPAT BACKLINK
    [-] Keuntungan Di Blog Ini
    - Blog Ini Ada Blog Dofollow
    - Comment Tidak Ada Capta
    - Bisa Comment Dengan Name/URL
    -Tukar Link
    -Tukar Banner
    Add Facebook admin : Arnoldi Hernanda
    Blog ini Telah Jadi Blog Dofollow :D
    - Alexa Rank :
    [-]World : 282,364
    [-]Indonesia : 4,251
    [-]Backlink : 131
    - Google Page Rank : 2
    [-] Jadi Berkomentar Lah Yang Sopan :)

    Subscribe to: Post Comments ( Atom )