CARA MEMBUAT BUKU TAMU TERSEMBUNYI DI SAMPING BLOG

Pada artikel sebelumnya saya pernah membuat tutorial membuat widget chatbox menggunakan cbox, nah disini saya ingin berbagi cara untuk mempercantik tampilan blogger/web Anda dengan memanfaatkan widget chatbox, yang membedakan tutorial ini dengan artikel sebelumnya adalah, cbox yang akan kita pasang pada blog terlihat tersembunyi di bagian samping kanan blog.

Mungkin diantara kalian ada yang pernah mengunjungi blogger tetangga yang memasang widget tersembunyi dibagian samping blog, entah itu disamping kanan maupun di samping kiri, tergantung mereka menempatkannya. 

Ok kita langsung ke topik, sebelum saya memulai membuat langkah-langkah membuat Buku tamu tersembunyi dibagian samping, sebaiknya Anda sudah mempersiapkan script cbox terlebih dahulu, jika Anda belum mempunyai script cbox sebaiknya buat terlebih dahulu di halaman cbox, jika belum tahu caranya bisa baca di artikel sebelumnya disini.

1. Login ke akun blogger Anda

2. Pada dasebor pilih Tata Letak

3. Kemudian Tambah gadget

4. Pilih HTML/JavaScript

5. Copy kode dibawah ini dan paste kedalam kota HTML/JavaScript

Klik untuk membuka

<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/AVvXsEjHikqZgk7sydE3cgZff5u2kSTl0TUTkOhVlmxjQnQTURB5mnZ0_Y1-dsf7SDYirinypquYutL7R-LLtXTheR9ad8M-7lwh7Az5l9m98M57BK2xKFHB_llZdp4V29IDJaQPLjWvQ7JWB88/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://giribig.com/2014/11/cara-membuat-buku-tamu-tersembunyi-di-samping-blog.html”>[get this widget]</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>

Keterangan: Kode yang diberi wara merah adalah kode cbox yang telah Anda buat, silahkan ganti kode tersebut dengan kode Cbox Anda.

Ok saya kira langkah diatas cukup mudah, namun jika masih ada pertanyaa, silahkan isi kotak komentar dibawah untuk mengajukan pertanyaan. Semoga artikel kali ini dapat bermanfaat.

---

Terima Kasih Sudah Membaca Artikel CARA MEMBUAT BUKU TAMU TERSEMBUNYI DI SAMPING BLOG Jangan Bosan berkunjung ke blog BahasaRemaja.Com dan Follow Saya .

---

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Bahasaremajacom

Tweet