Cara Membuat Buku Tamu Tersembunyi di Blog - Cara memasang buku tamu/guest book tersembunyi di blog atau cara agar buku tamu/guest book bisa tersembunyi di blog.
Buku tamu merupakan tempat untuk menaruh pesan singkat di blog anda
ketika sedang ada yang berkunjung. Membuat buku tamu harus menggunakan
jasa web yang menyediakan layanan buku tamu. Maksud
dari judul tersembunyi disini bukan lah buku tamu yang tidak bisa
dilihat oleh pengujung, tetapi buku tamu ini akan berada di sebelah
artikel blog yang akan terbuka jika ada yang klik gambar buku tamu
tersebut. Langkah ini merupakan salah satu langkah dalam menghemat
tempat di blog kita. Selain itu, untuk menghemat tempat, anda juga
menambahkan tab view di blog Anda. Baca: cara membuat tab view di blog. Jika anda tertarik untuk membuat buku tamu tersembunyi ini, silahkan ikuti langkah berikut:
Sebelum anda membuat buku tamu di blog anda, anda harus memiliki kode buku tamu, anda bisa mendapatkannya di Shoutbox, Cbox, atau Shoutmix. Setelah anda memiliki kode buku tamu tersebut, lanjut ke langkah berikut:
1. Login di blogger dengan ID anda
2. Klik menu Layout
3. Klik Page Elements
4. Klik Add a Page Element
5. Klik ADD TO BLOG pada menu HTML
6.Lalu Copy kode berikut dan Pastekan Pada kotak HTML
2. Klik menu Layout
3. Klik Page Elements
4. Klik Add a Page Element
5. Klik ADD TO BLOG pada menu HTML
6.Lalu Copy kode berikut dan Pastekan Pada kotak HTML
<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/AVvXsEjC1xl8bnHn3e8T0JAjp2MFsez8kobribNidjUroEuaMcGOWD57qbu9jGT_nlBuOf7eOLe13SIsN1dGGwFbF0CLKaef_7tX0sZHc3Ta6LOlRc_kcucfH3VDE1ZFpOuEeiF_-WuGCmXKhi8X/') 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://www5.cbox.ws/box/?boxid=817811&boxtag=shjrks&sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain5-817811" style="border:#ababab 1px solid;" id="cboxmain5-817811"></iframe></div>
<div><iframe frameborder="0" width="200" height="75" src="http://www5.cbox.ws/box/?boxid=817811&boxtag=shjrks&sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform5-817811" style="border:#ababab 1px solid;border-top:0px" id="cboxform5-817811"></iframe></div>
</div>
<!-- END CBOX -->>
<div style="text-align:right">
<a href="http://qohar-cyber12.blogspot.com/2012/11/cara-membuat-buku-tamu-di-blog.html">
[QOHAR BLOG]
</a>|<a href="javascript:showHideGB()">
[tutup]
</a>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script></div>
#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/AVvXsEjC1xl8bnHn3e8T0JAjp2MFsez8kobribNidjUroEuaMcGOWD57qbu9jGT_nlBuOf7eOLe13SIsN1dGGwFbF0CLKaef_7tX0sZHc3Ta6LOlRc_kcucfH3VDE1ZFpOuEeiF_-WuGCmXKhi8X/') 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://www5.cbox.ws/box/?boxid=817811&boxtag=shjrks&sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain5-817811" style="border:#ababab 1px solid;" id="cboxmain5-817811"></iframe></div>
<div><iframe frameborder="0" width="200" height="75" src="http://www5.cbox.ws/box/?boxid=817811&boxtag=shjrks&sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform5-817811" style="border:#ababab 1px solid;border-top:0px" id="cboxform5-817811"></iframe></div>
</div>
<!-- END CBOX -->>
<div style="text-align:right">
<a href="http://qohar-cyber12.blogspot.com/2012/11/cara-membuat-buku-tamu-di-blog.html">
[QOHAR BLOG]
</a>|<a href="javascript:showHideGB()">
[tutup]
</a>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script></div>
Lalu save dan lihat hasilnya
jangan lupa comentnya ya :)
jangan lupa comentnya ya :)
2 comments:
keren dah tutornya mau praktek dlu gan
iya gan :)
Post a Comment
Harap menggunakan komentar yang baik dan di harapkan tidak spaming di blog ini.