Membuat Shoutbox / Buku Tamu di Samping Kanan dan Kiri Blog Serta Muncul Dari Atas ke Bawah

Kali ini Saya akan membahas Cara Memasang Buku Tamu di Sisi Kanan atau Kiri Serta Muncul Dari Atas ke Bawah di Blog Anda.

Membuat Shoutbox/ Buku Tamu memang bisa di buat dengan berbagai cata ada yang langsung kita dapatkan di penyedia layanan shoutbox itu sendiri dan tinggal memasang script itu di blog kita, ada juga yang meletakkan dengan Tombol atau gambar floating, ada juga yang meletakkan dengan Tombol Pop Up.

Berikut Ini Tutorialnya :

• Login ke blogger.com, jika sudah, 
• Pilih Tata Letak → Tambah Gadget → HTML/JavaScript 
• Copas kode beikut ini : 

Untuk Meletakkan Buku Tamu Disisi Kanan Blog :

<style type="text/css">
#gb{
position:fixed;
top:10px
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('http://lh4.ggpht.com/_jn57XA2jLxY/SmCHl1YEsxI/AAAAAAAAAXQ/HshHClEVcvY/tabs.png') 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">

<--------------Masukkan kode script buku tamu anda disini-------------->

<div style="text-align: right; font-size: 10px;">
Created Widget by :
<a href=" http://suryachandragobel.blogspot.com/2012/04/membuat-shoutbox-buku-tamu-di-samping.html ">
Surya☼Chandra☼Gobel
</a>
</div>
<div style="text-align:right">
<a href="javascript:showHideGB()">
[x]Close[x]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>

Untuk memasang buku tamu di sisi sebelah kiri blog Anda :

<!-- left hidden chatbox by http://suryachandragobel.blogspot.com START -->
 <style> #hcl { position:fixed; top:135px; left:20px; z-index:+500; } * html #hcl {position:relative;} .hcltab { height:200px; width:30px; float:left; cursor:pointer; background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBiGaBnIGDG-9lwadC1jtI7koJBnhV-R2FjR7Dn48XfJ0cpuEeucnN9T8QqmJrkv9Daua0xoOgmHcyNJJwuJ-w6u4ji5R0Qpq3qU4uuX4y_ja9muJcDDaENHy4SNKI2VWSCED3LyLu3Kuk/s1600/buku-4.png') no-repeat; } .hclcontent { float:left; border:4px solid #5F9EA0; background:#F5F5F5; padding:3px; } .hc-credit {font-size:9px}
 .hc-credit a {text-decoration:none} </style> <script type="text/javascript"> function showHidehcl(){ var hcl = document.getElementById("hcl"); var w = hcl.offsetWidth; hcl.opened ? movehcl(0, 30-w) : movehcl(20-w, 0); hcl.opened = !hcl.opened; } function movehcl(x0, xf){ var hcl = document.getElementById("hcl"); var dx = Math.abs(x0-xf) > 10 ? 5 : 1; var dir = xf>x0 ? 1 : -1; var x = x0 + dx * dir; hcl.style.left = x.toString() + "px"; if(x0!=xf){setTimeout("movehcl("+x+", "+xf+")", 10);} } </script> <div id="hcl"> <div class="hclcontent">

<------Ganti tulisan ini dengan widget buku tamu anda------>

<div style="text-align: right; font-size: 10px;">
              Widget by
              <a href=" http://suryachandragobel.blogspot.com/2012/04/membuat-shoutbox-buku-tamu-di-samping.html">
                  Surya☼Chandra☼Gobel
              </a>
          </div>
<br /> <div class="hc-credit"> <span style="float:left"> <!-- THIS CREDIT MUST STAY INTACT FOR LEGAL USE -->  </span> <span style="float:right"> <a href="javascript:showHidehcl()">  </a> </span> </div> </div> <div class="hcltab" onclick="showHidehcl()"> </div>   <script type="text/javascript"> var hcl = document.getElementById("hcl"); hcl.style.left = (30-hcl.offsetWidth).toString() + "px"; </script> <!-- left hidden chatbox by http://suryachandragobel.blogspot.com END --></div>

Untuk Memasang buku tamu muncul dari atas ke bawah :

<style type="text/css">
#gb{
position:fixed;
right:450px;
z-index:+1000;
}
* html #gb{position:relative;}

.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url();
}
.gbcontent{
float:left;
border:3px double  #7b0000;
background:transparent;
-moz-border-radius: 1em 4em 1em 4em;
border-radius: 1em 4em 1em 4em;
-webkit-border-radius: 1em 4em 1em 4em;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 1500-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 25 ? 35 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.top = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">

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

<!-- Simpan Kode cbox atau shoutmix nya disini --> 
<a href="javascript:void(0);" onclick="showHideGB()"><div style="text-align:left"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsDL6h3B9YJkJpeHbeW5-dow78AeIMRD7K84Bbroua7Nf9h-EVWtn6jAVsTggA3pduJSChhqO4Q1DOEZBCFmM0RTwkNwsWdBSNNZQOWH1lGqaL9ayox0yuz_3L_rg2whH0xrwx0MoX17I/s1600/CLOSE.png" border:2px double #7b0000 /></div></a>
</div>
</div>
<br />
[Created By : Surya Chandra Gobel]
<br />
[Thanks For Visiting !]
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.top = (-400-gb.offsetWidth).toString() + "px";
</script>

<a class="west" href="javascript:void(0);" onclick="showHideGB()" title="Buku Tamu"><img alt="Buku Tamu" heigth="125" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixMHR_HKNMkpmuGn-zpY9uQouCZPU4D8nVfdLv3jinUlbmQDd_JgZhilmjpPYhurEXu0E5Uy6AOPH9BTTgB0OgH3tdd7UwjZ5n32icU74hOX6SLPRNy6XiE4PmBoRlqQWi0x2aT75J9QM/s1600/guestbook.png" border:3px double #7b0000 /></a>

Keterangan :

• Ubah Kode yang berwarna Merah dengan kode buku tamu / shoutbox Anda 
• Kode yang berwarna orange adalah posisi bukutamunya semakin kecil nilai angkanya maka semakin tinggi letak buku tamunya ,sebaliknya semakin besar nilai angkanya maka semakin ke bawah letak buku tamunya 
• Jika Anda Belum Punya Kode Shoutbox anda bisa membuatnya di cbox atau di Fibox

Terakhir :

• Simpan dan lihat hasilnya 

Selamat Mencoba !