Cara membuat buku tamu ramping pada blog

Pada biasanya buku tamu sangat tampak disebelah kanan atau kiri atau bawah blog yang cukup memakai ruang pada blog. Sekarang kita akan berbagi caranya bagaimana buku tamu menyelip ke dalam dan hanya tampak sedikit saja. kita akan membuatnya seramping mungkin disebelah kanan blog. terlihat seperti pada gambar dibawah ini.

Cara membuat buku tamu ramping pada blog

Namun jika di klik kita dapat melihatnya cukup lebar, dan tertera judul-judul halaman yang dilihat oleh para tamu yang berkunjung. Seperti pada gambar dibawah ini.

Caranya cukup simple, mari kita ikuti langkah dibah ini untuk membuat buku tamu agak tersembunyi pada blog teman-teman.

Sekarang silahkan buat akun disini: http://www.cbox.ws/  setelah buat akun copy code yang di berikan dari web tersebut. Kemudian cara memasukkan code tersebut:

Pertama: Login ke bloger teman-teman,

Setelah masuk cari tulisan ''Rancangan'' jika sudah nemu klik aja itu ''Rancangan''. Lalu klik ''tambah gatget''.

Pada pilihan gadget yang beragam itu carilah tulisan ''HTML/Javasript''. Lalu pada ''HTML/Javasript tersebut copaskan code dibawah ini kedalamnya.

klik gambar untuk melihat script/html-nya karena yang terlihat sekarang ini hanya gambar, setelah klik akan di alihkan ke dokumen google tim untuk melihat dan mencopy html tersebut.

Ini cara yang disarankan tim mbah karena sript blog tidak responsive untuk kode-kodean. setelah ganti theme blog ini sudah kompatible dan sekarang bisa copy kodenya di bawah ini.

<style tipe=''text/ccs''>

#gb{

position:fixed;

top:50px;

z-index:+1000;

}

*html #gb{position:relative;}

.gbtap{

height:100px;

width:30px;

float:left:

cursor:pointer;

background:url('http://2.bp.blogspot.com/-mrsZX_-

WDkk/Te5tiGXpqNI/AAAAAAAAAZg/hDLjMWDN6_U/s1600/bukutamu.png') no-repeat;

}

.gbcontent{

fload:left;

border:2px solid #A5BD51;

background:#F5F5F5;

padding:10px;

}

</style>

<script type=''text/javascript''>

function showHideGB(){

var gb = document.getElementByld(''gb'');

var w = gb.offsetWidth;

gb.opened ? moveGB(0, 30w) : moveGB(20-w, 0);

gb.opened = !gb.opened;

}

function moveGB(x0, fx){

var gb = document.getElementByld(''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''>

Pastekan code dari www.cbox.ws disini teman-teman

<div style=text''/javascript''>

<a     href=''http;//Letakkan link blog teman-teman disini''>[Buku Tamu]</a>><a href=''javascript:showHideGB()''>

[close]

</a>

</div>

</div>

</div>

<script type=''text/javascript''>

var gb = document.getElementByld(''gb'');

gb.style.right = (30-gb.offsetWidth).toString() + ''px'';

</script></div></div>

Untuk teman-teman yang sudah mengerti coding / HTML /bahasa CCS dapat menyesuaikan tampilan sesuai keingin.

Jika sudah selesai silakan klik ''simpan''

Baiklah teman-teman, itu tadi sedikit sahaja cara membuat buku tamu tersembunyi walaupun kelihatan heheh.... semoga berhasil !.

Bagikan Artikel ini

ARTIKEL TERKAIT