MEMBUAT RECENT COMMENT DI BLOGSPOT

---

---

Mungkin sobat ada yang ingin menambahkan recent comment pada blogspot. Caranyapun tidak begitu sulit. Sobat tinggal menambahkan alamat feed milik sobat, seperti cara di bawah ini.

• Login ke blog sobat
• Pilih tata letak.
• Klik tambah gadget.
• Pilih feed
  Tambahkan konten dari feed RSS atau Atom ke blog Anda.
  
• Masukkan alamat feed milik sobat. Pilih salah satu yang rss atau yang atom.
  Untuk yang rss cara penulisannya seperti ini
  http://activekita.blogspot.com/feeds/comments/default?alt=rss
  Sedang untuk yang atom penulisannya seperti ini.
  http://activekita.blogspot.com/feeds/comments/default
  
• Kemudian klik lanjutkan.
• Beri Judul,misal recent comments atau atau komentar baru terserah sobat.
• Sobat juga bisa memilih item yang ingin sobat tampilkan, seperti di bawah ini.
  Tampilkan item.
  Tanggal Item.
  Sumber/pengarang item.
  Buka link di jendela baru.
  
• Kemudian Klik simpan.
  Lihat hasilnya.

MEMBUAT KOMENTAR PENGUNJUNG BERBEDA DENGAN PEMILIK BLOG

---

---

Biasanya komentar antara pengunjung dan pemilik blog mempunyai tampilan yang sama. Karenanya kadang si pengunjung sulit membedakan mana yang komentar pengunjung dan yang mana jawaban pemilik blog. Untuk itu biasanya pemilik blog menyiasati dengan memberi tampilan warna background yang berbeda atas jawaban untuk pengunjung. Untuk sobat yang ingin tampilan kotak komentarnya berbeda dan belum tahu caranya bisa ikuti cara di bawah ini.
Di bawah ini adalah cara membuat komentar pengunjung berbeda dengan pemilik blog (admin )

• Login ke blog sobat.
• Pilih tata letak.
• Klik edit html.
• Beri tanda centang pada Expand template widget.
• Cari kode yang mirip di bawah ini, kemudian tambahkan kode yang berwarna merah.
  
  /* Comments ----------------------------------------------- */
  #comments h4 {
  margin:1em 0;
  font-weight: bold;
  line-height: 1.4em; text-transform:uppercase;
  letter-spacing:.2em;
  color: #999999;
  }
  #comments-block {
  margin:1em 0 1.5em;
  line-height:1.6em;
  }
  #comments-block .comment-author {
  margin:.5em 0;
  }
  #comments-block .comment-body {
  margin:.25em 0 0;
  }
  #comments-block .comment-footer {
  margin:-.25em 0 2em;
  line-height: 1.4em;
  text-transform:uppercase;
  letter-spacing:.1em;
  }
  #comments-block .comment-body p {
  margin:0 0 .75em;
  }
  .deleted-comment {
  font-style:italic;
  color:gray;
  }
  #blog-pager-newer-link {
  float: left;
  }
  #blog-pager-older-link {
  float: right;
  }
  #blog-pager {
  text-align: center;
  }
  .feed-links {
  clear: both;
  line-height: 2.5em;
  }
  .admin-comments{
  background:#00CC33;
  border:3px solid #FF9966;
  padding:5px;
  Kode warna merah adalah kode yang harus sobat tambahkan.
  Kode tersebut bisa juga sobat letakkan di atas kode ]]></b:skin> tinggal terserah sobat mau meletakkannya di mana.
  Kemudian kita juga bisa mengganti warna background,sobat bisa menyesuaikan kode warnanya dengan warna template sobat. Bisa lihat Kode warna di sini
  
• Setelah selesai meletakkan kode di atas tarik scroll ke bawah, cari kode seperti di bawah ini dan tambahkan juga kode yang berwarna merah.
  
  <data:comment.author/>
  </b:if>
  <data:commentPostedByMsg/>
  </dt>
  <b:if cond='data:comment.author == data:post.author'>
  <dd class='admin-comments'>
  <p><data:comment.body/></p>
  </dd>
  <b:else/>
  <dd class='comment-body'>
  <b:if cond='data:comment.isDeleted'>
  <span class='deleted-comment'>
  <data:comment.body/>
  </span>
  <b:else/>
  <p>
  <data:comment.body/>
  </p>
  </b:if>
  </dd>
  </b:if>
  <dd class='comment-footer'>
  
• Kode yang berwarna merah adalah kode yang harus sobat tambahkan.
  
• Jangan lupa klik pratinjau terlebih dulu, jika tidak muncul peringatan baru klik simpan.

MEMBUAT TOOLTIP DENGAN MENGGUNAKAN CSS

---

---

Setelah cukup lama tidak update dan mumpung ada kesempatan,kali ini saya ingin berbagi pada teman blogger khususnya blogger baru yang mungkin masih belum tahu bagaimana membuat tooltip dengan menggunakan css. Saya memilih untuk menggunakan tooltip dengan css ini karena menganggap cukup ringan dari pada dengan menggunakan javascript.

Untuk membuatnya sobat bisa menggunakan cara di bawah ini:

• Seperti biasa login ke blog sobat.
  
• Pilh tata letak.
  
• Klik edit html.
  
• Letakkan kode di bawah ini di atas kode ]]></b:skin>hingga posisinya sbb:
  .tooltip {position:relative;}
  .tooltip span {display:none;}
  .tooltip:hover span {
  display:block;
  position:absolute;
  width:200px;
  left:20px;
  top:20px;
  background-color:#006633;
  border:3px solid #0099FF;
  padding:5px;
  font-size:15px;
  color:#000000;
  text-decoration:none;
  font-family:Verdana,arial, helvetica, sans-serif;}
  ]]></b:skin>
  
• Kemudian klik simpan.

CARA MENAMPILKAN KE DALAM POSTINGAN

<a href="http://activekita.blogspot.com/2010/04/membuat-tooltip-dengan-menggunakan-css.html" class="tooltip"><span>MEMBUAT TOOLTIP DENGAN MENGGUNAKAN CSS</span>Tooltip</a>
Ganti link yang dicetak merah dengan link milik sobat.
Sedang yang berwarna hijau adalah text yang akan keluar,bisa diganti dengan text yang sobat inginkan.

Jika ingin mengganti background dengan sebuah gambar, maka sobat cukup menganti background-color:#006633; dengan alamat gambar milik sobat.
Cara menulis kodenya seperti di bawah ini:
background:url("http://i761.photobucket.com/albums/xx252/darma_bucket/gambar10.jpg")no-repeat bottom;
Ganti alamat gambar yang dicetak merah dengan alamat gambar milik sobat.
Contoh hasilnya kurang lebih seperti di bawah ini.
Untuk melihat hasilnya arahkan mouse pada link di bawah.
MEMBUAT TOOLTIP DENGAN MENGGUNAKAN CSSTooltip

GAMBAR MEMBESAR KETIKA DISOROT

---

---

Memang menyenangkan kalau kita disuruh bermain-main dengan gambar. Apalagi gambar atau image yang kita suka, rasanya ingin cepat-cepat dipajang untuk dipamerkan ( kalau yang ini lagi pamer gigi ). Posting kali ini berhubungan dengan gambar zoom ala dynamic drive, yaitu gambar akan membesar ketika disorot. Maksudnya saat mouse kita arahkan ke gambar maka gambar akan lebih besar dari ukuran sebelumnya.
Untuk membuatnya sobat bisa menggunakan cara di bawah ini.

• Masuk ke blog sobat.
• Klik tata letak.
• Pilih edit HTML.
• Cari kode </head>.
• Letakkan script di bawah ini di atasnya, hingga posisinya sbb:
  <style type='text/css'>
  border:none;
  vertikal-align:top;}
  </style>
  <script src="http://sites.google.com/site/darmasites/my-forms/gambarmembesarketikadisorot.js" type="text/javascript">
  </script>
  </head>.
• Kemudian klik simpan.

Ketika akan posting gambar atau image sobat tinggal menambahkan sedikit kode pada alamat gambar yang sobat punya.
Misal:

<img class="expando" border="0" src="http://i761.photobucket.com/albums/xx252/darma_bucket/th_garudajpn.png" width="75" height="75">

Untuk melihat hasilnya arahkan cursor sobat pada gambar di bawah.

Semoga bermanfaat !