Berikut ini, saya ingin sharing mengenai cara membuat Shoutbox pada blog. Shoutbox adalah sebuah media untuk pengunjung blog anda mencurahkan isi hati dan pikiran tentang blog anda seperti: Kritik, Saran, Pujian, Pesan dan juga Kesan.Bahkan untuk blogwalking atau promosi bisa juga lewat Shoutbox.
Namun, kali ini tampilan shoutbox tidak seperti biasanya. Jadi di postingan kali ini lebih sedikit memodifikasi tampilan dari shoutbox atau letaknya. Mungkin biar lebih mengerti lagi dipraktekkan aja ya. Yap, berikut langkah-langkahnya:
- Pertama, login dulu ke account Blog anda
- Kemudian klik Design > Page Elements
- Kemudian buat widget baru bertipe HTML/JavaScript, lalu copy kode berikut ini:
<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}#gb{
position:fixed;
top:50px;
z-index:+1000;
}
.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjc28YyAuetFuTb59JM3CSdDhbvY_-A052BmyeQNeXdhUZap-emMjUG6WjMvmM3JuJEZFqkgS7Yw5_txDkwTnRLnGZpYvvKjDGUdi3JJwsEiMGBVLNvcT-sTFeBq4xt62Y7VMx2AI-thtwO/') 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 kode buku tamu kamu -->
<div style="text-align:right">
<a href="javascript:showHideGB()">
[tutup]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>
- Cari tulisan <!-- Ganti ini dengan kode buku tamu kamu --> kemudian ganti dengan script dari Shoutbox kamu
