Ahkabahaq - Crus: Cara Membuat Buku Tamu Unik di Blog

Sunday, 24 March 2013

Cara Membuat Buku Tamu Unik di Blog

Cara membuat buku tamu unik di Blog - Buku tamu sendiri bertujuan agar visitor dapat meninggalkan jejak mereka dengan mengisi buku tamu tersebut, apakah mereka Blogger lain yang hendak blogwalking atau pun hanya visitor biasa. Kebanyak Blog menyediakan cara membuat buku tamu floating dan auto hide. Namun postingan ane kali ini berbeda... Pagi kali ini ane akan membagi tips bagaimana cara membuat buku tamu unik di blog. Contoh buku tamunya seperti buku tamu di blog ane ini. Nah langsung aja ke TKP!

Bila sobat belum punya kode buku tamu, silahkan bikin di sini
Setelah jadi, simpan kode buku tamu sobat di notepad.
Login ke dashboard Blog sobat.
Klik Tata letak > Add Gadget > HTML/JavaScript.
Kemudian copas seluruh kode dibawah ini kemudian taruh di gadget HTML/JavaScript.

<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:4px dotted #ff0000;
background: #FFFF00 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><br />
<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><br />
<div id="at">
<div class="attab" 
onclick="showHideAT()">
</div>
<div 
class="atcontent">
<div align="center">
<div 
style="background:url() no-repeat;">
<img border="0" 
src="http://img269.imageshack.us/img269/3672/cooltext686262557.png" 
/><br />
<br />
KODE BUKU TAMU SOBAT<br />
<br />
</div>
</div>
<br /><br />
<div align="center">
<a href="javascript:void(0);" 
onclick="showHideAT()"><br />
<img 
src="http://img215.imageshack.us/img215/6106/cooltext695583622.png" 
onmouseover="this.src='http://img845.imageshack.us/img845/5986/cooltext695583622mouseo.png';"
 
onmouseout="this.src='http://img215.imageshack.us/img215/6106/cooltext695583622.png';"
 /></a></div>
</div>
</div>
<script 
type="text/javascript">
var at = document.getElementById("at");
at.style.top = (-200-at.offsetWidth).toString() + "px";
</script><br />
<br/><br />
<center>
<a 
href="javascript:void(0);"onclick="showHideAT()"/><img 
src="http://img339.imageshack.us/img339/4964/cooltext695568133.png" 
onmouseover="this.src='http://img42.imageshack.us/img42/9006/cooltext695568133mouseo.png';"
 
onmouseout="this.src='http://img339.imageshack.us/img339/4964/cooltext695568133.png';"
 /></a> </center>

Ganti tulisan KODE BUKU TAMU SOBAT dengan kode buku tamu yang udah sobat simpan tadi.
Klik save, selesai deh...

Demikian postingan saya kali ini, apabila ada ketidak jelasan silahkan mengadukannya lewat komentar. Terima kasih atas kunjungan sobat...

1 comment:

rumahkita.net26 January 2015 at 00:47
wah keren .. ga kaya buku tamu saya yg usang, hufftt .. maklumlah newbie, hehe
ReplyDelete
Replies