Cara Membuat Buku Tamu di Blog dengan Mudah

Assalamu'alaikum Wr. Wb.

Salam sejahtera kawan-kawan. Bagaimana kabarnya? Mudah-mudahan kawan-kawan semua berada dalam lindungan Allah SWT. amiiin.

Kali ini saya tidak akan curhat tentang blog saya yang terhapus lagi. Sudah lupakan saja kejadian yang telah terjadi. Keep blogging and spirit !

Pada kesempatan ini saya mau mengamalkan ilmu yang saya dapat dari awal-awal pertama kali membuat sebuah  blog. Tutorial ini bernama "Cara Membuat Buku Tamu di Blog dengan Mudah".

Contohnya kawan-kawan bisa lihat di blog ini atau di gambar yang ada di sebelah ini. Sudah tahu kan kawan-kawan?

Oke kita langsung ke topik kita kali ini saja.

1. Pertama-tama kawan harus punya akun di Cbox atau Shoutmix dan modifikasi tampilan buku tamu yang cocok untuk blog kawan. 

2. Dapatkan kode cbox atau shoutmix untuk blog kawan.

3. Masuk ke akun blogger kawan dan masuk ke Layout dan masuk tab Page Elemen

4. Tambahkan widget HTML/Javascript dan letakkan terserah dimanapun

5. Copy dan pastekan kode dibawah ke dalam widget HTML/Javascript tadi

<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/AVvXsEjrhy14npTgY_8z7fM7zCodWjJiEbKaRScC-dHJ5UiStwlJOR6iSlpuh8IcnrNssk7kg4JY-qeZA8hqFaZX4IWQGrVxmCpOkAMtpoE78xhm7h5wXP6MHIAN-CP3a7lj43e1kkKVo99eF8ZO/') 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 cbox atau shoutmix kawan -->

<a href="http://rerire.blogspot.com"> Cara Membuat Buku Tamu </a> 
</a>

<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>

5. Ganti kode <!-- Ganti ini dengan kode cbox atau shoutmix kawan --> dengan kode cbox atau shoutmix kawan. Kawan juga bisa mengatur posisi tampilannya. Rubah nilai atribut top, semakin kecil nilai, maka tampilan akan semakin ke atas.

6. Save, dan liat hasilnya :)

Sekian saja tutorial ini, semoga kawan-kawan berhasil dalam eksperimennya, dan semoga artikel tutorial ini bisa bermanfaat bagi kita semua. amiiin

Jika kawan-kawan ingin copy artikel ini silahkan copas aja ke blog agan.

Wassalamu'alaikum Wr. Wb.

Tunggu Artikel Lainnya

Posted in: Blog, Internet, Tips Trik, Tutorial