Senin, November 28, 2011

Cara Membuat Buku Tamu Keren Versi 2


Udah lama nih ngak posting tentang tips blog. Kali ini saya akan memberikan tips cara membuat buku tamu atau lebih tepat nya menyembunyikan cbox. Baik lah tidak usah panjang lebar basa-basi nya. Ikuti langkah-langkah berikut :

1. Login ke blogger.com
2. Pada Dasbor >> Rancangan >> Elemen Laman
3. Klik Tambah Gadget, kemudian pilih bagian HTML/Javascript
4. Copy kode di bawah ini dan paste pada form HTML/Javascript tadi
<style type="text/css">
#at{
position:fixed;
right:450px;
z-index:+1000;
}
* html #at{position:relative;}
.attab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url();
}
.atcontent{
float:left;
border:2px dotted #ff0000;
background:url(http://i51.tinypic.com/rcq4b7.gif) #000000 repeat-y center;
-webkit-border-bottom-right-radius: 25px;
-webkit-border-bottom-left-radius: 25px;
-moz-border-radius-bottomright: 25px;
-moz-border-radius-bottomleft: 25px;
border-bottom-right-radius: 25px;
border-bottom-left-radius: 25px;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideAT(){
var at = document.getElementById("at");
var w = at.offsetWidth;
at.opened ? moveAT(0, -200-w) : moveAT(20-w, 0);
at.opened = !at.opened;
}
function moveAT(x0, xf){
var at = document.getElementById("at");
var dx = Math.abs(x0-xf) > 25 ? 35 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
at.style.top = x.toString() + "px";
if(x0!=xf){setTimeout("moveAT("+x+", "+xf+")", 10);}
}
</script>
<div id="at">
<div class="attab" onclick="showHideAT()"> </div>
<div class="atcontent">
<div align="center">
<div style="background:url() no-repeat;">
Kode Cbox Kamu 
</div>
</div>
<br />
<div align="center"><a href="javascript:void(0);" onclick="showHideAT()"><img border="0" src="http://i1042.photobucket.com/albums/b429/Farix_2010/CloseComment-1.png" alt="close" title="Click here to Close Cbox" /></a></div>
<div align="right"><font size="2"><a href = "http://besttaufiqblog.blogspot.com/2011/11/cara-membuat-buku-tamu-keren-versi-2.html" target=_blank"><div style="color: #fff;">
<span style="font-size: x-small;">:: Get This Widget!! ::</span></div></a></font></div>
</div></div>
<script type="text/javascript">
var at = document.getElementById("at");
at.style.top = (-200-at.offsetWidth).toString() + "px";
</script>
<br/>
<center><a href="javascript:void(0);"onclick="showHideAT()"/><img border="0" src="http://www.leaguelineup.com/tylerlions/images/guestbook1.gif" alt="cbox" title="Click here to open Guest Book" /></a></center>
  • Ganti tulisan berwarna merah dengan kode cbox kamu 

5. Simpan. Kemudian refresh blog kamu

Selamat Mencoba :D

15 komentar:

  1. nice info mas... wah... sgt mmbntu... thanks mas... btw hope you visit n follow back my blog... thanks... :)

    BalasHapus
  2. @koerniawan
    sama2 gan :D terima kasih sudah mampir kesini :-p

    BalasHapus
  3. salam knal gan,, baru pertama nii code cbox na dapet dari mana??
    #gaptek

    BalasHapus
  4. trima kasih tips nya, sangat bermanfaat sekali bagi saya :)

    BalasHapus
  5. @All
    Terima kasih ya buat komentar nya :-p

    BalasHapus
  6. Wuihhh..asyik juga tampilannya tuh bang..izin disedot ya sampe ubun-ubunnya...hahahyyyy

    BalasHapus
  7. wah mantap brp ..... saya suka ..? makasih banyak

    BalasHapus
  8. mantap kawand..
    boleh nich tuk di coba..

    BalasHapus
  9. terimakasiih bantuannya.
    aku pake d blog ku tuh..
    suka bgt..
    kunjungi blog ku juga yaa..
    msh nubie nii . .
    mohon bimbingannya . .
    :)

    BalasHapus
  10. @All
    Thanks ya udah mampir dan berkomentar disini :-p

    BalasHapus
  11. gan tolong share tutorial mbuatb cbox sperti punya agan yg skarang dong kalo sudah beri tahu saya di http:// tutor4-u.blogspot.com :((

    BalasHapus
  12. thank toturial nya sangat bermanfaat.... kunjungi juga blog saya....

    BalasHapus
  13. Wah..thanks mas bro..keren bgt Guest Book'y :)

    BalasHapus

Terima kasih telah membaca artikel. Mohon luangkan waktu sobat untuk memberikan komentar pada artikel ini.