Percantik Blog dengan Guest Book
Hai berjumpa lagi dengan saya semoga tidak bosen bosennya hehe
oke kali ini saya akan jelaskan
cara membuat buku tamu/guest book . namun buku tamu atau guest book yang biasa biasa pasti sudah bosen atau enek yah? hehe . tapi kali ini yang akan saya jelaskan adalah guest book yang bisa membuka dan menutup sendiri . untuk live demo bisa lihat di samping kanan atas blog ini sendiri ada tulisan guest book kan? coba silahkan klik .
nah sudah paham ? guest book ini selain mempercantik blog juga membuat blog anda terlihat lebih profesional dan tentunya harus di barengi dengan domain TLD yah. hihi
oke lanjut saja ke tutorial cara pasangnya
pertama-tama
- masuk ke dashboard blogger
- pilih tata letak
- add gadget
- code html/javascript
Kemudian Masukan Script dibawah ini
<style type="text/css">
#gb{
position:fixed;
top:25px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:150px;
width:30px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggMtLDqOzRjNYZccKTjxOID8-IqHANrrc8Kro-6Zt-hPZ-Ywyzz-pIiGFMm64386z5wLkZiF51gGwNmNJ_Y4YyusPmI5Ooh2NlgZ7CBKXwuRhXhSGVvKmp0u38jB9NnQtF9OtcVopX0MY/s1600/GUESTBOOK111.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #1300F2;
background:#A9A9F5;
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">
LETAKAN KODE CBOX ATAU SHOUTMIX ANDA DI SINI
<div style="text-align:right">
<a href="javascript:showHideGB()">
[close]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>
5. Ganti tulisan berwarna biru dengan link gambar guest book anda atau bisa abaikan bila ingin seperti punya saya
6.ganti tulisan warna merah dengan kode html dari
CBOX atau SHOUTMIX untuk blog ini sendiri menggunakan cbox (lebih mudah)
7.setelah selesai tinggal di simpan/save
dan lihatlah guest book kalian sudah tertempel di samping kanan blognah selesai sudah tutorial
cara membuat buku tamu/guest book(tutup-buka) di blog
semoga bermanfaat
Artikel keren lainnya:
This comment has been removed by the author.
ReplyDeleteKeren nih gan kayaknya bisa dipasang di blog ane , jangan lupa kunjungan baliknya :d
ReplyDeleteudh ko bang :d
Delete