Cara Membuat Buku Tamu

Untuk Posting kali ini yang merupakan postingan kedua hari ini kami beri judul Cara Membuat Buku Tamu di Sisi Kanan atau Kiri Blog yang termasuk salah satu Label Tutorial Blogging juga.

Membuat Buku Tamu memang bisa dilakukan dengan berbagai macam cara, ada yang meletakkan langsung di sidebar blognya ada juga yang meletakkan dengan Tombol atau gambar floating,
ada juga yang meletakkan dengan Tombol Pop Up. Tapi Kali ini kami akan mempostingkan Bagaimana Cara Memasang Buku Tamu di Sisi Kanan atau Kiri di Blog anda.

Berikut langkah-langkah detailnya :
Pertama :
Anda Login terlebih dahulu ke akun Blogger Anda

Kedua :
Pergi ke Rancangan / Design pada Dashboard Anda

Ketiga :
Untuk Meletakkan Buku Tamu Disisi Kanan Blog :
Tambahkan kode HTML / Script di bawah ked widget blog anda (Anda sudah pasti tahu)

Kode HTML / Scripts

<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://i1227.photobucket.com/albums/ee440/danghilal/idesainer/shoutbox-1.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">



<br />
<div class="hc-credit">
<span style="float:left">

<span >
<span > Get this</span>
<a href="http://webhafizh.blogspot.com/2013/08/cara-membuat-buku-tamu.html" target="_blank">
<span class="Apple-style-span" > Desaign1</span>
</a></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>

Untuk Memasang buku tamu di sisi sebelah kiri blog anda :
Tambahkan kode HTML / Script di bawah ini di widget blog Anda

Kode HTML / Scripts

<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://i1227.photobucket.com/albums/ee440/danghilal/idesainer/shoutbox-1.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">

<br />
<div class="hc-credit">
<span style="float:left">

<span >
<span > Get this</span>
<a href="http://webhafizh.blogspot.com/2013/08/cara-membuat-buku-tamu.html" target="_blank">
<span class="Apple-style-span" > Desaign1</span> </a>
</span>
</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>

Keterangan :
Ganti Kode yang berwarna biru dengan kode buku tamu / shoutbox Anda

Terakhir :
Simpan Template / Rancangan Blog Anda

Sekian langkah-langkahnya, Jangan lupa dipasang ya ..
Terima Kasih

Title : Cara Membuat Buku Tamu
Description : Untuk Posting kali ini yang merupakan postingan kedua hari ini kami beri judul Cara Membuat Buku Tamu di Sisi Kanan atau Kiri Blog yang term...

0 Response to "Cara Membuat Buku Tamu"

Posting Komentar

Catatan:
1. Jangan menuliskan link aktif
2. Jangan menimbulkan SPAM
3. Jangan membuat komentar dengan unsur SARA, Pornografi, DLL.
4. Jika masih bingung, diharap menghubungi admin

TERMS
Untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

TERIMA KASIH - Kisna Hafizh Team