Cara Membuat Buku Tamu Tersembunyi Di Samping Blog

Kalau di postingan sebelumnya saya membahas  tentang Cara menambah BUKU TAMU pada Blog, kali ini saya akan berbagi ilmu tentang cara membuat buku tamu tersembunyi di samping Blog kita. Pasti akan lebih menarik kalau widget kita tidak hanya monoton di samping kanan-kiri postingan kita saja.

Dibawah ini adalah langkah-langkahnya :
1. Login Blogger
2. Klik Rancangan/Design
3. Tambah Gadget / Add a Gadget
4. Pilih HTML/javascript

Kemudian Copy paste kode di bawah ini di dalam Html/javascript tadi.

<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/AVvXsEjt-gIEqZkrzmm0eB5dc4vNttnKXl3RVO3X94OR33B8nG3uX9P_HnbAumDV-jXh4sC-rbCMzKX3J9vry3MbV6NZqbStWlwxUIE3VIOKFO6ENvVvjeEMh8rsHeI4bnbdGBmHb-Aal0K65Aoa/') 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">
 LETAKKAN KODE SHOUTBOX, FOLLOWBOX, DLL TERSERAH ANDA DISINI
<div style="text-align:right"><a href="javascript:showHideGB()">[tutup]</a></div>
</div>
<script type="text/javascript">var gb = document.getElementById("gb");gb.style.right = (30-gb.offsetWidth).toString() + "px";</script></div>

Catatan :

Untuk font warna biru dapat diganti posisinya sesuai keinginan anda tapi autr juga stylenya.

Lalu  untuk font warna Hijaubisa anda letakkan kode apa saja, misalnya kode buku tamu

kalau mau tahu hasilnya lihat saja bagian sebelah kanan Blog saya... :)

Cara menambah BUKU TAMU pada Blog

Fungsi Buku tamu pada blog adalah untuk berinteraksi dengan pengunjung agar apabila ada kesalahan pada blog kita, pengunjung dapat langsung memberitahukan dengan mudah dan cepat. Tutorial Blog ini saya buat para Blogger yang belum tahu cara membuatnya.

Cara memberi Buku tamu pada blog sebenarnya mudah sekali walaupun langkah-langkahny bisa dibilang lumayan panjang. Disini saya akan mengambil contoh membuat buku tamu lewat http://www.cbox.ws

Proses Pembuatan Account

1.        Buka website Buku Tamu di http://www.cbox.ws

2.        Klik Get your own free Cbox now!

3.        Isi Form pendaftaran dengan lengkap mulai dari Cbox Name, Email address, Password, alamat website, dan bahasa

4.        Di form yang sama juga kamu bisa memilih Style untuk BUKU TAMU kamu

5.        Jika sudah terisi semua klik Create My Cbox dan anda telah sukses membuat Buku Tamu.

Login dan Setting Buku Tamu

1.         Login menggunakan akun CBOX yang telah anda buat tadi

2.        Klik Look & Feel =>> Layout Options untuk Mengatur lebar ( Width ) dan Tinggi ( height ) Buku Tamu. Sesuaikan dengan ukuran side bar blog anda. Anda juga bisa mengatur apakah pesan terbaru akan ditampilkan paling atas atau di bawah dengan memilih In Order

3.        Klik Look & Feel =>> Colours & Fonts. Anda bisa menentukan warna, Font dan lain-lain. Silahkan setting sesuai dengan selera anda.  Jangan lupa klik Save

4.        Jika sudah selesai semua, klik tombol Apply

Cara mengambil kode HTML buku tamu dan memasukkan ke side bar blog

1.        Masih di member area Cbox klik Publish! Lalu klik tombol Copy to clipboard

2.        Login ke blogger.comdan klik Rancangan/Design

3.        Klik Tambah gadget

4.        Pilih HTML/Java Script

5.        Paste kode Buku Tamu yang telah dicopy tadi ke kolom yang tersedia.

Sekarang buka Blog kamu...

Mudah kan????

Cara membuat Pesan Khusus diatas Kotak Komentar

Mau buat pesan khusus diatas kotak komentar? caranya gampang banget kok, paling cuma 5 menit juga sudah bisa dilihat hasilnya.

Tag HTML yang bisa dipergunakan dalam kotak pesan komentar ini adalah :
<b> untuk membuat huruf menjadi tebal </b>
<i> untuk membuat huruf menjadi miring </i>
<a> untuk menyisip link </a>

Berikut adalah cara membuat pesan diatas kotak komentar :

1. Login ke blog kamu --> Setelan --> pos dan komentar

2. Gulir kebawah sedikit ada menu 'Pesan formulir komentar'

3. Isi dengan pesan khusus yang ingin kamu tampilkan

4. Terus jangan lupa SAVE.

Mudah dan praktis kan???? Selamat Mencoba

Cara Menambah Emoticon di Kotak Komentar Blog

Langsung saja disini saya akan berbagi info cara untuk memberi emoticon pada kotak komentar blog kita. Buat yang belum tahu ikuti saja langkah-langkah dibawah ini :

1.    Log in di blogger

2.    Klik Design -> Edit HTML

3.    Beri tanda centang pada "Expand Widget Templates"

4.    Cari kode </body>

5.    Lalu letakkan script dibawah ini diatas kode </body>

<script src='http://hbhost.googlecode.com/files/yemoticon.js' type='text/javascript'/>

6.    Trus cari kode berikut ini:

<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a> </b:if>
</b:if>
</p>

7. Kalau tidak sama, cari yang paling mendekati. Kalau ada lebih dari satu kode <p class='comment-footer'> , pilih yang paling bawah.Kemudian letakkan kode berikut ini dibawah

<p class='comment-footer'>

<b><img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif'/>
:))
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif'/>
:)]
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif'/>
;))
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif'/>
;;)
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif'/>
:D
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif'/>
;)
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif'/>
:p
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif'/>
:((
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif'/>
:)
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif'/>
:(
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif'/>
:X
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif'/>
=((
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif'/>
:-o
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif'/>
:-/
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif'/>
:-*
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif'/>
:
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif'/>
8-}
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif'/>
~x(
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif'/>
:-t
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif'/>
b-(
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif'/>
:-L
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif'/>
x(
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif'/>
=))
</b>

8. Klik Save Template.

9. Selesai. Silahkan dites di kotak komentar anda. Jika berhasil maka akan muncul icon-icon lucu di kotak komentar seperti contoh dibawah ini

Cara memasang google translate pada blog

Fungsi dari widget ini adalah utuk menerjemahkan bahasa pada blog kita menjadi berbagai macam bahasa yang ada di dunia ini. Karena pengunjung blog/website kita tidak hanya dari lokal saja tapi berasal dari berbagai negara, dengan adanya gadget translate ini maka akan memudahkan para pengunjung blog kita yang berasal dari negara lain agar dapat mengerti apa isi yang ada di blog kita.

Berikut cara memasang google translate

1.     Kunjungi Google Translate disini.

2.     Pada Select the language of your webpage, ubah ke Indonesia (kalau blog kamu berbahasa
Indonesia).

3.     Copy dan paste kode HTML yang berada didalam kotak, yang kode seperti dibawah ini.

4.     Login pada blogger.

5.     Klik Layout pada Dashboard.

6.     Klik Add a Gadget, dan pilih HTML/Javascript

Masukkan kode HTML yang telah dicopy ( seperti pada langkah 3 ) dan beri judul titlenya,
misalnya Google Translate.

Simpan.

Cara membuat widget "Back To Top" pada blog

Salam super kawan...... (kata pak mario teguh)hehehe

Apa yang kalian lihat di bagian kanan bawah Blog saya?????
betul banget, yang kalian lihat adalah widget Back To Top. Fungsinya adalah untuk

membawa anda kembali menuju ke tampilan bagian

paling atas blog. Selain fungsi diatas, widget ini juga dapat berfungsi untuk memudahkan pengunjung blog kita dari yang tadinya di bagian paling bawah blog langsung naik ke bagian atas blog kita dengan satu kali klik saja. Kali ini saya akan berbagi cara bagaimana cara membuat widget Back To Top dengan cara yang bisa di bilang sangat mudah, karena di tetangga sebelah banyak yang menggunakan cara dengan masuk ke Edit HTML dulu.

Tidak usah kelamaan yuk langsung saja kita masuk ke langkah-langkahnya :

       1.     Pada Dasbor, pilih Rancangan

       2.     Tambah gadget -> HTML/Javascript

       3.     Copy kode di bawah ini dan paste
     ke dalam kontennya.

       <br
 /> <style type="text/css">.backtotop a:hover
{background:none;}</style><div class="backtotop"><a
style="display:scroll;position:fixed;bottom:5px;right:5px;"
class="backtotop" href="#" rel="nofollow" title="Back to Top"><img
 style="border:0;"
src="http://i1103.photobucket.com/albums/g470/saykhu/BACK-TO-TOP.gif"/></img
></a></div></br>

       4.     Pratinjau lebih dahulu

       5.     Selesai deh.  Mudah bukan ?!

   

 

Keterangan:
Ganti URL berwarna merah dengan url gambar milik anda atau jika anda ingin punya gambar yang sama dengan punya saya maka biarkan saja URL gambar saya..

Selamat mencoba dan semoga berhasil