Cara Menciptakan Kotak Pesan Menyerupai Chatbox

Cara Membuat Pesan Ala Chatbox Sobat tentunya sudah tidak abnormal lagi dengan box atau kotak percakapan melalui jaringan internat adalah Chatbox. Sudah saya ulas sebelumnya cara mendaftar akun chatbox dan cara pemasangan pada Blog .

Pada kotak percakapan ini menyerupai dengan Chatbox namun Sobat tidak perlu mendaftarnya alasannya menciptakannya dengan memakai properti CSS kabar baiknya Sobat dapat menuliskan percakapan sesuai yang Sobat inginkan alasannya mengisi percakapan tersebut dengan cara manual.

Selain itu Sobat juga dapat memindahkan widgat tersebut menyerupai Anda memindahkan gambar pada aplikasi editor photo photoshop dengan cara klik kiri tahan dan pindahkan widget dengan geser kekiri, kekanan, keatas atau kebawah. Bagi Sobat yang tertarik berikut ini langkah-langkahnya :

Demo   CODE

Langkah pertama teman salin arahan dibawah ini dan pastekan dibawah kode ]]></b:skin> atau sebelumnya .

.chat {
  background: #ffffff;
  width: 300px;
  margin: 0 auto;
}
.chat header {
  background: #bd6982;
  padding: 10px 15px;
  color: #ffffff;
  font-size: 14px;
  cursor: move;
}
.chat header:before,
.chat header:after {
  display: block;
  content: '';
  clear: both;
}
.chat header h2,
.chat .body ul li .content h3 {
  margin: 0;
  padding: 0;
  font-size: 14px;
  float: left;
}
.chat header h2 a {
  color: #ffffff;
  text-decoration: none;
}
.chat header .tools {
  list-style: none;
  margin: 0;
  padding: 0;
  float: right;
}
.chat header .tools li {
  display: inline-block;
  margin-right: 6px;
}
.chat header .tools li:last-child {
  margin: 0;
}
.chat header .tools li a {
  color: #ffffff;
  text-decoration: none;
  -webkit-transition: all 0.3s linear 0s;
  -moz-transition: all 0.3s linear 0s;
  -ms-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
.chat .body {
  position: relative;
  max-height: 360px;
  overflow-y: scroll;
}
.chat .body .search {
  display: none;
  width: 100%;
}
.chat .body .search.opened {
  display: block;
}
.chat .body .search input {
  width: 100%;
  margin: 0;
  padding: 10px 15px;
  border: none;
  box-sizing: border-box;
}
.chat .body ul {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid #f2f2f2;
}
.chat .body ul li {
  position: relative;
  background: #ffffff;
  display: block;
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
}
.chat .body ul li:before,
.chat .body ul li:after {
  display: block;
  content: '';
  clear: both;
}
.chat .body ul li:hover .thumbnail {
  background: #bd6982;
}
.chat .body ul li:nth-child(2n) {
  background: #f2f2f2;
}
.chat .body ul li .thumbnail {
  display: inline-block;
  background: #bfbfbf;
  width: 50px;
  color: #ffffff;
  line-height: 50px;
  text-align: center;
  text-decoration: none;
  -webkit-transition: background 0.3s linear 0s;
  -moz-transition: background 0.3s linear 0s;
  -ms-transition: background 0.3s linear 0s;
  -o-transition: background 0.3s linear 0s;
  transition: background 0.3s linear 0s;
}
.chat .body ul li .thumbnail img {
  width: 100%;
}
.chat .body ul li .content {
  display: inline-block;
  margin-left: 6px;
  vertical-align: top;
  line-height: 1;
}
.chat .body ul li .content h3 {
  display: block;
  width: 100%;
  margin-bottom: 5px;
  color: #808080;
}
.chat .body ul li .content .preview {
  display: block;
  width: 100%;
  max-width: 200px;
  margin-bottom: 5px;
  color: #cccccc;
  font-size: 12px;
}
.chat .body ul li .content .meta {
  color: #b3b3b3;
  font-size: 12px;
}
.chat .body ul li .content .meta a {
  color: #999999;
  text-decoration: none;
}
.chat .body ul li .content .meta a:hover {
  text-decoration: underline;
}
.chat .body ul li .message {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  height: 100%;
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
}
.chat footer a {
  background: #bd6982;
  display: block;
  width: 100%;
  padding: 10px 15px;
  color: #ffffff;
  font-size: 14px;
  text-align: center;
  text-decoration: none;
  box-sizing: border-box;
}
.chat footer a:hover {
  background: #cd8ca0;
  -webkit-transition: background 0.3s linear 0s;
  -moz-transition: background 0.3s linear 0s;
  -ms-transition: background 0.3s linear 0s;
  -o-transition: background 0.3s linear 0s;
  transition: background 0.3s linear 0s;
}
.info {
  width: 300px;
  margin: 25px auto;
  text-align: center;
}
.info h1 {
  margin: 0;
  padding: 0;
  font-size: 24px;
  font-weight: 400;
  color: #404040;
}
.info span {
  color: #808080;
  font-size: 12px;
}
.info span a {
  color: #000000;
  text-decoration: none;
}
.info span .fa {
  color: #bd6982;
}
.info span .spoilers {
  color: #bfbfbf;
  margin-top: 5px;
  font-size: 10px;
}

Selanjutnya Anda cari arahan </head>, salin arahan dibawah ini dan pastekan diatasnya

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>

Catatan "jika di template teman sudah terinstal arahan diatas lewati langkah di atas

Masih pada arahan </head>, kemudian salin arahan dibawah ini dan terapkan dibawah arahan diatas.

<script type="text/javascript">
$(document).ready(function() {
$('.fa-search').click(function () {
    $(this).stop().toggleClass('fa-close');
    $('.search').stop().animate({
        height: 'toggle',
        opacity: 'toggle'
    }, 300);
});
$('.chat').draggable({ handle: 'header' });
});
</script>

Selanjutnya teman menuju Layout/Tata letak, tambahkan gadget dan pilih HTML/Javascript kemudian salin arahan dibawah ini kemudian pastekan pada content yang tersedia.

<div class="info">
<span>
<div class="spoilers">
</div>
</span>
</div>
<div class="chat ui-draggable" style="position: relative;">
  <header class="ui-draggable-handle">
<h2 class="title">
      <a href="http://www.elegantthemes.com/">ElegantThemes</a>
</h2>
<ul class="tools">
<li>
<a class="fa fa-gear" href="http://www.aak-share.com"></a>
</li>
<li>
<a class="fa fa-search" href="http://www.aak-share.com"></a>
</li>
</ul>
</header>
<div class="body">
    <div class="search">
      <input placeholder="Search..." type="text" />
</div>
<ul>
<li>
<a class="thumbnail" href="http://www.aak-share.com">
NR
</a>
<div class="content">
          <h3>
Nick Roach</h3>
<span class="preview">hey how are things going on the...</span>
<span class="meta">
2h ago ·
<a href="http://www.aak-share.com">Category</a>
·
<a href="http://www.aak-share.com">Reply</a>
</span>
</div>
</li>
<li>
<a class="thumbnail" href="http://www.aak-share.com">
KS
</a>
<div class="content">
          <h3>
Kenny Sing</h3>
<span class="preview">make sure you take a look at the...</span>
<span class="meta">
3h ago ·
<a href="http://www.aak-share.com">Category</a>
·
<a href="http://www.aak-share.com">Reply</a>
</span>
</div>
</li>
<li>
<a class="thumbnail" href="http://www.aak-share.com">
MS
</a>
<div class="content">
          <h3>
Mitch Skolnik</h3>
<span class="preview">i love wood grain things!</span>
<span class="meta">
6h ago ·
<a href="http://www.aak-share.com">Category</a>
·
<a href="http://www.aak-share.com">Reply</a>
</span>
</div>
</li>
<li>
<a class="thumbnail" href="http://www.aak-share.com">
YP
</a>
<div class="content">
          <h3>
Yuriy Portnykh</h3>
<span class="preview">check issues for the latest version...</span>
<span class="meta">
10h ago ·
<a href="http://www.aak-share.com">Category</a>
·
<a href="http://www.aak-share.com">Reply</a>
</span>
</div>
</li>
<li>
<a class="thumbnail" href="http://www.aak-share.com">
JR
</a>
<div class="content">
          <h3>
Josh Ronk</h3>
<span class="preview">make sure to do the following by...</span>
<span class="meta">
2d ago ·
<a href="http://www.aak-share.com">Category</a>
·
<a href="http://www.aak-share.com">Reply</a>
</span>
</div>
</li>
<li>
<a class="thumbnail" href="httpw://www.aak-share.com">
BM
</a>
<div class="content">
          <h3>
Benjamin Mueller</h3>
<span class="preview">Hi nice to meet you!</span>
<span class="meta">
1w ago ·
<a href="http://www.aak-share.com">Category</a>
·
<a href="http://www.aak-share.com">Reply</a>
</span>
</div>
</li>
</ul>
</div>
<footer>
<a href="http://www.aak-share.com">View All Messages</a>
</footer>
</div>

Silahkan Sobat ubah pada link dan Sobat modifikasi pada arahan diatas sesuai dengan keinginan.

Semoga bermanfaat!

Source=http://andytran.me/www.elegantthemes.com

Sumber http://www.websiteedukasi.com/