Setting Numbering Otomatis untuk Blogger Threaded Komentar

Tutorial hari ini akan mengambil sistem komentar blogger satu langkah lebih dekat ke wordpress mesin komentar. Saya kagum saat ketika saya menemukan bahwa W3 telah memperkenalkan cara yang sangat baik otomatis penomoran daftar dalam struktur HTML menggunakan murni CSS3 properti seperti kontra-reset dan kontra-increment. Kedua fungsi ini memberikan pendekatan non-JavaScript untuk menampilkan jumlah komentar untuk threaded dan bersarang di blogger. Tblogging telah banyak memberikan kontribusi dalam mengubah Blogger Styles Komentar-tubuh selama tiga tahun terakhir dan kali ini kami memperkenalkan trik yang menarik untuk menambah lebih banyak rempah-rempah untuk komentar blog Anda. Kami menggunakan pendekatan non-JavaScript seperti Wordpress plugin yang populer disebut Greg ulir Penomoran

Bagaimana cara kerjanya?

Seperti daftar memerintahkan, BlogSpot blog menggunakan tag <ol> untuk menampilkan komentar dalam rangka hirarki. Setiap komentar memegang tag <li> terpisah. Counter-ulang Properti menetapkan nilai nol secepat ujung lingkaran dan properti kontra-increment meningkatkan nilai dengan satu unit tergantung pada jumlah li menggunakan tag dalam loop induk. Cukup baik teori, sekarang saatnya untuk menerapkan efek ini di blog Anda!

Catatan: Tutorial ini juga dapat diterapkan ke blog Wordpress. Anda hanya perlu mengubah nama kelas CSS dengan yang digunakan oleh twenty12 tema yang digunakan oleh mesin WP.

Mari Hitung Komentar di Blogger!

Untuk tutorial ini bekerja Anda harus menggunakan komentar ulir di blogger template. Jika Anda belum beralih ke itu maka silakan melakukannya dengan membaca tutorial berikut:

1. Pergi ke blogger > Template
2. Backup template Anda
3. Klik Edit HTML
4. Mencari </ b: skin>. Klik tanda panah hitam untuk memperluas kode.

5. Paste Styles berikut tepat di atas </ b: skin>

/*----- Comment Counter by Tblogging -----*/
.comment-thread ol {
counter-reset: mbt-comments;
}
.comment-thread li:before {
content:counter(mbt-comments);
counter-increment: mbt-comments;
font-size: 30px;
float:left;
position:relative;
top:0px;
left:-10px;
margin-right:0px;
height:100px;
margin-right:0px;
font-weight:bold;
font-family:arial, georgia;
color: #666;
}
.comment-thread ol ol {
counter-reset: mbt-comments-sub;
}
.comment-thread li li:before {
content: counter(mbt-comments) "." counter(mbt-comments-sub,lower-latin);
counter-increment:mbt-comments-sub;
font-size: 12px;
color: #666;
position:relative;
top:10px;
}
.comments .comments-content .comment-header, .comments .comments-content .comment-content {  margin:0px 0px 8px 28px!important;}

kustomisasi:

• Anda dapat menyesuaikan ukuran font dan warna jumlah komentar untuk bagian Main menggunakan daerah disorot kuning
• Untuk mengedit ukuran font dan warna sub bagian (balasan bersarang) mengubah daerah disorot oranye
• rendah-latin: balasan untuk komentar Bersarang pertama yang dihitung dalam urutan ini 1.a, 1.b, 1.c ... Jika Anda ingin menampilkan mereka dalam roman seperti 1.I, 1.II, 1.III, 1.IV. .. kemudian mengganti rendah-latin dengan Atas-Romawi, jika Anda ingin menampilkan mereka sebagai bilangan bulat kemudian mengubahnya ke desimal. Berikut ini adalah beberapa gaya lain yang dapat Anda gunakan untuk balasan bersarang: rendah-Yunani, lingkaran, persegi, disc, rendah-roman

        6. Simpan template Anda dan Anda semua dilakukan!

Kunjungi blog Anda untuk melihatnya bekerja dengan baik! :) 

sumber : MTB

Share this post