Cara Membuat Buku Tamu di Sisi Kanan atau Kiri Blog

Sebelumnya saya sudah memposting tentang Cara Mendapatkan Cbox atau Kode Buku Tam postingan itu sangat membantu anda para sahabat bloger dalam menambahkan buku tamu pada blog sahabat, khususnya bagi sahabat bloger yang belum mempunyai kode kode buku tamu / shoutbox Anda.
Jika sudah membaca dan mempraktekannya sekarang tinggal ke tutorial menambahkan buku tamunya, okehh silahkan disimak secara seksama tutorialnya :
 
Pertama :
Login dulu ke Account Blogger. 

Kedua :
Masuk ke Menu Rancangan / Design pada Dashboard Anda

Ketiga :
Untuk Meletakkan Buku Tamu Disisi Kanan Blog :
Tambahkan Script/ Kode berikut di blog Sobat

<!-- right hidden chatbox by http://idesainer.blogspot.com/ START --> <style> #hcr { position:fixed;top:100px; z-index:+1000; } * html #hcr {position:relative;} .hcrtab {height:100px;width:30px; float:left; cursor:pointer; background:url('http://i1227.photobucket.com/albums/ee440/danghilal/idesainer/shoutbox-1.png') no-repeat; } .hcrcontent { float:left; border:2px solid #003e82; background:#f3f6f7; padding:10px; } .hc-credit {font-size:9px} .hc-credit a {text-decoration:none} </style> <script type="text/javascript"> function showHidehcr(){ var hcr = document.getElementById("hcr"); var w = hcr.offsetWidth; hcr.opened ? movehcr(0, 30-w) : movehcr(20-w, 0); hcr.opened = !hcr.opened; } function movehcr(x0, xf){ var hcr = document.getElementById("hcr"); var dx = Math.abs(x0-xf) > 10 ? 5 : 1; var dir = xf>x0 ? 1 : -1; var x = x0 + dx * dir; hcr.style.right = x.toString() + "px"; if(x0!=xf){setTimeout("movehcr("+x+", "+xf+")", 10);} } </script> <div id="hcr"> <div class="hcrtab" onclick="showHidehcr()"> </div> <div class="hcrcontent"> <!-- KODE SHOUTMIX ANDA DISINI --> <br /> <div class="hc-credit"> <span style="float:left"> <!-- THIS CREDIT MUST STAY INTACT FOR LEGAL USE --> <span > <span > Get this</span> <a href="http://idesainer.blogspot.com/2012/02/cara-membuat-buku-tamu-di-sisi-kanan.html" target="_blank"> <span class="Apple-style-span" > Desaign1</span> </a></span> <span style="float:right"> <a href="javascript:showHidehcr()"> [close] </a> </span> </div> </div> </div> <script type="text/javascript"> var hcr = document.getElementById("hcr"); hcr.style.right = (30-hcr.offsetWidth).toString() + "px"; </script> <!-- right hidden chatbox by http://idesainer.blogspot.com/ END -->

Untuk Memasang buku tamu di sisi sebelah kiri blog anda :
Tambahkan Script/ Kode berikut di blog Sobat

<!-- left hidden chatbox by http://idesainer.blogspot.com/ START --> <style> #hcl { position:fixed;top:100px; left:0px; z-index:+1000; } * html #hcl {position:relative;} .hcltab {height:100px;width:30px; float:left; cursor:pointer; background:url('http://i1227.photobucket.com/albums/ee440/danghilal/idesainer/shoutbox-1.png') no-repeat; } .hclcontent { float:left; border:2px solid #790909; background:#f3f6f7; padding:10px; } .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"> <!-- KODE SHOUTMIX ANDA DISINI --> <br /> <div class="hc-credit"> <span style="float:left"> <!-- THIS CREDIT MUST STAY INTACT FOR LEGAL USE --> <span > <span > Get this</span> <a href="http://idesainer.blogspot.com/2012/02/cara-membuat-buku-tamu-di-sisi-kanan.html" target="_blank"> <span class="Apple-style-span" > Desaign1</span> </a> </span> </span> <span style="float:right"> <a href="javascript:showHidehcl()"> [close] </a> </span> </div> </div> <div class="hcltab" onclick="showHidehcl()"> </div> </div> <script type="text/javascript"> var hcl = document.getElementById("hcl"); hcl.style.left = (30-hcl.offsetWidth).toString() + "px"; </script> <!-- left hidden chatbox by http://idesainer.blogspot.com/ END -->

Keterangan : 
Ubah Kode yang berwarna Merah dengan kode buku tamu / shoutbox Anda