Kotak buku tamu kamu nantinya akan tetap seperti tampilan aslinya hanyasaja tersembunyi di balik layar, dan akan di tampilkan kalau tombol atau gambar buku tamunya di klik.
Caran membuatya :
- Loggin ke Blogger
- Pilih Rancangan, tambah Gadget
- Pilih HTML/JavaScript
- Masukan kode script berikut ini:
<style type="text/css">
#gb{
position:fixed;
top:100px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('http://lh4.ggpht.com/_jn57XA2jLxY/SmCHl1YEsxI/AAAAAAAAAXQ/HshHClEVcvY/tabs.png') no-repeat;}
.gbcontent{
float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
padding:2px;
}
</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.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">
TARUH KODE WIDGET SHOUTOXMU DI SINI
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>
Gambar image buku tamu (background:url('http://lh4.ggpht.com/_jn57XA2jLxY/SmCHl1YEsxI/AAAAAAAAAXQ/HshHClEVcvY/tabs.png) bisa di ganti sesuka kamu, masukan saja url gambarnya
lihat contoh image nya
http://1.bp.blogspot.com/_EkuBpiT9zmg/TTZlL6xXwJI/AAAAAAAAAb4/s-Hrqwod-JY/s1600/Buku+Tamu.png
http://3.bp.blogspot.com/_EkuBpiT9zmg/TTZlMhakuoI/AAAAAAAAAb8/AI3q3TU6wAc/s1600/Buku+tamu2.png
http://4.bp.blogspot.com/_EkuBpiT9zmg/TTZlNVCMWhI/AAAAAAAAAcA/Nvdmi_JsIZQ/s1600/buku+tamu3.png
http://1.bp.blogspot.com/_EkuBpiT9zmg/TTZlOJgf29I/AAAAAAAAAcE/iv0i4z9mzac/s1600/buku+tamu4.png
http://2.bp.blogspot.com/_EkuBpiT9zmg/TTZlOz-q0hI/AAAAAAAAAcI/vrX2D6zcbts/s1600/buku+tamu5.png
http://2.bp.blogspot.com/_EkuBpiT9zmg/TTZlPh_CLdI/AAAAAAAAAcM/fCrzK7jotRU/s1600/buku+tamu6.png
http://3.bp.blogspot.com/_EkuBpiT9zmg/TTZlQ1xY4uI/AAAAAAAAAcQ/pCzGg-HUWj4/s1600/buku+tamu7.png
http://3.bp.blogspot.com/_EkuBpiT9zmg/TTZpfl-erkI/AAAAAAAAAcY/iuWMYZFQ1y8/s1600/buku+tamu1.png
http://1.bp.blogspot.com/_EkuBpiT9zmg/TTeXCYKT-NI/AAAAAAAAAco/AAVSnQeLKDU/s1600/Buku+Tamu+8.png
Kita taruh kode yang sudah peroleh dari shoutmix atau cbox ditempatnya (TARUH KODE WIDGET SHOUTOXMU DI SINI). Dan Simpan jika sudah selesai.
Gambar image buku tamu (background:url('http://lh4.ggpht.com/_jn57XA2jLxY/SmCHl1YEsxI/AAAAAAAAAXQ/HshHClEVcvY/tabs.png) bisa di ganti sesuka kamu, masukan saja url gambarnya
lihat contoh image nya
http://1.bp.blogspot.com/_EkuBpiT9zmg/TTZlL6xXwJI/AAAAAAAAAb4/s-Hrqwod-JY/s1600/Buku+Tamu.png
http://3.bp.blogspot.com/_EkuBpiT9zmg/TTZlMhakuoI/AAAAAAAAAb8/AI3q3TU6wAc/s1600/Buku+tamu2.png
http://4.bp.blogspot.com/_EkuBpiT9zmg/TTZlNVCMWhI/AAAAAAAAAcA/Nvdmi_JsIZQ/s1600/buku+tamu3.png
http://1.bp.blogspot.com/_EkuBpiT9zmg/TTZlOJgf29I/AAAAAAAAAcE/iv0i4z9mzac/s1600/buku+tamu4.png
http://2.bp.blogspot.com/_EkuBpiT9zmg/TTZlOz-q0hI/AAAAAAAAAcI/vrX2D6zcbts/s1600/buku+tamu5.png
http://2.bp.blogspot.com/_EkuBpiT9zmg/TTZlPh_CLdI/AAAAAAAAAcM/fCrzK7jotRU/s1600/buku+tamu6.png
http://3.bp.blogspot.com/_EkuBpiT9zmg/TTZlQ1xY4uI/AAAAAAAAAcQ/pCzGg-HUWj4/s1600/buku+tamu7.png
http://3.bp.blogspot.com/_EkuBpiT9zmg/TTZpfl-erkI/AAAAAAAAAcY/iuWMYZFQ1y8/s1600/buku+tamu1.png
http://1.bp.blogspot.com/_EkuBpiT9zmg/TTeXCYKT-NI/AAAAAAAAAco/AAVSnQeLKDU/s1600/Buku+Tamu+8.png
http://3.bp.blogspot.com/_EkuBpiT9zmg/TTpORiTp-DI/AAAAAAAAAeA/U8NpFS882dk/s1600/gustbook02.png
http://4.bp.blogspot.com/_EkuBpiT9zmg/TUj_uWmtl6I/AAAAAAAAAhc/OZEqO6_Q9y8/s1600/buku+tamu9.png
Kita taruh kode yang sudah peroleh dari shoutmix atau cbox ditempatnya (TARUH KODE WIDGET SHOUTOXMU DI SINI). Dan Simpan jika sudah selesai.
Selamat mencoba, semoga berhasil.
0 komentar:
Posting Komentar