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.

DEMO

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... :)