Kali ini saya akan berbagi tentang bagaimana cara membuat buku tamu di blogger, tapi pada artikel ini saya akan membahas tutorial cara membuat buku tamu Tersembunyi(Hidden).Buku tamu merupakan salah satu hal yang bisa di bilang tidak wajib untuk berada di blog, namun buku tamu bisa mempercantik blog. Selain itu pengunjung blog bisa dengan mudah menyapa kita sebagai admin atau berinteraksi dengan pengunjung lainnya, walau cuma sebatas say hello, kunjung balik ya gan, mampir gan, kunjungi blog saya juga ya, dsb...!
Buku tamu tersembunyi(hidden) juga baru saya pasang di sidebar blog ini. Sebelumnya saya menggunakan buku tamu yang biasa di sidebar setelah saya perhatikan kok nggak efesien dan nggak enak di lihat, kemudian timbulah niat untuk pasang buku tamu tersembunyi di blog ini setelah berupaya dengan berbagai cara akhirnya berhasil juga, lalu timbul niat untuk berbagi bagaimana cara memasang buku tamu tersembunyi di sidebar blogger.
Wokeyy... ga perlu panjang lebar(malah curhat..!), langsung saja ke topik pembahasan:
Cara Pasang Buku Tamu Tersembunyi Di Sidebar Blogger:
Langkah pertama silakan temen2 buat akun di situs penyedia script buku tamu (cari yang gratisan aja xixixixiii...) bisa juga di www.cbox.ws atau pilih situs yang temen2 suka, ikuti semua petunjuknya lalu ambil script yang sudah di sediakan (kopi kodenya).
Selanjutnya masuk ke akun blogger temen2. Jika sudah login silakan klik Rancangan>Design>Tata Letak(layout)>Klik Tambah Gadget/Add Gadget.
Lalu pilih html/javascript dan silakan paste 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/AVvXsEhPXv8bI7ZTLEVxNmZ0cBSelBERbMH0TJzFK1ujutd5oUTtb58lgkLhzu_VWzZ9f7XFQMzFZuzi-lLzWjejTV0w29ahlC59LVNnz22Y0yX4k0Qh7_2fXlqAjdzg147y1WtGqPp7a4Znb0g/s1600/bukutamu.png') 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">
Silakan delete tulisan ini lalu Paste Kode Buku Tamu yang sudah di kopi tadi
<div style="text-align:right">
<a href="http://meteorfoto.blogspot.com/2011/11/cara-membuat-buku-tamu-tersembunyi.html">[Pasang Ini Juga]</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></div></div>
<div style="text-align:right">
<a href="http://meteorfoto.blogspot.com/2011/11/cara-membuat-buku-tamu-tersembunyi.html">[Pasang Ini Juga]</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></div></div>
Buat teman-teman yang faham bahasa html silahkan di atur sendiri tampilannya sesuai selera, jika sudah selesai jangan lupa di Simpan dan Selesai
semoga membantu..
3 komentar:
bagus"
makasih sekali informasinya sangat membantu untuk yang masih belum memasang, nice share
Saya coba terapkan gan, trims ya. Ditunggu kunjungannya...
Posting Komentar