Memberi Efek Nomor Komentar Dengan CSS

Memberi Efek Nomor Komentar Dengan CSS - Artikel yang sangat bermanfaat, terimakasih gan!. Nice info, kunjungan perdana sob di blog ini, ditunggu kunjungan baliknya. Beberapa kata/kalimat diatas sudah tidak asing lagi kita melihatnya,dan bahkan hampir setiap saat terjadi pada kolom komentar di blog anda, tetapi dengan semua itu kita terlepas dari kejenuhan sesaat walau hanya sekedar tanya jawab dalam media maya.
Karena unsur yang paling besar untuk mendukung kemajuan suatu blog itu sendiri yaitu dengan adanya kritikan, saran atau sekedar memberi semangat yang terjadi di kolom komentar. Untuk itu saya mengucapkan terimaksih tulus buat semua sahabat pecinta SAHABAT BLOGGER 77 yang selalu ringan tangan untuk menuliskan sedikit kata dalam komentar di blog ini.

Tetapi yang akan saya share kali ini bukan hanya sekedar mengharapkan pendapat anda di setiap artikel yang saya tulis, karena banyak hal positif yang saya dapatkan dari setiap bait kata di komentar anda, sehingga timbul ide untuk memberikan tanda pada setiap pengunjung yang akan berkomentar dengan Memberi Efek Nomor Komentar Dengan CSS.
Kenapa saya sebutkan dengan CSS, bukan kode XML/HTML.? itu disebabkan karena beberapa kelebihan yang terdapat di dalam fitur komentar Blogger versi sekarang sebenarnya masih ada satu kekurangan besar, yaitu hilangnya keleluasaan dalam mengedit kode-kodenya, berbeda dengan fitur komentar versi lama yang dapat diedit/dimodifikasi sesuai selera.

Berikut ini adalah kode XML dalam fitur komentar Blogger versi sekarang

<div class='comments-content'>
  <b:if cond='data:post.embedCommentForm'>
    <b:include data='post' name='threaded_comment_js'/>
  </b:if>
  <div id='comment-holder'>
    <data:post.commentHtml/>
  </div>
</div>

Kode ini juga terdapat pada struktur HTML Template yang anda gunakan, Coba perhatikan kode warna merah, kode tersebut merupakan paket kerangka daftar komentar versi sekarang. Dan sebagai pembungkus kode menggunakan tag khusus untuk mewakili semua konten komentar di dalamnya yang merupakan baris-baris elemen <ol> dan <li>.
Sangat singkat dan ringkas bahkan tidak diberi lekukan dalam peng-editan. Tidak bisa memodifikasi avatar, tidak bisa memodifikasi komentar admin dan lain-lain. Termasuk menambahkan nomor urut komentator dengan JavaScript yang dulu bisa kita lakukan dengan mudah

Jika saat ini kode tersebut tidak bisa anda edit, atau anda ingin menggunakan JavaScript untuk memodifikasi kodenya, tetapi tidak ada perubahan, mari kita coba memodifikasinya menggunakan kode CSS. Kali ini saya akan coba menggunakan CSS counter.

Perhatikan kode CSS Counter berikut untuk editing comment:after, Kode ini untuk menampilkan nomor pada kotak komentarnya
CSS Code 01

.comments .comment:after {
  content:counter(number);
  display:block;
  width:40px;
  height:40px;
  text-align:center;
  font:italic normal 20px/40px "Times New Roman",Times,Serif;
  color:#ccc;
  position:absolute;
  top:10px;
  right:10px;
  -webkit-border-radius:100%;
  -moz-border-radius:100%;
  border-radius:100%;
  border:4px solid #3c3c3c;
  background-color:#333;
  -webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,.7);
  -moz-box-shadow:inset 0 1px 2px rgba(0,0,0,.7);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.7);}

Kode ini untuk memanggil efeknya dengan hover, sehingga saat mouse melintas link akan terlihat seakan menyala (hover)
CSS Code 02

.comments .comment:hover:after {
  background-color:#600;
  border-color:#900;
  color:white;}

Dan kode CSS lainnya yang berperan untuk mendukung, seperti tampilan, pengaturan warna, posisi efek dan menentukan nomor komentar secara otomatis (1,2,3,4....20)
CSS Code 03

.comments {counter-reset:number}
.comments .comment {
  position:relative;
  counter-increment:number;}
.comments .comment-content {margin-right:50px !important}
.comments .comment .comment-thread.inline-thread {counter-reset:number}
.comments .comment .comment-thread.inline-thread .comment:after {
  font-size:18px;
  line-height:30px;
  width:30px;
  height:30px;}

Nah.!! sekarang mari kita gabungkan kode CSS 1,2 dan 3 diatas untuk nantinya kita pasang agar dapat Memberi Efek Nomor Komentar pada blog menggunakan CSS.

Cukup salin kode berikut, lalu letakkan tepat diatas atau sebelum kode ]]></b:skin>

TAMPILKAN

/*!
 * Efek nomor pada komentar
 * http://sahabatblogger77.blogspot.com/1024/CSS-Filecode
 */

.comments {counter-reset:number}

.comments .comment {
  position:relative;
  counter-increment:number;
}

.comments .comment-content {margin-right:50px !important}

.comments .comment:after {
  content:counter(number);
  display:block;
  width:40px;
  height:40px;
  text-align:center;
  font:italic normal 20px/40px "Times New Roman",Times,Serif;
  color:#ccc;
  position:absolute;
  top:10px;
  right:10px;
  -webkit-border-radius:100%;
  -moz-border-radius:100%;
  border-radius:100%;
  border:4px solid #3c3c3c;
  background-color:#333;
  -webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,.7);
  -moz-box-shadow:inset 0 1px 2px rgba(0,0,0,.7);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.7);
}

.comments .comment .comment-thread.inline-thread {counter-reset:number}

.comments .comment .comment-thread.inline-thread .comment:after {
  font-size:18px;
  line-height:30px;
  width:30px;
  height:30px;
}

.comments .comment:hover:after {
  background-color:#600;
  border-color:#900;
  color:white;
}

Lihat Kode Disini
Tutup Kode