Cara Memasang Widget Buku Tamu Live Chat Floating Di Blog

Ini Buku Tamu Live Chat Apakah. Untuk Widget Chat Anda Disini Chat Tamu (Shoutmix, Cbox.ws, Chatango), Chat Robot (Chatbot4u) dan lain-lain semuanya ada. Ini Klasemen Liga Sepak Bola Ini Live Chat Dibawah-kanan Ini. Ada Karakter Aikatsu Ichigo, Aoi, Ran, Seira, Kii dan Lainnya. Cara Memasang Widget Buku Tamu Live Chat Floating Di Blog Apakah Ini. Untuk 3 in 1 Tab Itu Widget Chat Anda.

Cara Memasang Widget Buku Tamu Live Chat Floating

Pertama Memasang CSS dan jQuery Live Chat Floating

1. Masuk Blogger
2. Klik Tema
3. Terus Klik Edit HTML
4. Tekan Cari Key Ctrl + F
5. Ketik Cari kode </head Untuk CSS Live Chat Floating
6. Letakkan Kode dibawah CSS Live Chat Floating Ini </head diatas

<style>
/* Live Chat Floating */
.chatfloat-image{position:fixed;bottom:0;right:70px;width:180px;height:280px;z-index:50000;box-sizing:border-box;cursor:pointer}
.chatfloat-button{background-color:deeppink;color:#FFF;text-align:center;font-size:25px;font-weight:bold;box-sizing:border-box}
.chatfloat-body{position:fixed;bottom:-5px;right:70px;width:305px;height:380px;background-color:#EEE;border:5px solid LightBlue;z-index:51000;box-sizing:border-box}
@media only screen and (min-width:600px){.chatfloat-image{background-image:url("https://cdn.rawgit.com/maharanidanathallah/athallah-character/aikatsu/ichigohoshimiyaaasdjaka.png");background-repeat:no-repeat;background-position:right bottom;background-size:contain}.chatfloat-button{height:30px;margin-top:250px;border-top-left-radius:20px;border-top-right-radius:20px}}
@media only screen and (max-width:600px){.chatfloat-image{bottom:0;right:0;width:100%;height:30px}.chatfloat-body{position:fixed;bottom:0;right:0;width:100%;height:100%;border:none;overflow:auto}.chatfloat-button{height:30px}}
.chatfloat-close{float:right;background-color:Pink;color:#FFF;padding:5px;text-align:center;text-decoration:none}
.chatfloat-close:hover{background-color:#888}
.chatfloat-close:active{background-color:#222}
.chatfloat-tab{color:#FFF;padding:5px;text-align:center;text-decoration:none;margin:0 1px;font-weight:bold}
.chatfloat-tab1{background-color:red}
.chatfloat-tab1:hover{background-color:lightpink}
.chatfloat-tab1:active{background-color:darkred}
.chatfloat-tab2{background-color:blue}
.chatfloat-tab2:hover{background-color:lightblue}
.chatfloat-tab2:active{background-color:darkblue}
.chatfloat-tab3{background-color:orange}
.chatfloat-tab3:hover{background-color:yellow}
.chatfloat-tab3:active{background-color:darkorange}
.chatfloat-body1{display:block}
.chatfloat-body2{display:none}
.chatfloat-body3{display:none}
.chatfloat-body{display:none}
</style>

Perhatikan Kode Warna Merah Menganti Button Color
Perhatikan Kode Warna Biru Menganti Image Character Ini Link Dibawah

Aikatsu Character Image Code Wiki Github
Segera

7. Selanjutnya Ketik Cari Kode </body Untuk jQuery Live Chat Floating
8. Letakan Kode Dibawah jQuery Live Chat Floating ini </body Diatas Ini 1,2 atau 3 Tab Widget Chat

1 Tab Widget Chat

<script>
$(document).ready(function(){
    $(".chatfloat-image").click(function(){
        $(".chatfloat-body").slideDown();
    });
    $(".chatfloat-close").click(function(){
        $(".chatfloat-body").slideUp();
    });
});
</script>

2 Tab Widget Chat

<script>
$(document).ready(function(){
    $(".chatfloat-tab1").click(function(){
        $(".chatfloat-body1").show();
        $(".chatfloat-body2").hide();
    });
    $(".chatfloat-tab2").click(function(){
        $(".chatfloat-body1").hide();
        $(".chatfloat-body2").show();
    });
    $(".chatfloat-image").click(function(){
        $(".chatfloat-body").slideDown();
    });
    $(".chatfloat-close").click(function(){
        $(".chatfloat-body").slideUp();
    });
});
</script>

atau 3 Tab Widget Chat

<script>
$(document).ready(function(){
    $(".chatfloat-tab1").click(function(){
        $(".chatfloat-body1").show();
        $(".chatfloat-body2").hide();
        $(".chatfloat-body3").hide();
    });
    $(".chatfloat-tab2").click(function(){
        $(".chatfloat-body1").hide();
        $(".chatfloat-body2").show();
        $(".chatfloat-body3").hide();
    });
    $(".chatfloat-tab3").click(function(){
        $(".chatfloat-body1").hide();
        $(".chatfloat-body2").hide();
        $(".chatfloat-body3").show();
    });
    $(".chatfloat-image").click(function(){
        $(".chatfloat-body").slideDown();
    });
    $(".chatfloat-close").click(function(){
        $(".chatfloat-body").slideUp();
    });
});
</script>

10. Selesai Klik Simpan Template

Kedua Memasang Widget Live Chat Float

1. Klik Tata Letak
2. Terus Klik Tambahkan Gadget
3. Lanjut Klik HTML/Javascript
4. Letakkan Kode Dibawah Widget Live Chat Float Ini 1,2 atau 3 Tab Widget Chat

1 Tab Widget Chat

<div class="chatfloat-image">
<div class="chatfloat-button">
Buku Tamu
</div>
</div>
<div class="chatfloat-body">
<a href="#" class="chatfloat-close">
&times;</a>
<div style="clear: both"></div>
--- PASANG OBROLAN WIDGET ---
</div>

2 Tab Widget Chat

<div class="chatfloat-image">
<div class="chatfloat-button">
Buku Tamu
</div>
</div>
<div class="chatfloat-body">
<a href="#" class="chatfloat-tab chatfloat-tab1">
Chat 1</a><a href="#" class="chatfloat-tab chatfloat-tab2">
Chat 2</a>
<a href="#" class="chatfloat-close">
&times;</a>
<div style="clear: both"></div>
<div class="chatfloat-body1">
--- PASANG OBROLAN WIDGET 1 ---
</div>
<div class="chatfloat-body2">
--- PASANG OBROLAN WIDGET 2 ---
</div>
</div>

atau 3 Tab Widget Chat

<div class="chatfloat-image">
<div class="chatfloat-button">
Buku Tamu
</div>
</div>
<div class="chatfloat-body">
<a href="#" class="chatfloat-tab chatfloat-tab1">
Chat 1</a><a href="#" class="chatfloat-tab chatfloat-tab2">
Chat 2</a><a href="#" class="chatfloat-tab chatfloat-tab3">
Chat 3</a>
<a href="#" class="chatfloat-close">
&times;</a>
<div style="clear: both"></div>
<div class="chatfloat-body1">
--- PASANG OBROLAN WIDGET 1 ---
</div>
<div class="chatfloat-body2">
--- PASANG OBROLAN WIDGET 2 ---
</div>
<div class="chatfloat-body3">
--- PASANG OBROLAN WIDGET 3 ---
</div>
</div>

Perhatikan Kode Warna Merah Menganti Kata Ketik Judul Live Chat Button
Perhatikan Kode Warna Kuning Menganti Kata Ketik Judul Tab Widget Chat
Perhatikan Kode Warna Biru Menganti Letakkan Widget Chat Ini Link dibawah

5. Selesai Klik Simpan
6. Lihat Hasilnya Blog

Cara Memasang Widget Buku Tamu Live Chat Floating Di Blog