Wednesday, 8 April 2015

tutorial lengkap membuat buku tamu yang menempel di sebelah kanan blog

Wednesday, April 08, 2015 Posted by Unknown No Comments

Kali ini saya share tentang bagaimana cara pasang buku yang menempel di blog, tapi sebelum itu zobat daftar duluh ke website penyedia layanan Buku Tamu seperti cbox,jika sobat sudah punya langsung aja ke tahap yang selanjutnya . dari pada basa basi langsung aja kita lihat cara membuat buku yang menempel di sebalah kiri pada blog.
kira-kira gambarnya seperti di atas.

1.Masuk dulu ke blog sobat melalui www.blogger.com
2.Setelah muncul jendela dasbor klik desain
3.Klik tambah gadget/html java script
4.copy pastekan kode beikut ini:

#gb{

position:fixed;

top:10px;

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/AVvXsEgCSHz4TSmmVz-8disUt4vl4hlP_BxzC14Y4Ts94Qv_vTANomzMTHs9gGMAePTwGGQOsfMmAHjLM6UcsCTZzksgRolSipOvzM95jUNfdBbXC3tBP3eh85SOrfkG25nPFFDb-RgdG8Jlg1Xt/') no-repeat;

}

.gbcontent{

float:left;

border:2px solid #A5BD51;

background:#F5F5F5;

padding:10px;

}

</style>

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>

<--------------Masukkan kode script buku tamu anda disini-------------->

<div style="text-align: right; font-size: 10px;">
              Widget by
              <a href="http://namawebanda.com">

                  Muhammad Fariz Azri
              </a>
          </div>

[tutup]

</a>

</div>

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

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

</script>

Keterangan :
ganti tulisan yang berwarna merah dengan kode wiget buku tamu anda
kode yang berwarna orange adalah posisi bukutamunya semakin kecil nilai angkanya maka semakin tinggi letak buku tamunya ,sebaliknya semakin besar nilai angkanya maka semakin kebawawah letak buku tamunya
ganti tulisan warna kuning dengan nama web anda.

Note : Mari Klik g+ pada blog ini untuk mencukupi kebutuhan blog ini :D...