Wednesday, December 16, 2015

Cara Membuat Buku Tamu Melayang Disamping Blog

Cara Membuat Buku Tamu Melayang Disamping Blog

Assalamu'alaikum warohmatullahi wabarokatuh, dalam posting kali ini saya akan membahas tentang bagaimana cara membuat buku tamu di blog yang melayang disamping blog, artinya meskipun di scroll buku tamu tersebut akan tetap ikut di tampilan layar. Cara pembuatannya kita hanya menggunakan pengkodean HTML dan JavaScript.

Kita bisa memasang langsung kode shoutbox (from pengisian pesan) di blog sebagai widget dan akan tampil sejejer dengan widget-widget lain di blog, namun untuk memperindah tampilan blog alangkah lebih baik jika memasang buku tamu itu di tempat yang lain, salah satunya di sisi kiri atau kanan blog, digantung dengan hanya tampil sebuah tombol yang jika di klik akan menampilkan shoutbox tersebut.

Fungsi buku tamu ini adalah sebagai tempat bagi para pengunjung blog untuk menyampaikan komentar mereka secara cepat dan mudah.

Nah, untuk memasangnya di blog, pertama-tama sobat harus melalui tahap pertama, membuat form pengisian buku tamu, untuk mendapatkan kode HTML form tersebut kita memerlukan jasa pihak ketiga dari situs tertentu. Ada beberapa situs yang bisa sobat tempati untuk membuat shoutbox tersebut. Salah satunya sobat bisa menggunakan Cbox. Silahkan lihat Demo pada link berikut dan juga berikut ini cara membuat shoutbox di Cbox.


Membuat Shoutbox di Cbox

Pertama-tama silahkan buka Cbox kemudian pilih Sign Up untuk membuat sebuah akun baru.

Cara Membuat Buku Tamu Melayang Disamping Blog

Setelah itu isi form yang ada, centang I aggree to the Cbox terms and conditions of service. kemudian klik Create my Cbox!

Cara Membuat Buku Tamu Melayang Disamping Blog

Kemudian jika sudah buka menu Publish dibagian atas untuk mendapatkan kode HTML dari shoutbox anda.

Cara Membuat Buku Tamu Melayang Disamping Blog

Lalu dapatkan kode HTML shoutbox sobat pada bagian Get your embed code. Silahkan copy kode tersebut ke notepad atau yang lain agar nanti kode tersebut dapat di copy ke blog.

Cara Membuat Buku Tamu Melayang Disamping Blog

Memasang Guestbook di Blog

Nah, disini kita akan memasang buku tamu tersebut di blog. Pertama-tama buatlah sebuah widget di blog, buka bagian Tata Letak lalu pilih Tambah Gadget kemudian tambahkan sebuah widget HTML/JavaScript. Setelah itu tambahkan kode berikut pada kontennya.

Buku tamu sebelah kiri
<!-- MARINGNGERRANG GUESTBOOK START -->
<style>#hcl{position:fixed;top:50px;z-index:+500}
* html #hcl{position:relative}
.hcltab{height:50px;width:50px;float:left;cursor:pointer;background:#FF6858}
.hclcontent{float:left;border:4px solid #ff6858;background:rgb(218,222,224);padding:5px}
.hc-credit{font-size:9px}
.hc-credit a{text-decoration:none}
.hadi{position:relative;text-align:center;margin-top:10px;color:white;text-transform:uppercase;font-family:monospace;font-size:13px}
.teks-bawah{text-align:right;font-size:10px;text-decoration:none}</style>
<script type="text/javascript">function showHidehcl(){var hcl = document.getElementById("hcl");var w = hcl.offsetWidth;hcl.opened ? movehcl(0, 51-w) : movehcl(50-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">

TAMBAHKAN KODE CBOX ANDA DISINI

<div class="teks-bawah">Widget by <a href="http://www.maringngerrang.com/2015/12/membuat-buku-tamu-blog.html">Maringngerrang Blog</a></div><br /><div class="hc-credit"><span style="float:left"></span><span style="float:right"><a href="javascript:showHidehcl()">Tutup</a></span></div></div><div class="hcltab" onclick="showHidehcl()"><div class="hadi">Buku<br />Tamu</div></div><script type="text/javascript">var hcl = document.getElementById("hcl");hcl.style.left = (50-hcl.offsetWidth).toString() + "px";</script></div>
<!-- MARINGNGERRANG GUESTBOOK END -->

Buku tamu sebelah kanan
<!-- MARINGNGERRANG GUESTBOOK START -->
<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://2.bp.blogspot.com/-mrsZX_-WDkk/Te5tiGXpqNI/AAAAAAAAAZg/hDLjMWDN6_U/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">

TAMBAHKAN KODE CBOX ANDA DISINI

<div style="text-align:right"><a href="http://www.maringngerrang.com/2015/12/membuat-buku-tamu-blog.html">[Get now]</a> | <a href="javascript:showHideGB()">[Hide]</a></div></div></div>
<script type="text/javascript">var gb = document.getElementById("gb");gb.style.right = (30-gb.offsetWidth).toString() + "px";</script>
<!-- MARINGNGERRANG GUESTBOOK END -->

Kemudian silahkan masukkan kode Cbox yang sudah anda dapatkan tadi pada bagian TAMBAHKAN KODE CBOX ANDA DISINI. Kemudian Simpan.

Setelah itu lihat hasilnya pada blog sobat. Mungkin cukup sekian dari saya jika ada yang ingin anda tanyakan silahkan sampaikan pada kotak komentar dibawah atau melalui halaman contact blog ini. Terima kasih, assalamu'alaikum.
Disqus Comments