Halo sahabat otowebsite? kali ini blog ini akan update postingan/articles tentang Cara Memasang Buku Tamu Hide Show Kanan/Kiri pada blog sobat.
Sobat semua pasti udah pada punya akun buku tamu kan? seperti cbox atau shoutmix??? kalo diem saya anggap sobat udah pada punya, karna dalam blog ini tidak menjelaskan cara membuat akunnya karna kelihtannya sobat pasti sudah pada punya semua. Dan bagi sobat yang ingin membuat buku tamunya hide show di kanan atau kiri blog sobat sobat hanya tinggal menambahkan kode script berikut ke dalam wiget blog sobat.
contoh tampilan buku tamu hide show



Oke dah sekarang kita lansung aja tentang cara pemasangannya:
1.Masuk ke akun blogger sobat.
2.Pada tab menu pilih Rancangan ➨ Tambah Gadget ➨ Pilih HTML/Java Script.
3.Pada Gadget HTML Java Scrip masukkan salah satu kode scrip berikut( kotak HTML/Java Scrip tidak usah di beri judul)

Left Hidden Guest Book.
<!-- left hidden guestbook by www.otowebsite.blogspot.com/ START -->
<style>
#hcl {
position:fixed;top:100px;
left:0px;
z-index:+1000;
}
* html #hcl {position:relative;}
.hcltab {height:100px;width:30px;
float:left;
cursor:pointer;
background:url(' http://i1263.photobucket.com/albums/ii623/dek_rif/Icon/th_bukutamu55.png ') no-repeat;
}
.hclcontent {
float:left;
border:2px solid #790909;
background:#f3f6f7;
padding:10px;
}
.hc-credit {font-size:9px}
.hc-credit a {text-decoration:none}
</style>
<script type="text/javascript">
function showHidehcl(){
var hcl = document.getElementById("hcl");
var w = hcl.offsetWidth;
hcl.opened ? movehcl(0, 30-w) : movehcl(20-w, 0);
hcl.opened = !hcl.opened;
}
function movehcl(x0, xf){
var hcl = document.getElementById("hcl");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
hcl.style.left = x.toString() + "px";
if(x0!=xf){setTimeout("movehcl("+x+", "+xf+")", 10);}
}
</script>
<div id="hcl">
<div class="hclcontent">

LETAKKAN KODE BUKU TAMUMU DISINI

<br />
<div class="hc-credit">
<span style="float:left">
<!-- THIS CREDIT MUST STAY INTACT FOR LEGAL USE -->
<span style="font-size: 100%;">
<span style="color: red;"> Get this</span>
<a href="http://otowebsite.blogspot.com/2012/05/cara-memasang-buku-tamu-hide-show.html" target="_blank">
<span class="Apple-style-span" style="color: orange;"> Desaign</span>
<span style="float:right">
<a href="javascript:showHidehcl()">
[close]
</a>
</span>
</div>
</div>
<div class="hcltab" onclick="showHidehcl()"> </div>
</div>
<script type="text/javascript">
var hcl = document.getElementById("hcl");
hcl.style.left = (30-hcl.offsetWidth).toString() + "px";
</script>
<!-- left hidden guestbook by www.otowebsite.blogspot.com/ END -->

Right Hidden Guest Book

<!-- right hidden chatbox by www.otowebsite.blogspot.com/ START -->
<style>
#hcr {
position:fixed;top:100px;
z-index:+1000;
}
* html #hcr {position:relative;}
.hcrtab {height:100px;width:30px;
float:left;
cursor:pointer;
background:url(' http://i1263.photobucket.com/albums/ii623/dek_rif/Icon/th_buku-tamumu.png ') no-repeat;
}
.hcrcontent {
float:left;
border:2px solid #003e82;
background:#f3f6f7;
padding:10px;
}
.hc-credit {font-size:9px}
.hc-credit a {text-decoration:none}
</style>
<script type="text/javascript">
function showHidehcr(){
var hcr = document.getElementById("hcr");
var w = hcr.offsetWidth;
hcr.opened ? movehcr(0, 30-w) : movehcr(20-w, 0);
hcr.opened = !hcr.opened;
}
function movehcr(x0, xf){
var hcr = document.getElementById("hcr");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
hcr.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("movehcr("+x+", "+xf+")", 10);}
}
</script>
<div id="hcr">
<div class="hcrtab" onclick="showHidehcr()"> </div>
<div class="hcrcontent">

LETAKKAN KODE BUKU TAMUMU DISINI

<br />
<div class="hc-credit">
<span style="float:left">
<!-- THIS CREDIT MUST STAY INTACT FOR LEGAL USE -->
<span style="font-size: 100%;">
<span style="color: red;"> Get this</span>
<a href="http://otowebsite.blogspot.com/2012/05/cara-memasang-buku-tamu-hide-show.html" target="_blank">
<span class="Apple-style-span" style="color: orange;"> Desaign</span>
<span style="float:right">
<a href="javascript:showHidehcr()">
[close]
</a>
</span>
</div>
</div>
</div>
<script type="text/javascript">
var hcr = document.getElementById("hcr");
hcr.style.right = (30-hcr.offsetWidth).toString() + "px";
</script>
<!-- right hidden chatbox by www.otowebsite.blogspot.com/ END -->

4.Simpan dan lihat hasilnya.

Keterangan:
  1. top:100px adalah keterangan jarak icon hidden chatbox dari atas (top) sejauh 100 px.
  2. height:100px adalah tinggi (height) tampilan icon hidden chatbox yang sebesar 100 px.
  3. width:30px adalah lebar (width) tampilan icon hidden chatbox yang sebesar 30 px.
  4. background:url(' http://i1263.photobucket.com/albums/ii623/dek_rif/Icon/th_bukutamu55.png ') no-repeat adalah icon hidden chatbox yang akan berguna untuk menampilkan chatbox yang disembunyikan.
  5. LETAKKAN KODE BUKU TAMUMU DISINI, ganti dengan kode buku tamu sobat seperti cbox atau southmix
  6. border:2px solid #003e82 adalah warna (solid) dan ukuran border yaitu #003e82 dan border sebesar 2 px.
  7. background:#f3f6f7 adalah warna background pada chatboxsaat ditampilkan.
Berikut ini adalah beberapa icon dan url icon hidden chatbox atau buku tamu yang saya siapkan untuk sobat yang bisa sobat gunakan.


http://i1263.photobucket.com/albums/ii623/dek_rif/Icon/th_buku-tamumu.png



http://i1263.photobucket.com/albums/ii623/dek_rif/Icon/th_bukutamu5.png



http://i1263.photobucket.com/albums/ii623/dek_rif/Icon/th_bukutamu1.png



http://i1263.photobucket.com/albums/ii623/dek_rif/Icon/th_bukutamu4.png



http://i1263.photobucket.com/albums/ii623/dek_rif/Icon/th_bukutamu3.png



http://i1263.photobucket.com/albums/ii623/dek_rif/Icon/th_bukutamu2.png



http://i1263.photobucket.com/albums/ii623/dek_rif/Icon/th_bukutamu6.png




http://i1263.photobucket.com/albums/ii623/dek_rif/Icon/th_buku-tamu-1.png



http://i1263.photobucket.com/albums/ii623/dek_rif/Icon/th_bukutamu55.png



http://i1263.photobucket.com/albums/ii623/dek_rif/Icon/th_bukutamu22.png



http://i1263.photobucket.com/albums/ii623/dek_rif/Icon/th_bukutamu44.png



http://i1263.photobucket.com/albums/ii623/dek_rif/Icon/th_bukutamu33.png



http://i1263.photobucket.com/albums/ii623/dek_rif/Icon/th_bukutamu22.png



http://i1263.photobucket.com/albums/ii623/dek_rif/Icon/th_bukutamu66.png

Sekian dulu untuk postingan/articles tentang Cara Memasang Buku Tamu Hide Show Kanan/Kiri kali ini, semoga bisa bermanfaat untuk sobat semua.
Bagaimana apakah sobat berhasil menerapkannya, silahkan tinggalkan tanggapan dan komentar sobat tentang postingan/articles kali ini.

Poskan Komentar Blogger Disqus

  1. Gan ane mau tanya ??
    kalau yang gambar smile itu cara nya gimana ya ??

    BalasHapus
  2. @Bluesky Maaf sya kurag pham mksudnya? gmbar smile mksudnya emoctionnya atau apanya ni?

    BalasHapus
  3. Yang ane maksud gambar smile seperti pada screenshot diatas, yang berbentuk kotak trus ditengahnya ada gambar Smile.

    Itu yang ane maksud

    BalasHapus
  4. maksud kode buku tamu itu ap gan?

    BalasHapus
  5. @Zhall Trozans Ganti kode buku tamu degan kode script yg anda dpatkan dri cbox atau yg lainnya.
    jika anda tidak mmliki akun bku tmu slhkan mndftar di www.cbox.ws dan sebgainya.

    BalasHapus
  6. @dek rif hmmm, harus bkin lgi iya,,? ,OK Thanks,, ;)

    BalasHapus
Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA...</i>
Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Penting:
Jika Anda mengajukan pertanyaan klik 'Subscribe by email' link di bawah form komentar untuk mengetahui komentar balasan.

Khusus untuk membalas komentar disarankan menggunakan tombol balas/reply di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur.

Dilarang Meninggalkan Link Aktif, Link Aktif Terpaksa Akan Saya Hapus Dari Komentar.

NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!".

Konversi Kode di Sini! Daftar Member Aktif

 
Top