Satu lagi fasilitas untuk berinkteraksi dengan pengunjung anda, chatbox namanya. Sebenarnya fungsinya sama dengan buku tamu dari shoutmix tapi kali ini agak dimodifikasi sedikit sehingga tempatnya tersembunyi. Jika kita ingin menampilkan menu ini, kita harus meng-klik tombol chatbox yang ada di sebelah kiri blog . Untuk memasang chatbox slide vertikal dengan jQuery ini sangat mudah, anda tinggal menambahkan kode-kode HTML yang nanti akan saya uraikan secara lengkap di bawah.

Cara Pemasangan Pada Blog

1. Login ke Blogger dengan akun anda.
2. Kemudian pilih Rancangan Edit HTML
3. Seperti biasa klik Download Template Lengkap biar aman
4. Selanjutnya cari kode ]]></b:skin> jika sudah ketemu letakkan kode CSS dibawah ini tepat diatasnya.

.panel {
    position: fixed;
    top: 104px;
    left: 0;
    background: #000;
    border-radius-topright: 10px;
    border-top-right-radius: 10px;
    border-radius-bottomright: 10px;
    border-bottom-right-radius: 10px;
    border: 1px solid #444;
    width: 330px;
    height: auto;
    filter: alpha(opacity=85);
    -moz-opacity: 0.85;
    opacity: 0.85;
    display: none;
    padding: 30px 30px 30px 100px;
}

.panel p {
    color: #ccc;
    margin: 0 0 15px;
    padding: 0;
}

.panel a,.panel a:visited {
    color: #9FC54E;
    text-decoration: none;
    border-bottom: 1px solid #9FC54E;
    margin: 0;
    padding: 0;
}

.panel a:hover,.panel a:visited:hover {
    color: #fff;
    text-decoration: none;
    border-bottom: 1px solid #fff;
    margin: 0;
    padding: 0;
}

a.trigger {
    position: fixed;
    text-decoration: none;
    top: 50px;
    left: 0;
    font-size: 16px;
    letter-spacing: -1px;
    font-family: verdana, helvetica, arial, sans-serif;
    color: #fff;
    font-weight: 700;
    background: #333 url(http://lh6.ggpht.com/_xcD4JK_dIjU/S4QDwX8gRPI/AAAAAAAAD2U/TdhwLYRRzzA/d/plus.png) 85% 55% no-repeat;
    border: 1px solid #444;
    border-radius-topright: 10px;
    border-top-right-radius: 10px;
    border-radius-bottomright: 10px;
    border-bottom-right-radius: 10px;
    border-radius-bottomleft: 0;
    border-bottom-left-radius: 0;
    display: block;
    padding: 15px 40px 15px 15px;
}

a.trigger:hover {
    position: fixed;
    text-decoration: none;
    top: 50px;
    left: 0;
    font-size: 16px;
    letter-spacing: -1px;
    font-family: verdana, helvetica, arial, sans-serif;
    color: #fff;
    font-weight: 700;
    background: #222 url(http://lh6.ggpht.com/_xcD4JK_dIjU/S4QDwX8gRPI/AAAAAAAAD2U/TdhwLYRRzzA/d/plus.png) 85% 55% no-repeat;
    border: 1px solid #444;
    border-radius-topright: 10px;
    border-top-right-radius: 10px;
    border-radius-bottomright: 10px;
    border-bottom-right-radius: 10px;
    border-radius-bottomleft: 0;
    border-bottom-left-radius: 0;
    display: block;
    padding: 15px 40px 15px 15px;
}

a.active.trigger {
    background: #222 url(http://lh3.ggpht.com/_xcD4JK_dIjU/S4QDvxbreOI/AAAAAAAAD2M/Cz3Q2r5pdTM/d/minus.png) 85% 55% no-repeat;
}

.columns {
    clear: both;
    width: 330px;
    line-height: 22px;
    padding: 0 0 20px;
}

.colleft {
    float: left;
    width: 130px;
    line-height: 22px;
}

.colright {
    float: right;
    width: 130px;
    line-height: 22px;
}

a:focus {
    outline: none;
}

.panel img {
    background-color: #262626;
    border: 1px solid #333;
    float: right;
    margin: 3px 3px 6px 8px;
    padding: 5px;
}

.panel h3 {
    border-bottom: 1px solid silver;
    margin-bottom: 5px;
    padding-bottom: 3px;
    text-align: left;
    clear: both;
    color: #FFF;
    font-size: 12px;
    font-weight: 700;
}

.columns ul,.columns ul li {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

5. Setelah itu cari kode </head> kemudian copas kode dibawah ini dan taruh diatasnya.

<script  src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js'  type='text/javascript'/>

6. Selanjutnya masukkan code berikut ini, dibawah code Jqueri tadi.

<script type="text/javascript">
    $(document).ready(function () {
        $(".trigger").click(function () {
            $(".panel").toggle("fast");
            $(this).toggleClass("active");
            return false;
        });
    });
</script>

7. Kemudian cari lagi kode berikut ini <body>
8. Setelah itu masukkan kode dibawah ini kemudian taruh diatasnya.

<div class="panel">

Kode script ChatBox Anda atau bisa diganti dengan kode widget atau apa sajalah terserah.....

</div>
<a class="trigger" href="">ChatBox</a>

9. Dan yang terakhir Save Template anda.

Demo