Cara Membuat Buku Tamu Melayang Diblog

Cara Membuat Buku Tamu Melayang Diblog
"ala" joko wae lah... (joko abdul khoir)

Cara Membuat Buku Tamu Melayang Diblog - Ini merupakan lanjutan dari tutorial sebelumnya yaitu Cara Membuat Buku Tamu Pada Blog yang mana pada tutorial tersebut membahas tentang bagaimana cara membuat Buku Tamu. Nah selanjutnya kalau sahabat sudah membuat Buku Tamu tersebut kita akan mencoba memodifikasi supaya Buku Tamu yang sudah sahabat buat bisa tampil lebih menarik.

Disini kita akan mencoba  Membuat Buku Tamu Melayang Diblog dengan posisi Buku Tamu berada disamping Blog dan tetap diam walaupun halaman blog di scroll keatas dan kebawah, untuk contohnya yang sudah saya buat sendiri silahkan sahabat lihat DISINI. Oh ea hampir lupa sebelumnya saya juga pernah membahas tentang Cara Membuat Buku Tamu Terbuka Tanpa Diklick, tutorial itu juga sama kelanjutan dari tutorial Cara Membuat Buku Tamu Pada Blog.

Baiklah mari kita mulai Cara Membuat Buku Tamu Melayang Diblog, silahkan sahabat lakukan langkah langkah dibawah ini :

1. Login ke Blogger

2. Pilih Tata Letak

3. Lalu tambahkan Gadget baru atau Widget Baru "Add Gadget"

4. Setelah itu pilih HTML/Javascript

5. Copy kode dibawah ini dan letakan kedalam Widget yang telah sahabat buat.

<style type="text/css">

#gb{

position:fixed;

top:50px;

z-index:+1000;

}

* html #gb{position:relative;}

.gbtab{

height:142px;

width:60px;

float:left;

cursor:pointer;

background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXs_tKAzbgykBiSPDucOAEgS2oGC5vfDug5oT-7skdbE_urm-cun5_pCUMtiwhsHzxzWNHuH2M4wTNh2POsHQmHxzKXdTr38y3Zoe_3zkxeogfoGMLDjDXAfk7ATNLJwI_zyTzjE32gdCi/s1600/Nomor-Cantik.png') no-repeat;

}

.gbcontent{

float:left;

border:2px solid #ff8000;

background:#F5F5F5;

padding:10px;

}

</style>

<script type="text/javascript">

function showHideGB(){

var gb = document.getElementById("gb");

var w = gb.offsetWidth;

gb.opened ? moveGB(0, 60-w) : moveGB(50-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">

MASUKAN KODE BUKU TAMU SAHABAT DISINI

<div style="text-align:right">

<a href="http://www.sundaboy.com/">Media Sharing</a>><a href="javascript:showHideGB()">(BUKA)</a>

</div>

<script type="text/javascript">

var gb = document.getElementById("gb");

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

</script>

Keterangan :

Silahkan sahabat ganti MASUKAN KODE BUKU TAMU SAHABAT DISINI dengan kode Buku Tamu milik sahabat.

Apabila sahabat mengerti kode java script silahkan untuk merubah atau memberi sentuhan lain didalam kode script diatas, tapi dimohon untuk tidak menghapus link yang ada didalamnya.

6. Simpan Template dan lihatlah hasilnya.

Nah itu Tutorial Cara Membuat Buku Tamu Melayang Diblog, semoga dapat bermanfaat. kalau terdapat kode yang salah dimohon untuk memberitahukannya melalui kotak komentar dibawah ini. sekian dan terimakasih, salam hangat dari Sundaboy.

Media Sharing | SundaBoy

Selengkapnya : http://www.sundaboy.com/2012/05/cara-membuat-buku-tamu.html#ixzz1xxLeqKNW 
Copy paste harus menyertakan link sumbernya. terimakasih