Cara Membuat Chat Room Tersembunyi di blog ~ SangDesains

Apa kabar sobat blogger? mudah mudahan kabar kalian disana baik dan sehat selalu ,amin ..
Kali ini sangdesain mau berbagi sedikit tentang cara membuat chat room tersembunyi di blog.
Apa itu chat room? Ini adalah istilah yang diberikan pada sebuah aplikasi yang digunakan di dalam dunia maya. Aplikasi ini diberikan nama chat room karena aplikasi ini digunakan sebagai tempat berkumpulnya orang-orang untuk melakukan online chat / live chat. oke langsung aja sobat blogger,mudah mudahan bermanfaat ..

Demonya Bisa Sobat lihat di blog ini.

Pertama sobat blogger masuk ke Template Blogger sobat ,lalu klik Edit HTML copy dan letakan kode di bawah ini tepat diatas kode </head> .

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js' type='text/javascript'/>
<style type='text/css'>
   #stickynote {
       width:300px;
       background-color: transparent;
       position: fixed;
       top: 20px;
       right: 20px;
       padding: 24px 6px;
       z-index: 1000;
       font-size: 14px;
   }
   #stickynote div {
       border-bottom: 1px solid silver;
       margin-top: 6px;
       font-family: "MV Boli", Verdana;
   }
   #stickynote .exit    { top: 5px; right: 5px; color: #666; position: absolute; }
   #stickynote .exit:hover   { color: #000; }
   #stickynote div.point:hover, .strike { text-decoration: line-through; }
   #stickynote { display: none; }
   #stickynote div, #stickynote .exit, #opensticky { cursor: pointer; }
   #opensticky { color: blue; }
   .header { font-weight: bold; }
</style>
<script type='text/javascript'>
   jQuery().ready(function(){
       $("#stickynote").draggable();
       $(".point").live("click", function(){
           $(this).addClass("strike");
       });
       $(".exit").live("click", function(){
           $("#stickynote").fadeOut("fast");
       });
       $("#opensticky").live("click", function(){
           $("#stickynote").slideDown("fast");
       });
   });
</script>

Lalu sobat blogger copy kode di bawah ini dan letakan di tepat atas ]]></b:skin>

#chatroom_sudut {
position:fixed;_position:relative;bottom:0px; left:0px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }

Jika sudah save template sobat .

Setelah itu sobat blogger tinggal menambahkan Gadget HTML baru dan copy kode di bawah ini dan klik simpan .

<div id='stickynote'>
<span class='exit'><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrSzhL0ND0A_tsnEXmVJl4My4omsBtDaiqgwAeBuLNSNE6TiK43pUzWVH0XxJkRAitnH0bhbDzodCvPYntF7p_kPzeqOC1DiQprJg8A5wItrz4Z4fHnZSJMu0-nllv9wmog-3Hx3PNAcw/s1600/close.png" />
<iframe allowtransparency='true' frameborder='0' height='660' marginheight='0' marginwidth='0' scrolling='no' src='http://chatroll.com/embed/chat/waoneelektronika?name=waoneelektronika' width='450'/></iframe></span>
</div>
<div id='chatroom_sudut'>
<span id='opensticky'><img alt='chatroom' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjI4LjWG4Zkx-Xmj5FKJTTfqTJ-cEedsnxC2x_L1RWVJsBC7f0jVupkMD8SDZwVY33yYjauge8aQQt9a1P-cBiAjWO1oNIgnadOiznkPwcLBTBDQoi_Xxi9xVvBzj_6ganWvVVGkAjiXcY/s1600/brights-brights_icons-chat.png' style='right: 0pt; top: 0pt;'/></span>
</div>

"perhatikan untuk tulisan yang berwarna merah ganti dengan url gambar close pilihan sobat.
dan tulisan berwarna biru ganti dengan url gambar chat yang nantinya akan tampil di sudut kanan bawah seperti contoh dalam gambar ."

Begitulah Tutorial cara membuat chat room tersembunyi di blog, mudah mudahan artikel yang sangdesains bagi ini bisa bermanfaat buat sobat ,untuk sobat yang belum mengerti silahkan bertanya melalui komentar dibawah ..
sekian dan terimakasih ..

Sangdesains

Minggu, Januari 13

Cara Membuat Chat Room Tersembunyi di blog