Cara Membuat Buku Tamu Melayang Di Blog


Beberapa penyedia layanan guestbook, seperti shoutmix sering kali digunakan blogger untuk mendapatkan saran atau komentar dari pengunjung. Namun buku tamu ini sering memakan ruang widget sidebar WordPress. Hal ini bisa diatasi dengan menyembunyikan buku tamu pada sisi layar agar dapat melayang serta menghemat ruang.

Dengan menyembunyikan buku tamu, kita menghemat ruang widget sidebar, dan dengan melayangkan buku tamu tersebut, pengunjung dapat tertarik 2 kali lipat dibanding jika ditaruh pada widget sidebar.

buku-tamu-melayang

Steps

Cara 1
Bagi pemula disarankan menggunakan cara ini, karena yang paling mudah. Dengan memasukan kode css, javascript, dan html sekaligus kedalam file php.

  1. Buka tema yang anda gunakan, lalu edit pada bagian header.php
  2. Masukan code berikut pada baris kosong paling bawah dari header.php (*atau file lain dengan catatan masih dalam ruang lingkup kode <html></html>) atau setelah <html> bukan </html>.
    <style type="text/css">
    #gb {
    	position:fixed;
    	top:<-! Masukan jarak dalam satuan px -!>;
    	z-index: 1000;
    }
    * html #gb {
    	position:relative;
    }
    .gbtab {
    	margin-top:<-! Masukan jarak dalam satuan px -!>;
    	height:110px;
    	width:30px;
    	float:right;
    	cursor:pointer;
    	background:url(<!- Masukan url gambar 30x110px -!>) no-repeat top;
    }
    .gbtab:hover {
    	margin-top:<-! Masukan jarak dalam satuan px -!>;
    	height:110px;
    	width:30px;
    	float:right;
    	cursor:pointer;
    	background:url(<!- Masukan url gambar 30x110px -!>) no-repeat top;
    }
    .gbcontent {
    	float:right;
    	border:3px solid #ff8800;
    	background:#ffffff;
    	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 onclick="showHideGB()"> </div>
    <div>
    
    <!- Masukan Code ShoutMix disini -!>
    
    <div style="text-align:left">
    <a href="javascript:showHideGB()">[close]</a>
    </div>
    </div>
    
    <script type="text/javascript">
    var gb = document.getElementById("gb");
    gb.style.left = (30-gb.offsetWidth).toString() + "px";
    </script>
    
    </div>
  3. Ubah pada baris ke-4 mengatur jarak antara kotak isi buku tamu dengan atas layar. Misalnya 30px, maka
    #gb {
    	position:fixed;
    	top:30px;
    	left:-276px;
    	z-index: 1000;
    }
  4. Ubah pada baris ke-11 dan 19 untuk mengatur jarak atas layar dengan tombol buku tamu, misalnya 150px, maka
    .gbtab {
    	margin-top:150px;
    	height:110px;
    	width:30px;
    	float:right;
    	cursor:pointer;
    	background:url(<!- Masukan url gambar 30x110px -!>) no-repeat top;
    }
    .gbtab:hover{
    	margin-top:150px;
    	height:110px;
    	width:30px;
    	float:right;
    	cursor:pointer;
    	background:url(<!- Masukan url gambar 30x110px -!>) no-repeat top;
    }
  5. Ubah pada baris ke-16 untuk gambar tombol dalam keadaan biasa, dan ubah baris ke-24 untuk gambar tombol pada saat disorot, masing-masing dengan ukuran 30x110px, misalnya http://ddery.com/images/buku-tamu.png dan http://ddery.com/images/buku-tamu-hover.png, maka
    .gbtab {
    	margin-top:150px;
    	height:110px;
    	width:30px;
    	float:right;
    	cursor:pointer;
    	background:url(http://ddery.com/images/buku-tamu.png) no-repeat top;
    }
    .gbtab:hover {
    	margin-top:150px;
    	height:110px;
    	width:30px;
    	float:right;
    	cursor:pointer;
    	background:url(http://ddery.com/images/buku-tamu-hover.png) no-repeat top;
    }
  6. Ubah baris ke-55 dengan kode ShoutMix atau buku tamu yang lain. Contoh
    <div id="gb">
    <div onclick="showHideGB()"> </div>
    <div>
    
    <iframe title="ddery" src="http://www6.shoutmix.com/?ddery" width="250px" height="400px" frameborder="0" scrolling="auto"><a href="http://www6.shoutmix.com/?ddery">View shoutbox</a></iframe>
    
    <div style="text-align:left">
    <a href="javascript:showHideGB()">[close]</a>
    </div>
    </div>
    <script type="text/javascript">
    var gb = document.getElementById("gb");
    gb.style.left = (30-gb.offsetWidth).toString() + "px";
    </script>
    
    </div>

Cara 2
Digunakan untuk yang sudah agak mahir. Dengan membuat kode css, javascript, dan html secara terpisah dan digabung kembali pada file php.

  1. Buka folder tema yang anda pakai, lalu edit style.css atau edit pada bagian yang berhubungan dengan css tema
  2. Masukan kode berikut pada bagian kosong paling bawah dari file css
    #gb {
    	position:fixed;
    	top:<-! Masukan jarak dalam satuan px -!>;
    	z-index: 1000;
    }
    * html #gb {
    	position:relative;
    }
    .gbtab {
    	margin-top:<-! Masukan jarak dalam satuan px -!>;
    	height:110px;
    	width:30px;
    	float:right;
    	cursor:pointer;
    	background:url(<!- Masukan url gambar 30x110px -!>) no-repeat top;
    }
    .gbtab:hover {
    	margin-top:<-! Masukan jarak dalam satuan px -!>;
    	height:110px;
    	width:30px;
    	float:right;
    	cursor:pointer;
    	background:url(<!- Masukan url gambar 30x110px -!>) no-repeat top;
    }
    .gbcontent {
    	float:right;
    	border:3px solid #ff8800;
    	background:#ffffff;
    	padding:10px;
    }
  3. Ubah baris ke-3,10,15,18, dan 23 seperti dengan cara 1 step ke-3,4, dan 5
  4. Buat file javascript pada folder tema, contoh gb.js. Lalu isi file tersebut dengan kode javascript berikut
    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);}
    }
  5. Buka header.php lalu pada bagian paling atas diantara kode <head></head> masukan kode berikut
    <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/<!-nama file javascript tadi -!>.js"></script>

    Misalnya gb.js maka

    <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/gb.js"></script>
  6. Masih pada header.php. Masukan kode berikut pada baris kosong paling bawah dari header.php (*atau file lain dengan catatan masih dalam ruang lingkup kode <html></html>) atau setelah <html> bukan </html>.
    <div id="gb">
    <div onclick="showHideGB()"> </div>
    <div>
    
    <!- Masukan Code ShoutMix disini -!>
    
    <div style="text-align:left">
    <a href="javascript:showHideGB()">[close]</a>
    </div>
    </div>
    
    <script type="text/javascript">
    var gb = document.getElementById("gb");
    gb.style.left = (30-gb.offsetWidth).toString() + "px";
    </script>
    
    </div>
  7. Ubah baris ke-5 seperti dengan cara 1 pada step ke-6

Conclusion

Pahami kode berikut

<style type="text/css">
#gb {
	position:fixed;
	top:<-! Masukan jarak dalam satuan px -!>;
	z-index: 1000;
}
* html #gb {
	position:relative;
}
.gbtab {
	margin-top:<-! Masukan jarak dalam satuan px -!>;
	height:110px;
	width:30px;
	float:right;
	cursor:pointer;
	background:url(<!- Masukan url gambar 30x110px -!>) no-repeat top;
}
.gbtab:hover {
	margin-top:<-! Masukan jarak dalam satuan px -!>;
	height:110px;
	width:30px;
	float:right;
	cursor:pointer;
	background:url(<!- Masukan url gambar 30x110px -!>) no-repeat top;
}
.gbcontent {
	float:right;
	border:3px solid #ff8800;
	background:#ffffff;
	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 onclick="showHideGB()"> </div>
<div>

<!- Masukan Code ShoutMix disini -!>

<div style="text-align:left">
<a href="javascript:showHideGB()">[close]</a>
</div>
</div>

<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.left = (30-gb.offsetWidth).toString() + "px";
</script>

</div>

Selamat Mencoba…….🙂

8 thoughts on “Cara Membuat Buku Tamu Melayang Di Blog

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s