cara membuat llike bok di pojok kanan

Langsung Ini Langkah - Langkahnya :

1. Sigup di CBOX Lalu ambil Scriptnya dan simpan dulu di notepad
2. Jika Sudah Login Blogger
3. Masuk di Dasboard / Layout
4. Add a Gadget / Tambah Gadget
5. Lalu pilih HTML Javasript
6. Masukkan kode Script di bawah ini dan ganti teks yang berwarna Merah dengan script CBOX yang anda dapat tadi.

<style type="text/css">
.barrightfacebook{background:url('http://ardana.googlecode.com/files/siip_fb_cb.png');background-repeat:no-repeat;width:39px;height:159px;position:fixed;right:0px;bottom:6%; z-index:1000;}
.barrightfacebookc{background:url('http://3.bp.blogspot.com/-_IS9ZaRulBw/UfarBbk9o8I/AAAAAAAAEhk/4STYDIQTYEg/s1600/boxfblike.png');background-repeat:no-repeat;width:288px;height:345px;position:fixed;right:0px;bottom:6%; z-index:1100;}
.barcontefacebook{margin:5px 0 0 47px}
</style>
<div class="barrightfacebook" onmouseover="this.className='barrightfacebookc'" onmouseout="this.className='barrightfacebook'">
<div class="barcontefacebook">
<!-- Begin Facebook -->

<div id='fb-root'/> <script> window.fbAsyncInit = function() { FB.init({appId: &#39;your app id&#39;, status: true, cookie: true, xfbml: true}); }; (function() { var e = document.createElement(&#39;script&#39;); e.async = true; e.src = document.location.protocol + &#39;//connect.facebook.net/en_US/all.js&#39;; document.getElementById(&#39;fb-root&#39;).appendChild(e); }()); </script>
<div id='fb-root'/>

<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = &quot;//connect.facebook.net/id_ID/all.js#xfbml=1&quot;;
fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</script>

<fb:like-box header='false' height='335' href='DISINI URL  ANDA' show_faces='true' stream='false' width='288'/>

<!-- End Facebook -->
</fb:like-box></div>
</div></div></div>

Cara Membuat Gambar Berputar Dan Membesar Saat Disentuh Oleh Cursor

1. Seperti biasa sobat harus login dulu di akun blog sobat
2. Pilih rancangan / desing dan klik edit HTML dan lanjutkan
3. Centang "Expand Template Widget" untuk menghindari apabila terjadi kesalahan
4. Sobat cari kode </head>
5. Setelah ketemu sobat copy paste code di bawah ini tepat di atas kode </head>


<style>#denzuaz img{-moz-transition:all .8s ease-in-out;-ms-transition:all .8s ease-in-out;-o-transition:all .8s ease-in-out;-webkit-transition:all .8s ease-in-out;transition:all .8s ease-in-out;}
#denzuaz img:hover{ -o-transform: scale(1.5) rotate(360deg); -moz-transform: scale(1.5) rotate(360deg); -webkit-transform: scale(1.5) rotate(360deg);}</style>

6. dan sobat klik save / simpan template.

Langkah selanjutnya untuk penenpatan gambar dalam postingan.

1. Sobat harus menambahkan kode  <div id="denzuaz"> sebelum URL gambar dan jangan lupa di tutup dengan kode </div> contoh seperti di bawah ini:

<div id="denzuaz">
<a href="http://zuazz.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxfwNI_JXu0USN4C_dCR3nCCnBDE8-QbmUWv3h8Pu9QpBHs_DLt20EpKKY8unamExoE-f6uNDfT2dKJKU7gvj7ULCOI7pr2l_Uqo2XtHFGKl_10UE8eD3ViDJo30_0RwsIZajPd2ilvx8j/s200/naruto+dont+copy.png" /></a></div>

keterangan:
kode berwarna merah adala kode pembuka dan penutup
kode berwarna hijau silakan sobat ganti dengan URL blog Sobat dan URL gambar yang ingin Sobat pasang di dalam postingan.
Setelah semuanya selesai klik Publikasikan dan lihat hasilnya.



 http://zuazz.blogspot.com/2012/04/cara-membuat-gambar-berputar-dan.html

Cara Membuat Iklan Melayang di Footer dengan Tombol Close :

1. Login ke blog anda.
2. Masuk ke bagian Tata Letak / Layout , klik Add a gadget.
3. Pilih HTML / Javascript
4. Kemudian letakkan kode berikut di dalamnya.
 <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'>
</script><br />
<script type='text/javascript'>
$(document).ready(function() {
$('img#closed').click(function(){
$('#btm_banner').hide(90);
});
});
</script>
<style type='text/css'>
div#btm_banner {width: 100%; bottom: 0; left: 0; position: fixed; opacity: 0.9;}
div#btm_banner img{
border:0;
cursor:pointer;
}
</style>
<div style='height: 0px;'></div>
<div align='center' id='btm_banner' style='height: 100px; z-index: 9999;'>
<div style='text-align: right; width: 728px; height: 6px;'>
<img id='closed' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYXiYS2hEZuNEbXIzQovVxeKxs9WUHofwkVMH-uyabEgBQkgUYVafXZbsHRt_0ANJKLW2I9gwi5y7477fZzMq6-CzShFwY3wEK_KU37FQEm9eQm2ZhBGwDvSYWtShypIT2F9EvaTvsoJWV/s1600/close-icon.png'/></div>
<div style='clear: both;'></div>
<p>
<p><center>
Masukan kode script iklan anda di sini
</center></p>
</p>
</div>

5. Save Widget tersebut.


: http://www.mediabloger.com/2013/06/cara-membuat-iklan-melayang-dengan.html#ixzz2aLKD02eq 

Cara Membuat Sudut Blog Terlipat Seperti Menggulung

var jaaspeel = new Object();

jaaspeel.ad_url = escape(tujuan);
jaaspeel.small_path = 'http://www.digie.co.id/peel/small.swf';
jaaspeel.small_image = escape('http://exlorer-amran91.googlecode.com/files/anak-indonezia.png');
jaaspeel.small_width = '100';
jaaspeel.small_height = '100';
jaaspeel.small_params = 'ico=' + jaaspeel.small_image;

jaaspeel.big_path = 'http://www.digie.co.id/peel/large.swf';
jaaspeel.big_image = escape('http://exlorer-amran91.googlecode.com/files/feelhtc.png');
jaaspeel.big_width = '650';
jaaspeel.big_height = '650';
jaaspeel.big_params = 'big=' + jaaspeel.big_image + '&ad_url=' + jaaspeel.ad_url;

function sizeup987(){
 document.getElementById('jcornerBig').style.top = '0px';
 document.getElementById('jcornerSmall').style.top = '-1000px';
}

function sizedown987(){
 document.getElementById("jcornerSmall").style.top = "0px";
 document.getElementById("jcornerBig").style.top = "-1000px";
}

jaaspeel.putObjects = function () {
// <jcornerSmall>
document.write('<div id="jcornerSmall" style="position:absolute;width:'+ jaaspeel.small_width +'px;height:'+ jaaspeel.small_height +'px;z-index:9999;right:0px;top:0px;">');
// object
document.write('<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"');
document.write(' codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0"');
document.write(' id="jcornerSmallObject" width="'+jaaspeel.small_width+'" height="'+jaaspeel.small_height+'">');
// object params
document.write(' <param name="allowScriptAccess" value="always"/> ');
document.write(' <param name="movie" value="'+ jaaspeel.small_path +'?'+ jaaspeel.small_params +'"/>');
document.write(' <param name="wmode" value="transparent" />');
document.write(' <param name="quality" value="high" /> ');
document.write(' <param name="FlashVars" value="'+jaaspeel.small_params+'"/>');
// embed
document.write('<embed src="'+ jaaspeel.small_path + '?' + jaaspeel.small_params +'" name="jcornerSmallObject" wmode="transparent" quality="high" width="'+ jaaspeel.small_width +'" height="'+ jaaspeel.small_height +'" flashvars="'+ jaaspeel.small_params +'" allowscriptaccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>');
document.write('</object></div>');
document.write('</script>');
// </jcornerSmall>
// <jcornerBig>
document.write('<div id="jcornerBig" style="position:absolute;width:'+ jaaspeel.big_width +'px;height:'+ jaaspeel.big_height +'px;z-index:9999;right:0px;top:0px;">');
// object
document.write('<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"');
document.write(' codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0"');
document.write(' id="jcornerBigObject" width="'+ jaaspeel.big_width +'" height="'+ jaaspeel.big_height +'">');
// object params
document.write(' <param name="allowScriptAccess" value="always"/> ');
document.write(' <param name="movie" value="'+ jaaspeel.big_path +'?'+ jaaspeel.big_params +'"/>');
document.write(' <param name="wmode" value="transparent"/>');
document.write(' <param name="quality" value="high" /> ');
document.write(' <param name="FlashVars" value="'+ jaaspeel.big_params +'"/>');
// embed
document.write('<embed src="'+ jaaspeel.big_path + '?' + jaaspeel.big_params +'" id="jcornerBigEmbed" name="jcornerBigObject" wmode="transparent" quality="high" width="'+ jaaspeel.big_width +'" height="'+ jaaspeel.big_height +'" flashvars="'+ jaaspeel.big_params +'" swliveconnect="true" allowscriptaccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>');
document.write('</object></div>');
// </jcornerBig>
setTimeout('document.getElementById("jcornerBig").style.top = "-1000px";',1000);
}
jaaspeel.putObjects();







4. Pastekan pada Notepad kemudian ganti url warna biru dengan url logo yang telah disediakan tadi dan ganti url yang berwarna merah dengan url background yang telah di sediakan tadi
5. Simpan dengan Extensi *.js (namafile.js)
6. Upload file yang telah di tempat hosting atau di google code
7. Setelah upload ambil urlya
contohnya saya upload di google code maka urlnya seperti ini : http://exlorer-amran91.googlecode.com/files/bergulung91.js

8. Copy lagi script berikut ini








<script type='text/javascript'>var tujuan ="ganti dengan url tujuan"</script>
<script src='ganti dengan url ' type='text/javascript'/>






9. Ganti yang text yang berwarna biru dengan url tujuan kemudian ganti text yang berwarna merah dengan url file yang telah di upload tadi maka hasilnya kurang lebih akan seperti ini









<script type='text/javascript'>var tujuan ="https://www.facebook.com/selamat.datang.di.akun.Amran"</script>
<script src='http://exlorer-amran91.googlecode.com/files/bergulung91.js' type='text/javascript'/>






10. Sekarang buka akun bloggger sobat kemudian masu Rancangan ==> Edit HTML
dan pastekan pas di bawah kode <head> kemudian simpan.


http://ryan-rbp.blogspot.com/2012/03/cara-membuat-sudut-blog-terlipat.html

========================================

Untuk lebih jelasnya bagaimana membuat efect melipat dari ujung blog dari blogger ini,sobat bisa lihat gambar berikut,(plototin ya gan :p)

Oke,caranya adalah pertama kali sobat pilih Tata Letak (gb1) lalu pilih tab Edit HTML (gb2)


gb1


gb2

Sesuaikan saja dengan tampilan blog milik sobat (mengingat blogger sekarang memiliki new interface pen-),setelah dari langkah gb2,cari kode ini <head> (Gunakan Ctrl+F) dan letakkan kode dibawah ini tepat dibawah kode <head> tersebut.

<script type="text/javascript">var tujuan ='http://geliat-bisnis.blogspot.com/'</script>
<script src="https://sites.google.com/site/pujiantoroinc/Home/pagepeelpelajaranblog.js" type="text/javascript"></script>

Cara Membuat Buku Tamu Melayang di Sebelah Kiri

Ini screenshot yang ada di blogger saya :

 Langsung Ini Langkah - Langkahnya :

1. Sigup di CBOX Lalu ambil Scriptnya dan simpan dulu di notepad
2. Jika Sudah Login Blogger
3. Masuk di Dasboard / Layout
4. Add a Gadget / Tambah Gadget
5. Lalu pilih HTML Javasript
6. Masukkan kode Script di bawah ini dan ganti teks yang berwarna Merah dengan script CBOX yang anda dapat tadi.

<style>
#hcl {
position:fixed;
top:40px;
left:0px;
z-index:+1000;
}
* html #hcl {position:relative;}
.hcltab {
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfRVoLl2ZfIZbCIhld37AAPpUFxNcrhflnPnp113tfkm1qaTG-GGPrILTnetBawgnUcvE1rt7h96SZB_17Tj-GMZ6OTr9LAu-K1CBronngSCVAeqqdRJivcj08rvzBLHGKDJoEnQrhQak/s1600/Chatbox_left.png') no-repeat;
}
.hclcontent {
float:left;
border:2px solid #23aae2;
background:#f3f6f7;
padding:10px;
}
.hc-credit {font-size:9px}
.hc-credit a {text-decoration:none}
</style>
<script type="text/javascript">
function showHidehcl(){
var hcl = document.getElementById("hcl");
var w = hcl.offsetWidth;
hcl.opened ? movehcl(0, 30-w) : movehcl(20-w, 0);
hcl.opened = !hcl.opened;
}
function movehcl(x0, xf){
var hcl = document.getElementById("hcl");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
hcl.style.left = x.toString() + "px";
if(x0!=xf){setTimeout("movehcl("+x+", "+xf+")", 10);}
}
</script>
<div id="hcl">
<div class="hclcontent">

<<Maukkan Disini Kode Script CBOX yang sudah di simpan tadi>>


<br />
<div class="hc-credit">
<span style="float:left">
<!-- THIS CREDIT MUST STAY INTACT FOR LEGAL USE -->
<a href="http://alimaghfur.blogspot.com/" target="_blank">
Get this widget!
</a>
</span>
<span style="float:right">
<a href="javascript:showHidehcl()">
[close]
</a>
</span>
</div>
</div>
<div class="hcltab" onclick="showHidehcl()"> </div>
</div>
<script type="text/javascript">
var hcl = document.getElementById("hcl");
hcl.style.left = (30-hcl.offsetWidth).toString() + "px";</script>

• Lalu save dan Preview Hasilnya

 http://alimaghfur.blogspot.com/2013/05/cara-membuat-buku-tamu-melayang-di.html

Widget Jejaring Sosial Melayang Diblog

Ini adalah widget yang memiliki delapan platform Jejaring Sosial paling populer yang muncul dalam bentuk sebuah Bar. Melayang di sepanjang screen blog. Setiap kali pengunjung akan memilih ke atas atau bawah halaman blog anda, widget ini melayang dengan sendirinya.Perhatikan screenshot berikut:
Langkah : 
Buka akun Blogger Anda 
Masuk ke menu edit HTML 
Cari kode </body> 

Kemudian pastekan kode berikut di atas kode</body> :

<!-- import Scripts -->
<script type="text/javascript" src="http://mybloggerlab.com/Scripts/jquery-1.7.1.min.js"></script> 
<script type="text/javascript" src="http://mybloggerlab.com/Scripts/mblsocialbar.js"></script>
<div id="scolder">
<script type="text/javascript" src=" http://mbl-flipper-google-blogger.googlecode.com/files/socialflipmin.js"></script></div>   
<link href='http://mybloggerlab.com/StyleSheet/mblsocialbar.css' rel='stylesheet' type='text/css'/>

<!-- MBL Social Media Bar For Blogger --> 
<script type="text/javascript">
$(document).ready(function(){
$.mblSocialBar({
items: {
twitter: { url: '#', text: 'Follow me on twitter' },
facebook: { url: '#', text: 'Profile on facebook' },
rss: { url: '#', text: 'RSS Feed' },
google: { url: '#', text: 'Profile on google+' },
youtube: { url: '#', text: 'Profile on youtube' },
orkut: { url: '#', text: 'Profile on orkut' },
myspace: { url: '#', text: 'Profile on myspace' },
digg: { url: '#', text: 'Profile on digg' },
  
},

show: 8,
position: "left",
skin: "clear"
});
  
});
</script>

Keterangan :
Menambahkan URL : Ganti # dengan URL yang Anda inginkan. 
Perubahan posisi : Dalam rangka untuk mengubah posisi widget ganti position: "left" dengan posisi yang Anda inginkan. Bisa "right (kanan), top (atas), bottom (bawah)" 
Mengurangi tampilan media social : Anda bisa mengubah show: 8 dengan jumlah social media yang Anda inginkan. 
Perubahan background : Anda bisa mengubah backgound social media ini dengan warna gelap dengan mengubah skin: "clear" dengan "dark". 

Kemudian save template dan lihat hasilnya.. 

Description: Widget Jejaring Sosial Melayang Diblog Rating: 4.5 Reviewer: Rama Banten RB. Item Reviewed: Widget Jejaring Sosial Melayang Diblog

 http://www.ramabanten.us/2013/02/widget-jejaring-sosial-melayang-diblog.html

Cara Lengkap Memasang Buku Tamu / CBOX Di Blog: Kiri, Kanan, Bawah, Atas

den zuaz | 01.29 | 43comments

Cbox atau lebih dikenal sebagai buku tamu merupakan hal yang tidak asing lagi di dunia blogger, sudah banyak tutorial-tutorial yang membahas tentang cara pemasangan Cbox, baik dengan cara standar maupun dengan cara pengubahan kode CSS.

Kali ini saya akan memposting cara memasang Cbox  auto hiden dari segala arah, segala arah maksudnya yaitu Cbox dapat ditempatkan atau muncul dari bagian sebelah kiri blog, kanan blog, bawah blog, dan atas blog, dan disertakan juga animasi gambar gif sebagai background.

Saya kira cukup sekian bla bla bla penerangan saya, dan mari kita menuju kepokok pembahasan.

Berikut ini adalah Cara Lengkap Memasang Buku Tamu / CBOX Di Blog: Kiri, Kanan, Bawah, Atas: 

1. Seperti biasa sobat harus Login dulu di akun blog sobat
2. Pilih Tata Letak
3. Tambah Gadget HTML/Java Script
4. Selanjutnya copy paste kode script di bawah ini dan masukan ke dalam Gadget HTML/Java Script.

Klik show untuk melihat 

<style type="text/css">
#at{
position:fixed;
right:35%;
z-index:+1000;
}
* html #at{position:relative;}
.attab{
height:0px;
width:0px;
float:top;
cursor:pointer;
background:url(url);
}
.atcontent{
float:left;
border:2px solid #fff;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpB4tBFJdvYVUGgmEUERVvQGBCk_-gD5n09mKMVImmjE_d-0WGRKe9lkkm2ETAZiwrdtoifHqIi37zMFm1K2jvVUfzX_VYs4Nyz6RwEjxmelPkbyo-4aO020AdV7OtgY1GtThs9LCWVNar/)#000000 repeat-x bottom center scroll;
-moz-border-radius:10px;
padding:10px;
}
.atcontent:hover{
border:2px solid #fff;
background:url(http://petir-project.googlecode.com/files/zuaz-petir.gif)#000000 repeat-x bottom center scroll;
}
</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.bottom = 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(http://i53.tinypic.com/oiu4n9.gif) no-repeat;">

Strip kode cbox sobat

</div>
</div>
<br />
<div align="right"><a href="javascript:void(0);" onclick="showHideAT()"><img border="0" src="http://i859.photobucket.com/albums/ab159/yudhizh/ButtonCloseWhite-BlackStroke.png" alt="close" title="Tutup Cbox" /></a></div>
</div></div>

<script type="text/javascript">
var at = document.getElementById("at");
at.style.bottom = (-200-at.offsetWidth).toString() + "px";
</script>

Klik save / simpan.

Keterangan:

1. Kode warna merah adalah warna gambar, silakan sobat sesuaikan sendiri sesuai selera bila ingin mengganti gambarnya
2. Kode warna kuning adalah penepatan dimana cbox akan muncul, bila sobat ingin cbox muncul dari atas ganti kode tersebut menjadi TOP, dari sebelah kiri LEFT, dari sebelah kanan RIGHT .
3. Kode warna putih adalah jarak cbox dari sebelah kanan. Silakan sobat sesuaikan sendiri.
4. Texts berwarna hijau adala tempat untuk menaruh strip kode cbox sobat (atur cbox sobat agar backgroudnya transparant untuk hasil yang lebih sempurna).

Selanjutnya adalah cara membuat tombol cbox (tombol untuk menampilkan cbox)

1. Tetap login di akun blog sobat
2. Masukan script berikut bersamaan dengan script di atas dalam gadget HTML / Java Script

<div style="position: fixed; top: 55px; right: 5px;width:30px;height:100px;"><a href="javascript:void(0);"onclick="showHideAT()"/><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwyAP_1kmao-5QSxMaSfB4lctYeJVFj4tLu6e3_JDiRHFl-Ck7hq4Pzzu0e-Ta0PKQR2SelWnroBKNpcfmtsJHoMAldG0aRfvjQh8XaFSoOuJdgBvEghyphenhyphenrF_LLZgMqjv2wqC8GdQtusWZo/s128/guestbook.png" alt="cbox" title="Buka Chat Book"/></a></div>

Keterangan: 

• Kode berwarna merah adalah gambar tombol, bisa sobat ubah sesuai selera.
• Kode warna kuning adalah dimana tombol akan ditempatkan, TOP untuk menempatkan tombol di atas,BOTTOM untuk menempatkan tombol di bawah, LEFT untuk menempatkan tombol di sebelah kanan.
• Kode warna biru anda sesuaikan jarak tombol TOP dari atas blog, BOTOM dari bawah blog.

Demikianlah Cara Lengkap Memasang Buku Tamu / CBOX Di Blog: Kiri, Kanan, Bawah, Atas. Semoga bermanfaat bagi sobat semua.


 http://zuazz.blogspot.com/2012/04/cara-lengkap-memasang-buku-tamu-cbox-di.html

Cara Membuat Buku Tamu Auto Hide di Blog

Cara Membuat Buku Tamu / Guestbook Auto Hide di Blog- Apa kabar sobat blogger??? Pertama - tama saya memohon maaf atas komentar - komentar sobat blogger yang belum sempat saya balas sebelumnya, karena hidungku ( mampet ), aktivitas blogging ku terhenti hampir seminggu. Setelah sebelumnya memposting artikel cara memasang artikel acak di blog, kali ini dengan hidung yang masih cenat - cenut saya akan menjawab permintaan dari salah satu sobat blogger yang meminta cara membuat buku tamu auto hide di blogseperti yang tampak di sidebar blog ini.

Auto hide Shuotbox adalah efek yang akan membuat buku tamu muncul tanpa di klik dan tersembunyi tanpa di klik pula ( di lewati pointer mouse ), hanya beda sedikit dengan buku tamu show / hide. Sobat yang tertarik memasang widget ini, silahkan masukkan kode berikut diHTML/Javascript blog sobat.

<style type="text/css">
#gb{
position:fixed;
top:20px;
z-index:+1000;
}* html #gb{position:relative;}

.gbtab{
height:150px;
width:50px;
float:left;
background:url('http://i1108.photobucket.com/albums/h405/christian410/ghtrf.png') no-repeat;
}

.gbcontent {
float:left;
border:1px solid #000000;
-moz-border-radius-bottomleft:5px;
-webkit-border-radius-bottomleft:5px;
-o-border-radius-bottomleft:5px;
-khtml-border-radius-bottomleft:5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-topleft: 5px;
background: #F2F2F2; url() no-repeat bottom;
padding:10px;
}

</style>

<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 51-w) : moveGB(30-w, 0);
gb.opened = !gb.opened;
}function moveGB(x0, xf){

var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 25 ? 25 : 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+")", 5);}
}</script>

<div id="gb">
<div class="gbtab" onmouseover="showHideGB()"> </div>

<div class="gbcontent">
<center>

<!-- BEGIN CBOX - www.cbox.ws - v001 -->

<div id="cboxdiv" style="text-align: center; line-height: 0">

<div><iframe frameborder="0" width="300" height="275" src="http://www4.cbox.ws/box/?boxid=4100717&amp;boxtag=ebc39c&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain4-4100717" style="border:#FFFFFF 1px solid;" id="cboxmain4-4100717"></iframe></div>

<div><iframe frameborder="0" width="300" height="75" src="http://www4.cbox.ws/box/?boxid=4100717&amp;boxtag=ebc39c&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform4-4100717" style="border:#FFFFFF 1px solid;border-top:0px" id="cboxform4-4100717"></iframe></div>

</div>

<!-- END CBOX -->

<br />
<div style="text-align:center">
<span style="float:right; color:#000000;">Get this <a target="_blank"href="http://christiantatelu.blogspot.com/2012/03/cara-membuat-buku-tamu-auto-hide-di.html"> widget! </a></span>
</div>
</center></div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (50-gb.offsetWidth).toString() + "px";
</script>

</div>
 

Caranya :

1. Klik rancangan --> Elemen laman --> Tambah gadget --> HTML/Javascript
2. Masukkan kodenya di kotak yang di sediakan.
3. Klik Save 

Tambahan :
Ganti kode yang berwara biru dengan kode buku tamu milik sobat. Sobat yang belum punya buku tamu silahkan buat terlebih dahulu di cbox ( seperti blog ini) , fibox, shoutchamp atau pada penyedia chatbox gratisan lainnya.

 

 

 

 http://christiantatelu.blogspot.com/2012/03/cara-membuat-buku-tamu-auto-hide-di.html