Komentar Bernomor Pada Komentar Berulir Untuk Blogger / Blogspot

44Komentar Bernomor Pada Komentar Berulir Untuk Blogger / Blogspot

Dalam tutorial masa lalu , saya telah berbicara tentang bagaimana Anda dapat menambahkan komentar bernomor ke blogger blog dan hari ini kita akan belajar bagaimana kita dapat menambahkan komentar bernomor bersama dengan komentar gelembung pada komentar berulir juga.

Apa CSS trik berikut akan lakukan untuk Anda:

1. Ketika blok umum komentar adalah memulai (. Komentar-konten) counter disebut countcommentsmengaktifkan dan dimulai dengan nilai awal 1.
2. Kemudian, setiap kali aliran kode berjalan melalui review dari tingkat apapun, baik kepala sekolah atau komentar balasan (. Komentar-benang li), konten akan membawa kita di depan (: sebelum) dari tubuh komentar, nomor yang adalah counter pada saat itu. 
3. Kemudian bertambah dalam satu unit counter (counter-increment).

Lihat screenshot:

Bukankah itu hebat? Yah, aku cukup yakin banyak dari Anda telah menunggu untuk trik keren ini. Jadi mari kita mulai menerapkannya untuk sistem komentar berulir kami.

Langkah-langkah untuk menambahkan komentar bubble count

Langkah 1: Pergi ke Dashboard - Template - Edit HTML (klik Lanjutkan jika diperlukan)

... Expand Template Widget:

Langkah 2: Cari (CTRL + F) untuk potongan kode ini:

 ]]> </ B: skin>

Langkah 3: Tambahkan kode berikut tepat di atasnya:

 . Komentar-benang ol {
kontra-ulang: countcomments;
}
. Komentar-benang li: sebelum {
isi: counter (countcomments, desimal);
kontra-increment: countcomments;
float: right;
z-index: 2;
position: relative;
font-size: 22px;
color: # 555555;
padding-left: 10px; 
padding-top: 3px; 
background: no-repeat; 
margin-top: 7px; 
margin-left: 10px; 
width: 50px; / * ukuran gambar-lebar * / 
height: 48px; / * ukuran gambar-height * /
}
. Komentar-benang ol ol {
kontra-ulang: contrebasse;
}
. Komentar-benang li li: sebelum {
isi: "." counter (countcomments, desimal) counter (contrebasse, rendah-latin);
kontra-increment: contrebasse;
float: right;
font-size: 18px;
color: # 666666;
}

Catatan:

• tanpa ikon gelembung, menghapus kode merah (termasuk kode biru)
• untuk mengubah komentar gelembung, ganti kode warna biru dengan alamat URL icon Anda sendiri.Jika Anda tidak yakin apa yang harus Anda gunakan ikon, Anda dapat menemukan beberapa ikon keren dalam posting saya sebelumnya (lihat tutorial ini di sini dan di sini )
• untuk mengubah posisi Jumlah komentar, kenaikan / penurunan nilai (3 & 10) dari padding-top danpadding-left
• untuk mengubah posisi dari komentar gelembung / ikon, mengubah nilai-nilai (10 & 7) dari margin-left dan margin-top

Langkah 4: Sekarang Simpan Template dan Anda selesai!

Jika Anda menikmati membaca blog ini, silakan berbagi dan berlangganan. Untuk setiap pertanyaan, meninggalkan komentar di bawah ini.