Membuat Buku Tamu Melayang

Posted on April 17th, 2010

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 class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">

<!- 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://blog.ddery.com/images/buku-tamu.png dan http://blog.ddery.com/images/buku-tamu-hover.png, maka 
    .gbtab {
	margin-top:150px;
	height:110px;
	width:30px;
	float:right;
	cursor:pointer;
	background:url(http://blog.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://blog.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 class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">

<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 class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">

<!- 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 class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">

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

Source

infotentangblog.blogspot.com

Category: CSS, HTML, JavaScript, Website
36 tanggapan pada “Membuat Buku Tamu Melayang” { + }
  1. AMYunus berkata
    April 17, 2010

    Wah, mantap nih tutorialnya.
    saya suka cara menampilkan source code nya. :D
    hm, cuman baris-baris di atas terlihat seperti tulisan novel yang berisi kode-kode html, css, dan javascript.
    errr… jalan keluarnya? yang baca kudu kursus html, css, dan javasript dulu kali ya biar ngerti :p hehe

    anyway, nice posting. Saya mencari materi tentang ini, dan saya begitu penasaran dengan perbuatan Deddy terhadap shoutmix di samping kiri ini. Eh dipos juga artikelnya. Makasih ya. :D Nanti akan diadopsi di blog saya dengan theme yang baru pula. Semoga terealisasikan di Juni Juli nanti.
    Semangaat!

  2. wilianto berkata
    April 18, 2010

    nice artikel sob…

  3. a-rief berkata
    April 18, 2010

    q c rada2 ngerti soal html, css n mungkin javascript. tp mls mw masang shoutbox. loading blog jd lmbt c

  4. Kurniawan berkata
    April 18, 2010

    Wah menarik.. Kalau buat nampilkan form nama dan email yang melayang ditengah halaman blog gimana mas?? Di blog2 besar yang menawarkan ebook gratis dengan cara mengirmkan nama dan email kan ada. Gimana tuh mas??

  5. fanz berkata
    April 20, 2010

    mantep nihh.. kapan kapan saya coba bro. bookmark dulu yang penting

  6. narsis berkata
    April 20, 2010

    wah menarik sekali tutorialnya, saya tidak percaya dengan umur yang masih muda udah secreative ini, manteps, saya salut.

    terima kasih juga utuk tutorialnya, bermanfaat sekali..

    salam kenal..

  7. hanifilham berkata
    April 26, 2010

    makin maknyus nih… hehe, btw, ane mau tanya, buku tamu itu berat2in saat mau dibuka gak yah? hehe, soalnya buku tamu itu kan juga ngabisin bandwith yg disediakan server hosting kalau ramai. hehe.

    • Dery berkata
      May 2, 2010

      kayaknya berat juga kalo internetnya masih lemot..
      jelas mempengaruhi bandwidth,, lebih baik jangan dipasang kalo bandwidthnya kecil..

  8. rismaka berkata
    May 27, 2010

    Wah mantabs nih tutorialnya. Sekarang tambah jago euy… ga nyangka kalau yg bikin ini anak berusia 14 tahun :D

    • Dery berkata
      May 27, 2010

      biasa aja mas,, ini juga saya ambil dari sumber lain.. disini cuma saya buat tutorialnya, biar gampang dipahami.. hehe.. :D

  9. Jeprie berkata
    May 28, 2010

    Kalau mau yang begini tapi form email bisa juga ya?

    • Dery berkata
      May 28, 2010

      Bisa, tinggal ganti tempat kode shoutmixnya dengan kode form email..

  10. nina berkata
    June 2, 2010

    salam sejahtera

  11. cara cari uang gratis internet | peluang bisnis online berkata
    July 4, 2010

    wah terima kasih atas panduannya, kini saya udah punya shout box yg bisa buka tutup, sekali lagi makasi…mampir yo..

  12. Raz berkata
    July 22, 2010

    Ma kasih atas infonya mas

  13. zhen berkata
    August 7, 2010

    Terima Kasih Banyak . . . Mantabb Sekali Tutorialnya . . . ;)

  14. Krisna berkata
    September 5, 2010

    wow, rapi banget hasilnya, makasih mas dery

  15. Membuat Buku Tamu Melayang « LUCKY.net BLOG berkata
    September 6, 2010

    [...] Membuat Buku Tamu Melayang [...]

  16. BL berkata
    November 11, 2010

    kalo ini di pindah di kiri gimana mas dery.