Cara Membuat Buku Tamu di Samping Kiri dan Kanan Blog

Diposting oleh DARWIN RIZAYUDI di 17.08 Kamis, 21 Juni 2012
Duta XP, Cara Membuat Buku Tamu di Sisi Kanan atau Kiri Blog
Hai Sobat Blogger apa kabar ??? Berhubung tadi saya mencoba membuat shoutbox di blog saya dan berhasil tampil,sekarang giliran saya membagi-bagikan hasilnya atau tutorial-tutorialnya kepada sobat sekalian. Mungkin Sebaiknya baca juga tentang Bagaimana Membuat Breaking News di Blog.
Membuat Shoutbox/ Buku Tamu memang bisa di buat dengan berbagai cata ada yang langsung kita dapatkan di penyedia layanan shoutbox itu sendiri dan tinggal memasang script itu di blog kita, 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 Ini Tutorialnya :
Pertama :
Login dulu ke Account Blogger. 

Kedua :
Masuk ke Menu Rancangan / Design pada Dashboard Anda

Ketiga :
Untuk Meletakkan Buku Tamu Disisi Kanan Blog :
Tambahkan Script/ Kode berikut di blog Sobat





<!-- right hidden chatbox by http://idesainer.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://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">


<!-- KODE SHOUTMIX ANDA DISINI -->


<br />
<div class="hc-credit">
<span style="float:left">
<!-- THIS CREDIT MUST STAY INTACT FOR LEGAL USE -->
<span >
<span > Get this</span>
<a href="http://idesainer.blogspot.com/2012/02/cara-membuat-buku-tamu-di-sisi-kanan.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>
<!-- right hidden chatbox by http://idesainer.blogspot.com/ END -->


Untuk Memasang buku tamu di sisi sebelah kiri blog anda :
Tambahkan Script/ Kode berikut di blog Sobat




<!-- left hidden chatbox by http://idesainer.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://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">

<!-- KODE SHOUTMIX ANDA DISINI -->

<br />
<div class="hc-credit">
<span style="float:left">
<!-- THIS CREDIT MUST STAY INTACT FOR LEGAL USE -->
<span >
<span > Get this</span>
<a href="http://idesainer.blogspot.com/2012/02/cara-membuat-buku-tamu-di-sisi-kanan.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>
<!-- left hidden chatbox by http://idesainer.blogspot.com/ END -->



Keterangan :
1. Ubah Kode yang berwarna Merah dengan kode buku tamu / shoutbox Anda
2. Jika Anda Belum Punya Kode Shoutbox anda bisa membuatnya disini atau di Fibox.
Terakhir :
Save Template / Rancangan Blog Anda

0 komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)