Posted by Aak
Aak-share.com Updated at: 3:32:00 AM

Cara Membuat Kotak Pesan Seperti Chatbox

No comments:
Cara Membuat Pesan Ala Chatbox ~ Sobat tentunya sudah tidak asing lagi dengan box atau kotak percakapan melalui jaringan internat yaitu Chatbox. Sudah saya ulas sebelumnya cara mendaftar akun chatbox dan cara pemasangan pada Blog .

Pada kotak percakapan ini mirip dengan Chatbox namun Sobat tidak perlu mendaftarnya karena menciptakannya dengan menggunakan properti CSS kabar baiknya Sobat bisa menuliskan percakapan sesuai yang Sobat inginkan karena mengisi percakapan tersebut dengan cara manual.


Selain itu Sobat juga bisa memindahkan widgat tersebut seperti 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 :



Langkah pertama sobat salin kode 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 kode </head>, salin kode 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 sobat sudah terinstal kode diatas lewati langkah di atas

Masih pada kode </head>, kemudian salin kode dibawah ini dan terapkan dibawah kode 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 sobat menuju Layout/Tata letak, tambahkan gadget dan pilih HTML/Javascript lalu salin kode 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 kode diatas sesuai dengan keinginan.


Semoga bermanfaat!

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




Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

No comments