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>



/*!
 * 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

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Memberi Efek Nomor Komentar Dengan CSS
Ditulis oleh= Devy Indriyani
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke >>
= TERIMA KASIH =

11 komentar

  1. pertamax diamankan

    mantab mbak demonya dimana mbak?

    BalasHapus
    Balasan
    1. akhirnya di kasih demo juga

      Hapus
    2. kemarin itu masih dalam tahap kompres kode mas,biar hasilnya maksimal,sehingga demonya baru saya munculkan,hehe

      Hapus
  2. kedahuluan mas sarofudin lagi tadi juga gitu
    ijin follow ya mbak ditunggu follbacknya di blog yang satunya
    heheh

    BalasHapus
    Balasan
    1. wah..punya blog berapa neh,
      saya punya satu aja masih belum menembus level 3 CSS,gimana mau 2-3 blog..pusing donk..hehe..ok dech siap rekreasi ke blog agan yang satunya

      Hapus
  3. mempengaruhi loading apa ga bos?

    BalasHapus
    Balasan
    1. hanya menggunakan 65kb ukuran widgetnya, jika standart pada HTML template 125kb saya rasa hanya 65kb tidak akan berpengaruh dengan speed load, karena widget ini sama seperti widget emotion yang terletak diatas kolom komentar blog ini

      Hapus
  4. dengan nomor-nomor ini kotak komentar jadi lebih keren dan mantap yaa mbak
    thanks mastah :))

    BalasHapus
    Balasan
    1. memberi tanda,si A nomor urut komentar 1,dan si B nomor urut komentar 2 dan seterusnya,sehingga gampang mengenali, dan sedikit lebih keren hehehe

      Hapus
  5. Bener banget, komentar di atas benar-benar sudah nggak asing lagi, hahaha....

    Semoga kekurangan besar itu segera diperbaiki oleh pihak Blogspot, ya. Supaya nggak repot lagi, hehe....

    BalasHapus
    Balasan
    1. versi HTML yang membuat kode tersebut untuk direkomendasikan untuk digunakan di blogspot, jadi kita hanya bisa menggunakan kodenya tanpa bisa meng-editnya

      Hapus

  • Design
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JQuery
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • CSS
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • HTML
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JavaScript
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK