Menambahkan Nomor Urut Pada Daftar Komentar - Dewa Blogger

Halaman

    Social Items

Buy Now
Menambahkan Nomor Urut pada Daftar Komentar Menambahkan Nomor Urut pada Daftar Komentar

Di antara beberapa kelebihan yang terdapat di dalam fitur komentar Blogger versi kini bahu-membahu masih ada satu kekurangan besar, yaitu hilangnya keleluasaan kita dalam mengedit kode, berbeda dengan fitur komentar versi usang yang sanggup diedit sesuka hati. Berikut ini ialah isyarat 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 yang Saya beri tanda ialah paket kerangka daftar komentar versi sekarang. Itu ialah tag khusus untuk mewakili semua konten komentar di dalamnya, yang merupakan baris-baris elemen <ol> dan <li>. Sangat ringkas dan tidak sanggup diedit. Tidak sanggup memodifikasi avatar, tidak sanggup memodifikasi komentar admin dan lain-lain. Termasuk menambahkan nomor urut komentator dengan JavaScript yang dulu sanggup kita lakukan dengan mudah, kini sudah tidak lagi sanggup kita lakukan.

Saat ini kita tidak sanggup memakai JavaScript untuk memodifikasi ini. Makara kita akan memakai CSS Counter.

Salin isyarat ini dan letakkan di atas ]]></b:skin> atau </style>:

/*!  * Menambahkan nomor urut pada thread comment blogspot versi gres  * https://plus.google.com/108949996304093815163/about  */  .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; }

Klik Simpan Template.

Lihat Demo


Sumber https://www.dte.web.id/

Menambahkan Nomor Urut Pada Daftar Komentar

Menambahkan Nomor Urut pada Daftar Komentar Menambahkan Nomor Urut pada Daftar Komentar

Di antara beberapa kelebihan yang terdapat di dalam fitur komentar Blogger versi kini bahu-membahu masih ada satu kekurangan besar, yaitu hilangnya keleluasaan kita dalam mengedit kode, berbeda dengan fitur komentar versi usang yang sanggup diedit sesuka hati. Berikut ini ialah isyarat 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 yang Saya beri tanda ialah paket kerangka daftar komentar versi sekarang. Itu ialah tag khusus untuk mewakili semua konten komentar di dalamnya, yang merupakan baris-baris elemen <ol> dan <li>. Sangat ringkas dan tidak sanggup diedit. Tidak sanggup memodifikasi avatar, tidak sanggup memodifikasi komentar admin dan lain-lain. Termasuk menambahkan nomor urut komentator dengan JavaScript yang dulu sanggup kita lakukan dengan mudah, kini sudah tidak lagi sanggup kita lakukan.

Saat ini kita tidak sanggup memakai JavaScript untuk memodifikasi ini. Makara kita akan memakai CSS Counter.

Salin isyarat ini dan letakkan di atas ]]></b:skin> atau </style>:

/*!  * Menambahkan nomor urut pada thread comment blogspot versi gres  * https://plus.google.com/108949996304093815163/about  */  .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; }

Klik Simpan Template.

Lihat Demo


Sumber https://www.dte.web.id/