Cara membuat Buku tamu melayang di kanan Blog

Cara membuat Buku tamu  melayang di kanan Blog


Muhammad Habibie Siregar

Di postingan ini saya akan berbagi

cara membuat buku tamu melayang di kanan blog

1.Langkah Pertama pergi ke Cbox
2.Lalu masuk akun Cbox atau jika belum punya daftar ke Sign Up Cbox
3.Jika Sudah mendaftar Cbox lalu pemirsa disuruh masuk Cbox
4.Setelah sudah masuk edit sendiri Cbox anda sendiri

dan Langkah berikutnya Copy-Paste HTML dibawah ini



<div class='lof-main-wapper' id='slider'>
<div class='slider-main-outer'>
<ul class='slider-main-wapper'>
<script>
document.write("<script src=\"/feeds/posts/default?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
</script>
</ul>
</div>
<div class='slider-navigator-outer'>
<ul class='slider-navigator'>
<script>
document.write("<script src=\"/feeds/posts/default?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>");
</script>
</ul>
</div>
</div>

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

.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('http://3.bp.blogspot.com/-Dh0oga22xpY/UMQ6QGKJEmI/AAAAAAAAAc8/0e1ao0pm9IE/s1600/cats3.png') no-repeat;
}

.gbcontent{
float:left;
border:2px solid #FF4500;
background:#F5F5F5;
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">
<!-- BEGIN CBOX - www.cbox.ws - v001 -->
<div id="cboxdiv" style="text-align: center; line-height: 0">
<div><iframe frameborder="0" width="200" height="305" src="http://www5.cbox.ws/box/?boxid=872413&amp;boxtag=p8clx2&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain5-872413" style="border:#ababab 1px solid;" id="cboxmain5-872413"></iframe></div>
<div><iframe frameborder="0" width="200" height="75" src="http://www5.cbox.ws/box/?boxid=872413&amp;boxtag=p8clx2&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform5-872413" style="border:#ababab 1px solid;border-top:0px" id="cboxform5-872413"></iframe></div>
</div>
<!-- END CBOX -->
<div style="text-align:right">
<a href="http://muhammadhabibiesiregar.blogspot.com/2014/10/cara-membuat-buku-tamu-melayang-di.html">[get this widget]</a>><a href="javascript:showHideGB()">
[Tutup]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>


Cara menaruh html di atas
      1.Masuk akun blogger siapa ajah boleh
      2.Ke tata letak
      3.Add gadget atau Tambah gadget
      4.Edit html/javascript
      5.Masukan html di atas
      6.Selesai

Mudahkan !!!