TUTORIAL BUAT BLOG

Dari sekian banyak tutorial tentang cara menaruh letak Shoutmix di halaman Template Blog yang saya sukai adalah yg tersembunyi, yaitu ketika tombol Buku Tamu di Klik maka akan keluar widget shoutmix dari sisi kiri maupun dari sisi kanan halaman blog.

Adapun contoh Codenya bisa tinggal di copy paste di halaman Page Element - Add Gadget dengan sedikit mengubah dan menambahkan Code shoutmix caranya yaitu :

1. Klik add Gadget di halaman account Blogger anda, kemudian pilih add "HTML/JavaScript"e
2. Copy Code berikut

<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/AVvXsEhTlA9c3HjFoJ2AQOqMH01luwn0xW12tYpIf_rfHQ7H_4MzB_J6HiPn6yY_NqQXaQo-Dxk921_YSvUtkdvG37Fm0U06kpB7Ryphz1zscFDxxWCT5bMo4CKFk4fMps9MMorSw3N3A_qXTIl_/') 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 -->
<br/>
<br/>
<a href="http://skjs2u.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>