ABN Share Cara Membuat Buku Tamu
Cara Membuat Buku Tamu Di Blog Sering saya jumpai kalau lagi jalan-jalan (blogwalking) menemukan
widget yang cukup menggelitik menambah penasaran. Ya, Itulah buku tamu
melayang pada sisi kanan atas/bawah. Timbul pertanyaan, Bagaimana cara
membuatnya?....Ah dasar newbie hari gini baru nanyain soal itu, padahal
jauh-jauh hari sudah tidak asing lagi bagi para blogger yang lebih
senior dari pada saya.
Dari
pada terus curhat, lebih baik saya catat cara membuatnya. Btw perlu di
ingat juga semakin menambah widget pada blog kita maka akan bertambah
berat ketika meloadingnya, Ya selain keuntungannya menghemat tempat,
namun ada juga efek negatifnya (itu sudah biasa):
Silahkan anda copy kode di bawah ini..
2. Klik Tambah Gadget / Add a Gadget
3. Pilih HTML/Javascript
4. Copy kode berikut dan paste pada HTML/Javascript tersebut
<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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimNFpPNr4BHa8XOggIF9JXeigj27E_jegjAAmwTPCeIQJ2blKuu19bSORCSkl_qYDkk-1uvaC-Xbx59lNfUN2Ayras2RWUYDKZ33_Cd5YZ2btc2wzqqMVZuJEPoAWZvWtwStsrYLEAJ7CH/') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #A5BD51;
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://www7.cbox.ws/box/?boxid=682400&boxtag=bawf3f&sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain7-682400" style="border:#000000 1px solid;" id="cboxmain7-682400"></iframe></div>
<div><iframe frameborder="0" width="200" height="75" src="http://www7.cbox.ws/box/?boxid=682400&boxtag=bawf3f&sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform7-682400" style="border:#000000 1px solid;border-top:0px" id="cboxform7-682400"></iframe></div>
</div>
<!-- END CBOX -->
<br/>
<div style="text-align:right">
<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>
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimNFpPNr4BHa8XOggIF9JXeigj27E_jegjAAmwTPCeIQJ2blKuu19bSORCSkl_qYDkk-1uvaC-Xbx59lNfUN2Ayras2RWUYDKZ33_Cd5YZ2btc2wzqqMVZuJEPoAWZvWtwStsrYLEAJ7CH/') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #A5BD51;
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://www7.cbox.ws/box/?boxid=682400&boxtag=bawf3f&sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain7-682400" style="border:#000000 1px solid;" id="cboxmain7-682400"></iframe></div>
<div><iframe frameborder="0" width="200" height="75" src="http://www7.cbox.ws/box/?boxid=682400&boxtag=bawf3f&sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform7-682400" style="border:#000000 1px solid;border-top:0px" id="cboxform7-682400"></iframe></div>
</div>
<!-- END CBOX -->
<br/>
Anda berminat buat Buku Tamu seperti ini?<br/>
Klik di
<a href="http://aura-share.blogspot.com/html">
sini </a>
<div style="text-align:right">
<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>
Catatan:
1. Jangan satukan dengan iklan yang melayang karena akan menjadi kacau.
2. Yang diberi tanda berupa huruf yang merah dapat diganti, contohnya buku tamu anda yang shoutbox atau cbox.
3. Klik Save.
Sederhana
alias mudah... Memang tidah serumit ketika harus menambah kolom, mebagi
kolom, membuat kolom ada di kiri dan di kanan bla bla bla... saya
sendiri dibikin rpot kalo udah urusan meracik template.. konsul langsung Chat za,Baik sekian dulu.. Btw info ini
juga hasil dari kombinasi dari beberapa blog hasil pencarian Prof. Dr.
Google, Phd dll hehe
0 Response to "ABN Share Cara Membuat Buku Tamu"
Posting Komentar