Membuat Shoutmix Lebih Menarik

Shoutmix merupakan layanan yang digunakan sebagai wadah untuk meninggalkan komentar bagi para pengunjung blog. Tujuannya adalah agar adanya komunikasi antara Pengelola Blog dengan pembacanya. Sekarang kita akan membuat tampilan Shoutmix lebih menarik. Bagi kamu yang belum memiliki akun Shoutmix, bisa membuatnya di sini

Langsung saja kita akan membuat sesuatu yangberbeda dengan tampilan Shoutmix kita.

Langkah-Langkah:

• Masuk ke akun Blogger kamu
• Klik Rancangan
• >Klik tambah gadget
• Pilih HTML/JavaScript
• Masukan kode berikut ke dalam HTML/JavaScript tadi

---

<style type="text/css">

#gb{

position:fixed;

top:50px;

z-index:+1000;

}

* html #gb{position:relative;}

.gbtab{

height:100px;

width:30px;

float:left;

cursor:pointer;

background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipQ21rhSIKEjHQI2d4AtCNA7x2xEZrLvoxHwK-yqIR5Gpx1dWMzoxt4hyphenhyphenl8EQGMEstEbI6lRAxCiTY8K0SI2cSAkUp2FRUz8M2akDcCw3-EEwqUN0fpftZUkHzu25HBu0aiuumiDy8OYLe/') no-repeat;

}

.gbcontent{

float:left;

border:2px solid #A5BD51;

background:#F5F5F5;

padding:10px;

}

</style>

<script type="text/javascript">

function showHideGB(){

var gb = document.getElementById("gb");

var w = gb.offsetWidth;

gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);

gb.opened = !gb.opened;

}

function moveGB(x0, xf){

var gb = document.getElementById("gb");

var dx = Math.abs(x0-xf) > 10 ? 5 : 1;

var dir = xf>x0 ? 1 : -1;

var x = x0 + dx * dir;

gb.style.right = x.toString() + "px";

if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}

}

</script>

<div id="gb">

<div class="gbtab" onclick="showHideGB()"> </div>

<div class="gbcontent">

<!-- Ganti ini dengan Shoutmix kamu -->

<br/>

<br/>

<a href="http://forantum.blogspot.com">.

</a>

<div style="text-align:right">

<a href="javascript:showHideGB()">

[close]

</a>

</div>

</div>

</div>

<script type="text/javascript">

var gb = document.getElementById("gb");

gb.style.right = (30-gb.offsetWidth).toString() + "px";

</script></div></div>

---

• Tulisan yang berwarna merah ganti dengan kode Shoutmix kamu
• Simpan

Untuk Contoh Shoutmixnya bisa kalian lihat di sini atau di sini atau perhatikan gambar berikut

Yang diberi tanda panah yakni Shoutmix yang telah dimodifikasi

Selamat Mencoba dan jangn lupa berkomentar

Artikel Terkait:

Recent Post