Tips Mempercantik Bagian Komentar di Blog

Tips Mempercantik Bagian Komentar di Blog

Merubah tampilan widget itu sudah biasa dilakukan para blogger,tetapi kalau Mempercantik Bagian Komentar di Blog adalah hal yang jarang dilakukan oleh para blogger.Karena banyak blogger yang tidak mempedulikan bagian di kotak komentar.Padahal kalau kita mau merubah tampilan kotak komentar itu sangat mudah sekali dan tentunya sangat menarik dan berguna buat Para blogger Sejati apalagi para master SEO.mari langsung saja ke TKP....

Merubah tampilan lewat Elemen Halaman

1.Login di Blogger.com

 2.Masuk di Tab"Tata Letak". dan Pilih

Tampilan Elemen Halaman

3.Anda akan menemui tampilan ini

Tampilan yang Harus Diperhataikan

Anda bisa mengganti Kata"Komentar" yang diberi tanda Merah sesuai kesukaan anda,Seperti:

1. Komentar Terbaik

2. Saran dan Kritik

3. Pendapat Pengunjung

4. Orang Berpendapat

5. Orang Berbicara

6. dll (dan lainnya lupa)

4.Lalu Pilih Tombol

Merubah tampilan lewat HTML

Merubah tampilan lewat HTML memang cara yang sangat Manjur buat para blogger oleh karena itu langsung saja masuk ke halaman "Edit HTML"

Tab Blogger

1. Cari Kode

<span class='post-comment-link'>

"Kalau Tidak ada Cari saja Kode ini"

comment-link'>

2.Kalau sudah ketemu Perhatikan Kode dibawah ini:

    <span class='post-comment-link'>
          <b:if cond='data:blog.pageType != &quot;item&quot;'>
            <b:if cond='data:post.allowComments'>
              <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>Berkomentarlah...<b:if cond='data:post.numComments == 1'>,&#160;1 <data:top.commentLabel/><b:else/>,&#160;<data:post.numComments/> <data:top.commentLabelPlural/></b:if>Sejauh ini</a>
            </b:if>
          </b:if>
        </span>

Ganti kode berwarna Kuning sesuai kesukaan anda,script diatas akan tampil seperti ini:

Berkomentarlah...5 Orang Berpendapat Sejauh ini

Belum Bosankan dengan Tips ini? Kalau belum aku ajak lagi dengan menambahkan icon calloutsseperti ini:








Kodenya akan seperti ini saja;

<span class='post-comment-link'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>,&#160;1 <data:top.commentLabel/><b:else/>,&#160;<data:post.numComments/> <data:top.commentLabelPlural/>
</b:if></a><img src='http://i989.photobucket.com/albums/af13/vikost/th_Bahtiarkomentaricon.png' style='border:0px'/>
</b:if>
</b:if>
</span>

Kode di atas akan menampilkan icon itu di bagian akhir,jika ingin menempatkan icon di bagian awal,maka kode yang harus anda ubah adalah kode ini:

<img src='http://i989.photobucket.com/albums/af13/vikost/th_Bahtiarkomentaricon.png' style='border:0px'/>

Diletakan setelah kode

<b:if cond='data:post.allowComments'>

Jika anda tidak suka dengan icon di atas anda bisa mengubahnya dengan cara mengganti url icon yang ini

http://i989.photobucket.com/albums/af13/vikost/th_Bahtiarkomentaricon.png

dengan url icon anda.
Jika anda ingin mempercantik lagi anda juga bisa menambahkan Pesan ketika link comment disorot.Dengan cara menambahkan kode dibawah ini setelah kodeexpr:onclick='data:post.addCommentOnclick'>

title="Ganti dengan Pesan Anda"

Bila anda sudah puas,.....lalu klik Tombol

Share:

Read More

Memberi Icon pada judul label atau category blog

• 
  
  Ketemu lagi kita di kesempatan artikel ini..ehm ...sobat mungkin sudah mengerti maksud judul di atas yang seperti terlihat pada gambar yaitu sebuah icon berbentuk folder yang biasa kita bisa lihat pada windows xp ...jika sobat ingin icon seperti di atas tampil di samping judul label atau category sobat silahkan melihat artikel ini selanjut nya.

  
  

  Sebelum saya membuat artikel ini saya mencoba terlebih dahulu mengobok-obok blog saya...setelah di kotak katik akhir ya icon yang saya sisipkan di kode html berhasil ...cara nya juga ga terlalu sulit sobat tinggal memasukan kode script nya di Edit template HTML pada posisi yang tepat..

  
  

  Ok..langsung aja ya kita coba mendesain nya
  
  
  
  • Seperti biasa anda login terlebih dahulu..kalau sudah login silahkan langsung ke RANCANGAN
  • Anda klik Edit HTML
  
  
  
  • sebelum nya anda download dulu templete agar jika ada kesalahan templete anda bisa di kembalikan seperti semula.
  • Jangan lupa di centang Expand Template Widget  
    
  
  
  • Kalau sudah kita mulai mengobok-ngobok kode html nya
  CARI KODE DI BAWAH INI..!!! cara cepat nya tekan (Ctr + F pada keyboard) 
  
  Cari Kode di Bawah ini :
  
  
  ]]></b:skin>
  
  Kalo dah ketemu sobat copy kode di bawah ini lalu pastekan tepat di atas kode]]></b:skin>
  
  
  
  /*ICON LABEL----------------------*/
  #Label1 ul, #Label2 ul{
  list-style:none;
  margin:0 0 0;
  padding:0 0 8px;
  }
  #Label1 li, #Label2 li{
  background:url(http://i965.photobucket.com/albums/ae136/boujan/folder.png) no-repeat;
  padding-top:0;
  padding-right:0;
  padding-bottom:3px;
  padding-left:20px;
  margin-bottom:3px;
  border-bottom:1px dotted #063E3F;
  line-height: 1.2em;
  }
  
  
  Catatan :

  Tulisan yang saya beri warna merah adalah link icon gambar yang akan di sisipkan pada judul isi kategory blog..nah link ini bisa sobat ganti dengan icon-icon yang sobat sukai

Share:

Read More