Kali ini admin teoringeblog bakal nunjukin…gimana sih cara bikin Buku Tamu di blog kita jadi tersembunyi…
tapi tunggu dulu….tersembunyi bukan berarti tidak bisa di buka….tersembunyi di sini maksudnya adalah : hanya menampilkan gambar yang mewakili cbox ataupun shoutbox tersebut…dan semua bagian dari shoutbox atau cbox akan muncul jika kita mengeklik gambar tersebut……
jadi saat kita mengeklik kiri mouse kita di gambar yang menjadi wakil dari cbox ataupun shoutbox itu..maka seluruh bagian dari shoutbox itu bakal muncul secara penuh….nah kalau kita klik lagi untuk yang kedua kali…maka buku tamu itu bakal kembali ke posisinya semula…gimana..paham gak…???
Pastinya paham donk….kan tutorialnya udah aku buat sedetail mungkin……
Nah pasti udah pada penasaran kan…..???
Gimana cara bikinnya….???
Kalau kamu tertarik buat ngerubah penampilan shoutmixmu menjadi lebih keren……ikuti aja tutorial di bawah ini :
masuk ke blog kamu
1. Klik tata letak
2. Klik tambah gadget
3. Klik html/java script
4. Masukkan kode-kode di bawah ini :
<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/AVvXsEhC2RuvaMTeLoYM0gREB1m_K1lihv_f4tpRDH3HD_hGF3colbrAqDdnhTm7jtNNpPzMjguA27COLFeNEt-ZC8KGuaT2N4Ff7iwSU6wWwFoSZXtxzp-K0G_Zm3w9dNGcjqTBd_9Dix1qdffx/') 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">
kode buku tamu kamu
<br/>
[ Click aja disini ]
/><br/>
</a>
<div style="text-align:right">
<a href="javascript:showHideGB()">
[close]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script></div></div>
Keterangan :
• Pada kode di atas, cari kode yang bertuliskan
kode buku tamu kamu
dan ganti kode tersebut dengan kode buku tamu yang telah kamu peroleh dari situsnya,baik itu cbox,shoutbox,shoutmix,oggix, dll
Code
'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhC2RuvaMTeLoYM0gREB1m_K1lihv_f4tpRDH3HD_hGF3colbrAqDdnhTm7jtNNpPzMjguA27COLFeNEt-ZC8KGuaT2N4Ff7iwSU6wWwFoSZXtxzp-K0G_Zm3w9dNGcjqTBd_9Dix1qdffx/
Yang ada di atas……merupakan code dari button standart buku tamu kamu, yang akan tampak dan mewakili buku tamu kamu…..dan ketika butto ini di klik maka semua bagian dari buku tamu kamu akan muncul…karena itu banyak blogger yang merubah ta,pilan buttonnya menjadi menarik…agar para pengunjung tidak malas untuk berkomentar melalui buku tamu kamu…….dan kamu bisa mengantinya dengan gambar semau kamu…dan sesuai kreatifitasmu……namun bagi kamu yang memang gak punya banyak waktu buat bikin button buku tamu yang menarik…atau mungkin emang malas buat bikin….he…he…he…..Tapi gak usah khawatir…seperti biasa…admin teori ngeblog punya solusinya…karena admin teoringeblog juga menyediakan beberapa button yang di jamin keren kalau di jadikan button buku tamu kamu……
Kalau emang kamu pingin lihat…klik aja [ di sini ]
• Ganti code
height:100px;
width:30px;
dengan ukuran button kamu…jika kamu mengunakan button selain button standart, maka kamu cukup menganti code alamat button kamu beserta dengan ukuran tinggi dan lebar dari button kamu
• Kode top:50px; merupakan kode posisi dari buku tamu kamu…kamu bisa menaikkannya lebih atas dengan mengubah angkanya menjadi top:40px; atau top:30px;
Tapi kalau kamu ingin meletakkannya lebih ke bawah…..ganti kode top:50px; menjadi top:60px; atau top:70px;
