Buku Tamu Sliding untuk Blogger

بِسْمِ اﷲِالرَّحْمٰنِ الرَّحِيْم

Tutorial kali ini saya akan membahas tentang Bagaimana cara membuat Buku Tamu Sliding untuk Blogger. Karena tutorial ini saya buat semudah mungkin, jadi saya harap pembaca bisa mengerti apa yang saya bahas dan saya harap mengerti telah apa yang saya maksud. OK kalau begitu kita langsung saja menuju ke TKP

1. Masuk ke akun blogger anda
2. Kemudian Masuk Elemen Laman
3. Klik Tambah Gadget
4. Pilih HTML/Javascript
5. Pada kotak kontent, masukkan kode di bawah ini dan tidak perlu diberi judul

<!-- Mulai Buku Tamu Slide -->
<style type="text/css">
#BTS{
position:fixed;
top:50px; /*jarak dari atas*/
z-index:+1000;
}
* html #BTS{position:relative;}
.BTStab{
height:100px; /*tinggi gambar*/
width:30px; /*lebar gambar*/
float:left;
cursor:pointer;
background:url("http://i766.photobucket.com/albums/xx310/Ikhfar/GB1.png") no-repeat; /*gambar*/
}
.BTScontent{
float:left;
border:2px solid #A5BD51; /*ketebalan dan warna kotak*/
background:#F0F0F0; /*warna latar*/
padding:10px 10px 0px 10px;
}
</style>
<script type="text/javascript">
function showHideBTS(){
var BTS = document.getElementById("BTS");
var w = BTS.offsetWidth;
BTS.opened ? moveBTS(0, 30-w) : moveBTS(20-w, 0);
BTS.opened = !BTS.opened;
}
function moveBTS(x0, xf){
var BTS = document.getElementById("BTS");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
BTS.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveBTS("+x+", "+xf+")", 10);}
}
</script>
<div id="BTS">
<div class="BTStab" onclick="showHideBTS()"></div>
<div class="BTScontent">

Kode Shoutbox atau Buku Tamu

<script type="text/javascript">
var BTS = document.getElementById("BTS");
BTS.style.right = (30-BTS.offsetWidth).toString() + "px";
</script>
<div style="float:left;"><a href="javascript:showHideBTS()"><img src="http://i766.photobucket.com/albums/xx310/Ikhfar/close.gif" title="Tutup" /></a></div>
</div></div>
<!-- Selesai Buku Tamu Slide -->

6. Klik Save

Anda bisa mengganti gambar dengan sesuka hati anda

custom

http://i278.photobucket.com/albums/kk82/yudispa/buku-tamu.png

http://i890.photobucket.com/albums/ac103/triwardhana/buku.png

http://i890.photobucket.com/albums/ac110/arary/buku-tamu_03-1.gif

http://i387.photobucket.com/albums/oo318/cem_ply/tabs2.gif

http://i761.photobucket.com/albums/xx253/edoute/Bukutamufedoce.png

http://i581.photobucket.com/albums/ss252/muhibfaisal/tabs.gif

ٱلۡحَمۡدُ لِلَّهِ رَبِّ ٱلۡعَـٰلَمِينَ

Artikel Terkait