Cara Membuat Buku Tamu Melayang Di Sisi Kanan Blog

Cara Membuat Buku Tamu Melayang Di Sisi Kanan 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. Buku tamu juga dapatmenaikan trafic blog. Jika anda tertarik untuk membuat layanan buku tamu ini, silahkan ikuti langkah berikut:

1. Langkah Pertama  pergi ke Cbox
2. Lalu masuk akun Cbox atau jika belum punya daftar ke Sign Up Cbox
3. Jika Sudah mendaftar Cbox lalu anda disuruh masuk Cbox
4. Setelah sudah masuk edit sendiri Cbox anda sendiri

dan Langkah berikutnya Copy-Paste HTML dibawah 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/AVvXsEiHvTDTNvP_eZhaAgaSfvpXpbj8htDRFn-evci7afJr6vK2rl8St7fSCCHs0MgI74CGNauUksbnBHcqUeZG4iGwDJ9ah-dnRLl-J4QU7bIzZAR0bYlGC02Df8I49KrI0jFnM_lng2WsRlw/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 Pasang Kode Buku Tamu yang sudah di copy tadi Di Sini

<div style="text-align:right">
<a href="http://ekorudianta.blogspot.com/2014/05/cara-membuat-buku-tamu-melayang-di-sisi.html">[buat seperti ini]</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>

Cara menaruh html di atas

1. Masuk akun blogger siapa ajah boleh
2. Ke tata letak
3. Add gadget atau Tambah gadget
4. Edit html/javascript
5. Masukan html di atas
6. Selesai

dan ganti tulisan yang biru dengan html/javascript Cbox/buku tamu yang tadi

Tulisan Buku Tamu di atas bisa anda ganti dengan gambar yang telah saya sediakan di bawah ini :

Gambar 1

http://i387.photobucket.com/albums/oo318/cem_ply/buku-tamu_03.gif

Gambar 2

http://i1178.photobucket.com/albums/x363/rijahum/bukutmu.gif

Gambar 3

http://i1102.photobucket.com/albums/g448/oyex/buku-tamu-1.gif

Gambar 4

http://i1216.photobucket.com/albums/dd378/N3773H/Bukutamu.png

Gambar 5

http://i1176.photobucket.com/albums/x335/b0_0ys/bukutamu4.png

Gambar 6

http://i803.photobucket.com/albums/yy317/rara_mily/buku-tamu.jpg

Gambar 7

http://i1102.photobucket.com/albums/g448/oyex/tamu3.gif

Gambar 8

http://i1176.photobucket.com/albums/x335/b0_0ys/bukutamu5.png

Gambar 9

http://i1184.photobucket.com/albums/z332/agung_tri06/Decorated%20images/cooltext474624793.png

Gambar 10

http://i1134.photobucket.com/albums/m609/bagongteknik/BukuTamuBTScopy.png

Jika anda tertarik untuk mengganti Background Buku Tamu Melayang anda dengan salah satu gambar diatas, anda hanya tinggal mengganti link gambar anda dengan link salah satu gambar diatas. untuk lebih jelasnya anda bisa melihat contoh dibawah ini:

<div style='display:scroll; position:fixed; top:20px; right:0px;'><a href="javascript:void(0);"onclick="showHideAT()"/><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHvTDTNvP_eZhaAgaSfvpXpbj8htDRFn-evci7afJr6vK2rl8St7fSCCHs0MgI74CGNauUksbnBHcqUeZG4iGwDJ9ah-dnRLl-J4QU7bIzZAR0bYlGC02Df8I49KrI0jFnM_lng2WsRlw/s1600/bukutamu.png"  /></a>
</div>

Ganti link yang saya beri tanda warna merah dengan salah satu link gambar diatas tadi.

Sekian posting dari saya tentang Cara Membuat Buku Tamu Melayang Di Sisi Kanan Blog. Mohon Maaf bila ada kesalahan kata, Selamat Mencoba dan Semoga postingan in dapat Bermanfaat bagi anda dan kita semua.

Share

Like

G+

Tweet

Tweet