Sunday 23 December 2012

Cara Membuat Buku Tamu / Guest book Auto Hide di Blogspot | Guest book atau biasanya disebut dengan Buku tamu di blog tutorial blogger untuk Blogger Pemula. Pada kesempatan yang cuku menyenangkan untuk saling berbagi, setelah posting Cara Membuat Blockquote Postingan Blog kali ini kang zain share Cara Membuat Buku Tamu auto hide di Blogspot, sebelum ketutorialnya terlebih dulu kang zain kasih gambarnya dan terangkan mengenai Auto hide Shuotbox agar sobat tidak bingung. 



Auto hide Shuotbox adalah efek yang akan membuat buku tamu muncul tanpa di klik dan tersembunyi tanpa di klik pula ( di lewati pointer mouse/lewatan pertama muncul lewat lagi nutup ). Ini akan membuat mudah sobat dalam menaruh buku tamu dan ringkas tidak muncul pada urutan di sidebar namun berada disamping blogspot.

Kok lupa��. Ada tambahan lagi,, sobat yang belum mempunyai buku tamu bisa langsung daftar link cbox atau penyedia buku tamu seperti kang zain gunakan. Sobat bisa daftar DI SINI dijamin langsung jadi dan ikuti petunjuknya langkah awal sobat klik sign up setelah masuk isi daftarnya dan setelah selesai langsung log in. setelah itu sobat bisa pilih tampilannya. klo dah dipilih ambil codenya dan ikuti tutorialnya dibawah ini: 


  • Seperti biasa sobat mesti login dulu ke blog sobat
  • Silahkan klik Rancangan
  • Klik elemen laman
  • Klik tambah gadget/add gadget
  • Klik opsi HTML/Javascript
  • Silahkan sobat Copy dan Paste Kode HTML di bawah ini dan jangan lupa di SAVE :

<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://2.bp.blogspot.com/-hp5hb7Z7Gvk/TmzEhhJZRmI/AAAAAAAAGgo/vmECDANflYw/s320/shoutbox.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="200" height="305" src="http://www7.cbox.ws/box/?boxid=688387&amp;boxtag=crh1t1&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain7-688387" style="border:#ababab 1px solid;" id="cboxmain7-688387"></iframe></div>

<div><iframe frameborder="0" width="200" height="75" src="http://www7.cbox.ws/box/?boxid=688387&amp;boxtag=crh1t1&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform7-688387" style="border:#ababab 1px solid;border-top:0px" id="cboxform7-688387"></iframe></div>

</div>

<!-- END CBOX -->
<br />
<div style="text-align:center">
<span style="float:right; color:#000000;">Get this <a target="_blank" href="http://softwaremaniapc.blogspot.com/2012/12/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>


Catatan Penting :
Untuk kode yang berwarna merahsobat ganti dengan kode buku tamu milik sobat. Seperti dalam blog ini menggunakan cbox yang sudah kang zain terangkan diatas.

Sampai disini tutorial Modifikasi Blog dengan judul Cara Membuat Buku Tamu Auto Hide di Blogspot dan tunggu tutorial berikutnya. hehe

0 comments:

Post a Comment