Cara Menyatukan Buku Tamu FB+Shoutmix

Sebelumnya, maafkan saya jika saya jarang Postingan secara rutin, karena banyak pekerjaan yang harus saya lakukan, selain Blogging. Jadi, mohon dimaklumi ya ;) hehe ..

Pada postingan kali ini, saya akan menjelaskan tentang " Cara Menyatukan Buku Tamu FB+Shoutmix  " (  ).  Saya yakin lah.. buku tamu ini, beda dari yang lain.. kan ini buatanku sendiri ^^ (bangga) haha... Apa itu buku tamu, dan apa kelebihannya? 

Seperti kita tahu, jika pengunjung mengunjungi blog kita, pasti pengunjung itu akan memberikan unek2 untuk blog kita. Itu lah gunanya buku tamu. tempat bersilaturahmi nya para blogger, dan tempat untuk berdiskusi. Ada definisi lain tentang buku tamu yang saya dapat dari mahendragrafity , yaitu, Buku tamu ini biasanya digunakan oleh para pengunjung suatu blog ataupun website untuk meninggalkan komentar mereka di blog atau website tersebut. (kebanyakan buku menu malah jadi ajang obrolan)

Sudah jelas kan ? Langsung ke Tutorialnya aja ya, ok ?

( Untuk yang belum punya buku tamu, bisa daftar disini ).

Langkah 1

Login blog dengan akun kamu sendiri >> Dashboard >> Layout/Rancangan >> Elemen Laman >> Add a Gadget >> HTML/JavaScript

Langkah 2

Salin kode di bawah, dan pastekan pada ruang tersebut, 

<style type="text/css">
#gb{
position:fixed;top:50px;z-index:+1000;}
* html #gb{position:relative;}
.gbtab{height:128px;width:35px;
float:right;
cursor:pointer;background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNwtwB4ozKA6C1-29lnkVxsSY3DiLlh5jfCNdDSBPZRaOzavcy6GzZI0gAaeQbsed0IZNwRGfzrcc47GvVqz6Vu4ZhIrhIWt4guflj-Hmj8JfjQRh73z3VdIgObmdufsHiYXw_p8id4-M/') no-repeat;}
.gbcontent{float:right;border:2px solid #4A6490;
background:#4A6490;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.left = x.toString() + "px";if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}}
</script><div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div><div class="gbcontent">

<div style="text-align: center;">
<span style="color: blue; font-size: x-small;">Selamat Datang</span>
<span style="font-size: x-small;"><b style="color: red;">Update Status Disini!!</b></span><span style="color: blue; font-size: x-small;">
 </span><span style="font-size: x-small;"><b style="color: blue;"></b></span></div>
<iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://www.facebook.com/plugins/livefeed.php?app_id=114650978591909&amp;width=290&amp;height=400&amp;xid=152250694787828" style="border: medium none; height: 120px; width: 290px;"></iframe>
<br/>

LETAKKAN KODE BUKU TAMU KAMU DISINI

<div style="color: #999999;">
<span style="font-size: xx-small;">Powered by: <a href="http://www.facebook.com/">Facebook</a> Widget by: <a href="2011/04/cara-membuat-buku-tamuupdate-status-fb.html" target='new'>Mau Buku Tamu Seperti Ini?</a></span>
</div><br/><div style="text-align:left"><a href="javascript:showHideGB()"></a></div></iframe></div></div>
<script type="text/javascript">var gb = document.getElementById("gb");
gb.style.left = (30-gb.offsetWidth).toString() + "px";
</script>

Sebelum kita klik save, kita harus memperhatikan hal-hal di bawah ini :


1.  Kode yang Berwarna merah, adalah posisi dari buku tamu itu sendiri. Bisa diganti sesuai selera ( tapi menurut saya, segitu cukup kok udah pas :) )

2.  Kode yang berwarna Oranye, adalah kecepatan buka/tutup buku tamu nya.  Bisa Diganti sesuai kebutuhan.

3. Kode yang Berwarna Kuning , bisa diganti, dengan warna yang diinginkan , ( lebih baik, warna nya sama dengan warna buku tamu yang kalian miliki ) Untuk Kode Warna, bisa dilihat disini.

4. Letakkan Kode buku tamu kamu Pada tulisan yang berwarna Hitam, jangan lupa, untuk kecocokan ukurannya, ubah lebar buku tamu ( width ) menjadi 290 . Dan Ubah tinggi buku tamu kamu ( height ) menjadi 350. jadi, jadi, kode nya akan  seperti ini  width="290" height="400".

5. Kode yang berwarna Ungu adalah gambar show/hide buku tamu itu sendiri. Silakan ganti dengan gambar milik kamu sendiri, atau, tidak diganti juga tidak apa2 kok :)

Catatan :

Jika Buku tamu nya ingin sama persis seperti milik saya, jangan mengubah kode apapun, kecuali pada keterangan nomor 4. Jika ada kode yang salah/gagal, tolong beritahu saya ya di form komentar.

Setelah itu, Klik SAVE , dan lihat Hasilnya :D Semoga Bermanfaat :D