Cara membuatnya:
1.Masuk ke account Blogger sobat, pilih " Rancangan"
2.Tambahkan widget baru dengan mengklik "Tambah Gadget" - "HTML/JavaScript"
3.Tidak usah diberi judul, dan copy kode di bawah ini sebagai konten widget sobat:
<style type="text/css">
#gb{position:fixed; top:50px; 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/AVvXsEgmGcP_4ECVpJ6qk5_08P3k6eElsMvwDV0JD87QVX3woBRyEkT6-6TEHMWBsiyYyHLKLn-KOERIvo0xcQhVrYSN4gIvol1ITGZnMtgjX4NpvsJgPxU9LOpYiT2E54C1QCMqpDp9zw6K5Pis/') no-repeat}
.gbcontent{float:left; border:2px solid #A5BD51; background:#F5F5F5; 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.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">
|<a href="javascript:showHideGB()">
[tutup]
</a>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString()+"px";
</script></div>
•Posisi buku tamu dengan kode di atas adalah di bagian kanan atas. Kalau sobat mau menempatkannya di kiri, ubah right jadi left. Dan kalau sobat mau menempatkannya di bawah, ubah top jadi bottom,
•Kalau sobat mau mengganti gambar Tab /Tombolnya, sobat bisa mengganti source warna biru / url gambar di atas dengan gambar yang saya siapkan dibawah ini,
•Dan juga jangan lupa untuk mengganti kode <!-- Taruh kode buku tamu (shoutbox / shoutmix) disini --> dengan kode buku tamu sobat.
•Klik "Save" kalau sudah selesai.
•Dibawah ini adalah gambar Tab / Tombol yang bisa anda gunakan.
1.Masuk ke account Blogger sobat, pilih " Rancangan"
2.Tambahkan widget baru dengan mengklik "Tambah Gadget" - "HTML/JavaScript"
3.Tidak usah diberi judul, dan copy kode di bawah ini sebagai konten widget sobat:
<style type="text/css">
#gb{position:fixed; top:50px; 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/AVvXsEgmGcP_4ECVpJ6qk5_08P3k6eElsMvwDV0JD87QVX3woBRyEkT6-6TEHMWBsiyYyHLKLn-KOERIvo0xcQhVrYSN4gIvol1ITGZnMtgjX4NpvsJgPxU9LOpYiT2E54C1QCMqpDp9zw6K5Pis/') no-repeat}
.gbcontent{float:left; border:2px solid #A5BD51; background:#F5F5F5; 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.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 buku tamu (shoutbox / shoutmix) disini -->
<div style="text-align:right">|<a href="javascript:showHideGB()">
[tutup]
</a>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString()+"px";
</script></div>
•Posisi buku tamu dengan kode di atas adalah di bagian kanan atas. Kalau sobat mau menempatkannya di kiri, ubah right jadi left. Dan kalau sobat mau menempatkannya di bawah, ubah top jadi bottom,
•Kalau sobat mau mengganti gambar Tab /Tombolnya, sobat bisa mengganti source warna biru / url gambar di atas dengan gambar yang saya siapkan dibawah ini,
•Dan juga jangan lupa untuk mengganti kode <!-- Taruh kode buku tamu (shoutbox / shoutmix) disini --> dengan kode buku tamu sobat.
•Klik "Save" kalau sudah selesai.
•Dibawah ini adalah gambar Tab / Tombol yang bisa anda gunakan.
Tidak ada komentar:
Posting Komentar