Cara Membuat Chat Room Tersembunyi di blog

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/AVvXsEiZBzZwajL9JcTjIQkxuaCJqENHZBRqjvLqNCpnGALYE6HcISOBKbCj7-nuamihM6J2M90MH9FRbmSUcHPNJtLnkCOU4PTTfRnLaKWXeEdsQoSQ7GgWfbw2cXX6o_yqgmH1IvZzojf4nPI/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/AVvXsEiBi1-daOrT3IKnLKArU4MN2RbTCOedBEZgKkaflqNoquy2QIz33lIpQPh10o2Fs89UUsWYzOp1oYMwQKF37urzrelE1VVfu1yWupHBlMCeOwe6JzvWzA2hm5PTiw5rwc_s_qeMu9sViXo/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 ..

sumber: sangdesains.blogspot.com/2013/01/cara-membuat-chat-room-tersembunyi-di.html

Terima kasih telah membaca artikel tentang Cara Membuat Chat Room Tersembunyi di blog di blog Indo Elektronika jika anda ingin menyebar luaskan artikel ini di mohon untuk mencantumkan link sebagai Sumbernya, dan bila artikel ini bermanfaat silakan bookmark halaman ini di web browser anda, dengan cara menekan Ctrl + D pada tombol keyboard anda.

Cara Membuat Chat Room Tersembunyi di blog

Artikel terbaru :