June 14, 2013

Membuat Guest Book Berbeda Pada Blog

Selamat siang...

Postingan kali ini berhubungan dengan hal-hal yang klasik dari kegiatan ngeblog, yaitu blogwalking. Nah, tentu banyak dari blogger yang biasanya memasang buku tamu atau guest book pada blog nya agar para blogwalker bisa meninggalkan jejak dan kemudian saling ganti mengunjungi.


Kebanyakan dari blogger (termasuk saya dulu... :D ) lebih cenderung memasang guest book melayang, biasanya di sisi kanan halaman blog, meskipun tidak sedikit pula yang memasangnya seperti widget-widget statis lainnya di bagian sidebar.

Pada tutorial ini, saya ingin berbagi cara memasang guest book pada blog namun dengan tampilan yang sedikit berbeda, dan untuk guest book nya sendiri saya gunakan dari cbox jadi bila temen-temen menerapkan tutorial ini, saya anggap kode cbox nya sudah temen-temen miliki.


1. Login ke blogger.

2. Buka menu Template - Edit HTML.

3. Cari kode ]]></b:skin> dan letakkan kode berikut diatasnya :

.aii-guest-boox {

  font:normal normal 12px/1.4 Awesome;
  color:#333;
  width:auto;
  border:1px solid #D580FE;
  border-bottom:none;
  background-color:#FEBFBF;
  position:fixed;
  left:10px;
  bottom:0;
  z-index:9999;
  -webkit-box-shadow:1px 1px 5px rgba(0,0,0,.2);
  -moz-box-shadow:1px 1px 5px rgba(0,0,0,.2);
  box-shadow:1px 1px 5px rgba(0,0,0,.2);
}
.aii-guest-boox > input[type="checkbox"] {
  display:block;
  margin:0 0;
  padding:0 0;
  position:absolute;
  top:0;
  right:0;
  left:0;
  width:100%;
  height:auto;
  z-index:4;
  cursor:pointer;
  opacity:0;
  filter:alpha(opacity=0);
}
.aii-guest-boox > navibox {
  display:block;
  height:24px;
  line-height:24px;
  background-color:#D580FE;
  text-align:justify;
  color:#fff;
  font-weight:bold;
  padding:0 1em 1px;
}
.aii-guest-boox > navibox:before {content:attr(data-collapsed)}
.aii-guest-boox .aii-guest-boox-content {
  /* padding-bottom:10px; */
  display:none;
}
.aii-guest-boox > input[type="checkbox"]:hover + navibox {background-color:#FEBFBF}
.aii-guest-boox > input[type="checkbox"]:checked + navibox {background-color:#D580FE}
.aii-guest-boox > input[type="checkbox"]:checked + navibox:before {content:attr(data-expanded)}
.aii-guest-boox > input[type="checkbox"]:checked ~ .aii-guest-boox-content {display:block}


4. Simpan Template.

5. Lanjut, buka menu Tata Letak - Tambahkan Gadget - HTML/Javascript.

6. Letakkan kode berikut di dalam nya :
<div class="aii-guest-boox">
    <input type="checkbox" />
    <navibox data-expanded="Close Guest Book" data-collapsed="Open Guest Book"></navibox>
    <div class="aii-guest-boox-content">

<-- KODE GUEST BOOK -->

.........................................................................

.........................................................................

.........................................................................

    </div>
</div>

7. Simpan.

8. Enjoy. smoke

Terima kasih dan jangan lupa tinggalkan komentar pada kotak komentar dibawah... :)

43 comments

  1. Replies
    1. haii kurang spasi gan... winds saya kedua ya... shake

      Delete
  2. aku pernah pake cbox, tapi jadinya banyak spammer yang masuk. jadi aku buang deh mbak widget itu.
    sekarang komen di blog aja aku sinkronasi ke email jadi tau siapa aja yang berkunjung :)

    Salam manis :)

    ReplyDelete
    Replies
    1. iya, emang seperti itu saya juga ngalamin, kebanyakan malah jadi ladang spam tp saat ini saya liat masih banyak yang setia menggunakan buku tamu seperti itu... :)

      Delete
  3. izin BM mb,,,,,
    blm pham otak atik html

    ReplyDelete
    Replies
    1. pemula ya, sama berarti dad happy

      jangan lupa berkunjung atau mampir bentar di blog saya jika kamu ada waktu.

      Direktur Utama:

      http:angelofdeathdevil.blogspot.com

      Delete
    2. @ mba maya: silahkan mba, saya juga lagi belajar otak-atik nih... pleased

      Delete
  4. hii cantik bener guest booknya mba, mantap nih :)

    ReplyDelete
  5. Sy sihh lebih suka buku tamu buka tutup lbh hemat tmpt hehe

    ReplyDelete
    Replies
    1. kalau saya lebih suka pasang buku telepon jadi pengunjung tinggal sms atau telepon dan hemat tempat + buang bonus shake wat2 happy dad

      Delete
    2. huhhh sebenernya ini juga buka tutup tapi tampilan nya seperti kolom chatting nya facebook, tinggal pindah posisi aja... huhhh

      Delete
  6. penuh warna-warni jadi meriah,

    ReplyDelete
    Replies
    1. pasang kembang api saja biar tambah meriah lagi :D

      Delete
    2. pleased saya memang suka yang warna-warni mba...

      Delete
  7. Hemat tempat yah kalau di modifikasi. Semangat !!!

    ReplyDelete
    Replies
    1. saya jadi inget menu komentar nya mba indah... pleased

      Delete
  8. klo pasang c-box sepi komentar... he2... pada nyepam..

    ReplyDelete
    Replies
    1. hehehe memang begitu, tapi masih banyak blog yang menggunakan buku tamu di blog nya... shake

      Delete
  9. saya males pasang buku tamu atau buku tamu lainnya sering sepi dan kebanyakan sampah spam + komentarnya pada tidak jelas mending pasang blog apa adanya saja order

    ReplyDelete
    Replies
    1. hehehe, kalo gitu sekalian sediain tempat untuk buang sampah nya gan... peace2 peace2 peace2

      Delete
  10. Menurut saya, yang masih ABG dalam Blogging, "Guest Book atau ChatBox, mau Buka/Tutup atau di Sidebar, Mau mouseover, mau Onclick, Tergantung Niat Author dan Etika Visitor".
    Maka sebisa mungkin saya akan selalu belajar untuk berEtika.
    Satu lagi buat saya "Jumlah Visitor, Rank, atau bahkan Uang dari Blog-Monetizing, semuanya berada di nomor 2,3,4". Saya lebih suka menambah teman, berbagi Ilmu dan Wawasan. Akan lebih "Satisfied my soul" dibanding yang 2,3,4 tadi.

    Suskses sobat Blog Ungu Cantik..
    Salam.

    ReplyDelete
    Replies
    1. salam sukses juga buat agan... shake

      Delete
  11. checkbox aku waktu itu kemana ya? udah lupa. padahal mau coba cara ini. oh iya ke blog aku donk kickymaulana.com

    ReplyDelete
  12. Widiiwww... Cbox nya unyu-unyu banget...
    Nyimak dulu dehhh...
    klo ada waktu ntar diterapin trik nya...
    Thanks infonya yaa... :)

    ReplyDelete
  13. Belum sempat praktek nih, kapan2 praktek akh..

    ReplyDelete
  14. infonya menarik gan. sangat bermanfaat buat saya pribadi.
    dan saya yakin buat pembaca lainnya juga bermanfaat.
    mantap.

    ReplyDelete
  15. Replies
    1. salam kenal juga gan, terima kasih atas kunjungannya...

      Delete
  16. Makasih atas sarannya kak,
    gimana sih caranya membuat emoticon gitu?

    ReplyDelete
    Replies
    1. sama-sama...
      untuk membuat emoticon, coba lihat postingan disini http://aiizahh.blogspot.com/2013/04/update-cara-membuat-emoticon-di-kotak.html

      Delete
  17. visit my blog yaaa.... http://inibajukumoslemklambikucraft.blogspot.com/

    ReplyDelete
  18. Boleh nieh!!!
    Kunjung balik juga yaa!!
    [http://bani-fahmi.blogspot.com/]

    ReplyDelete