Cara Membuat Buku Tamu Buka Tutup di Sisi Browser


He he he, agak lucu ya. Ketika mau posting artikel ini saya gak bingung mau memberi judul artikel. Karena nama dari topik artikel ini saya lupa namanya ( pelupa banget sich ). Jika anda membuka blog saya tentang berita seru dan unik dan tentang Blog Bisnis Online, maka di samping kanan browser anda, akan ditemukan sebuah banner kecil bertuliskan SHOUT BOX. Kalau anda klik banner tersebut maka akan bergeser dan terbuka Buku Tamu. Anda bisa menuliskan uneg-unge anda di sini. Kalau diklik lagi maka akan menutup kembali seperti semula. Kayak pintu mobil yang bergeser otomatis untuk membuka dan menutup. Makanya saya beri nama Buku Tamu Buka Tutup di Sisi Browser. He he he. Bingung amat sich. Kalau menurut saya keren banget. Bahkan ada sebagian blogger yang membuat variasi dengan tampilan buku tamu yang miring-miring kayak menara visa. Tapi dalam contoh saya berikan yang seperti di bawah ini :

Bagaimana cara membuatnya?
Gampang banget. Tapi maaf tutorial blog kali khusus pemilik blog blogsot. Untuk blog WordPress seperti muktiblog ini saya coba tidak bisa. Malah kacau.
1. Login ke blogger.com
2. Klik Design atau Rancangan
3. Lalu klik Tambah Gadget
4. Pilih HTML/Javascript
5. Masukkan kode di bawah ini di area HTML/Java Script.
6. Jangan lupa masukkan kode Buku Tamu anda di tempat yang bertuliskan Kode Buku Tamu anda di sini. Ganti dengan kode buku tamu anda
Ini kodenya :
<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/AVvXsEikugJvO7KU3NdIkPzKcQCdT4jwIRLpeZZswg1n_AxPJ20l9yZTX4_ewu5kere7985WYgpCcCFPkKAS7yhwHllsig1NRZHiiTB7VlM6beailJlQL1q8HmzEte55MUPKLm7cRlvZiB4LLabF/s320/tabs.png’) no-repeat;
}
.gbcontent{
float:left;
border:2px solid #666666;
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 onclick=”showHideGB()”> </div>
<div>
—-Kode Buku Tamu anda di sini—–
<div style=”text-align:right”>
<a href=”javascript:showHideGB()”>
[close/tutup]
</a>
</div>
</div>
</div>
<script type=”text/javascript”>
var gb = document.getElementById(“gb”);
gb.style.right = (30-gb.offsetWidth).toString() + “px”;
</script>
7. Terakhir klik Save atau Simpan. Lihat hasilnya.
Demikian saja artikel tentang Cara Membuat Buku Tamu Buka Tutup di Sisi Browser. Semoga sangat manfaat ya dan anda bisa puas dengan tampilan buku anda yang baru

Label:

Cara Membuat Buku Tamu Buka Tutup di Sisi Browser


He he he, agak lucu ya. Ketika mau posting artikel ini saya gak bingung mau memberi judul artikel. Karena nama dari topik artikel ini saya lupa namanya ( pelupa banget sich ). Jika anda membuka blog saya tentang berita seru dan unik dan tentang Blog Bisnis Online, maka di samping kanan browser anda, akan ditemukan sebuah banner kecil bertuliskan SHOUT BOX. Kalau anda klik banner tersebut maka akan bergeser dan terbuka Buku Tamu. Anda bisa menuliskan uneg-unge anda di sini. Kalau diklik lagi maka akan menutup kembali seperti semula. Kayak pintu mobil yang bergeser otomatis untuk membuka dan menutup. Makanya saya beri nama Buku Tamu Buka Tutup di Sisi Browser. He he he. Bingung amat sich. Kalau menurut saya keren banget. Bahkan ada sebagian blogger yang membuat variasi dengan tampilan buku tamu yang miring-miring kayak menara visa. Tapi dalam contoh saya berikan yang seperti di bawah ini :
Bagaimana cara membuatnya?
Gampang banget. Tapi maaf tutorial blog kali khusus pemilik blog blogsot. Untuk blog WordPress seperti muktiblog ini saya coba tidak bisa. Malah kacau.
1. Login ke blogger.com
2. Klik Design atau Rancangan
3. Lalu klik Tambah Gadget
4. Pilih HTML/Javascript
5. Masukkan kode di bawah ini di area HTML/Java Script.
6. Jangan lupa masukkan kode Buku Tamu anda di tempat yang bertuliskan Kode Buku Tamu anda di sini. Ganti dengan kode buku tamu anda
Ini kodenya :
<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/AVvXsEikugJvO7KU3NdIkPzKcQCdT4jwIRLpeZZswg1n_AxPJ20l9yZTX4_ewu5kere7985WYgpCcCFPkKAS7yhwHllsig1NRZHiiTB7VlM6beailJlQL1q8HmzEte55MUPKLm7cRlvZiB4LLabF/s320/tabs.png’) no-repeat;
}
.gbcontent{
float:left;
border:2px solid #666666;
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 onclick=”showHideGB()”> </div>
<div>
—-Kode Buku Tamu anda di sini—–
<div style=”text-align:right”>
<a href=”javascript:showHideGB()”>
[close/tutup]
</a>
</div>
</div>
</div>
<script type=”text/javascript”>
var gb = document.getElementById(“gb”);
gb.style.right = (30-gb.offsetWidth).toString() + “px”;
</script>
7. Terakhir klik Save atau Simpan. Lihat hasilnya.
Demikian saja artikel tentang Cara Membuat Buku Tamu Buka Tutup di Sisi Browser. Semoga sangat manfaat ya dan anda bisa puas dengan tampilan buku anda yang baru
Template by : kendhin x-template.blogspot.com