28 Tunjukkan Nombor Komen dan Icon Pada Blogger

Bagi mereka yang suka membuat dekorasi pada ruangan komen, di sini terdapat satu dekorasi yang amat menarik untuk ditonjolkan pada ruangan komen blog masing-masing, iaitu meletakkan nombor komen. Nombor komen ini akan meningkat mengikut berapa bilangan komen yang diterima. Nombor ini juga akan tertera jika terdapat reply komen.

Disamping itu, anda juga boleh meletakkan gambar background icon sebagai simbolik nombor tersebut.

Anda sudah bersedia untuk melakukannya? Ikuti langkah-langkah di bawah:

1. Pilih "More options"

2. "Template"



3. Klik butang "Edit HTML"



4. "Copy" kod di bawah:

]]></b:skin>

Klik sekali mana-mana bahagian pada Template dalam kotak yang bertanda merah dan pada keyboard, tekan butang "Ctrl+F" (untuk terbitkan kotak Search)


5. Dalam kotak Search, "Paste" kod No. 4 tadi dan tekan enter

"Copy" pula kod di bawah:

.comment-thread ol {
counter-reset: countcomments;
}
.comment-thread li:before {
content: counter(countcomments,decimal);
counter-increment: countcomments;
float: right;
z-index: 2;
position:relative;
font-size: 14px;
color: #333333;
padding-left:8px;
padding-top:2px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj99xDIfZRL4tOJRyIVxjpeYceiRc0IPyAAlmYOydMimjkkxWltN3VJ0h1pMwBwfqMksg4PEBwjBPFSSZCCyShb_DIFfZwXAz_QJM803zX8M33qypZTCV-puodgDpgrgia31pV1cfVoNgCH/s320/CK-Bubble.png) no-repeat;
margin-top:7px;
margin-left:10px;
width: 50px; /*image-width size*/
height: 48px; /*image-height size*/
}
.comment-thread ol ol {
counter-reset: contrebasse;
}
.comment-thread li li:before {
content: counter(countcomments,decimal) "." counter(contrebasse,lower-latin);
counter-increment: contrebasse;
float: right;
font-size: 13px;
color: #666666;
}

Nota:

• Kod warna biru:
  Link gambar background icon. Anda boleh gantikan dengan link gambar anda sendiri atau copy saja link gambar bagi background icon yang CK sediakan;
*klik sini untuk dapatkan link gambar untuk background icon
• Kod warna oren:
  Untuk menukar saiz dan warna bagi nombor pada komen utama
• Kod warna hijau:
  Untuk mengubah posisi nombor
• Kod warna ungu:
  Untuk mengubah posisi gambar background icon
• Kod warna pink:
  Untuk menukar saiz dan warna bagi nombor pada komen reply
*klik untuk mendapatkan kod-kod warna lain
• Jika anda tidak mahukan gambar background, buangkan saja semua kod merah termasuk kod biru, kod hijau dan kod ungu

6. "Paste" kod di atas hanya di atas kod No. 4



7. "Save template" dan selesai!

Untuk menukar gambar background icon, pilih icon mana yang diminati, copy kod dan gantikan dengan kod biru:

	*Copy kod di bawah dan gantikan dengan kod biru: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj99xDIfZRL4tOJRyIVxjpeYceiRc0IPyAAlmYOydMimjkkxWltN3VJ0h1pMwBwfqMksg4PEBwjBPFSSZCCyShb_DIFfZwXAz_QJM803zX8M33qypZTCV-puodgDpgrgia31pV1cfVoNgCH/s1600/CK-Bubble.png		*Copy kod di bawah dan gantikan dengan kod biru: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9gAP5r4Z4lG7aems5Un2Kr73SXj9uEix7PwLKjS0fIc63wfLViwzJGCtRHjvK1CHbgc0J-cuGCB1tSNvBWdToXzO6HMkCGwwJ2s_R1mSk4_QEcwcQ6wrI2_YaHkRBRnou12pdHBrK74lE/s1600/CK-Bubble2.png		*Copy kod di bawah dan gantikan dengan kod biru: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi01_XiZGKw-OUXnU6CJ4LJbskO2St1-H74Ph_IedLWF8B9LmjoDC0U54v4240RwF4IpSRPO_kZPoVlpnfdIQNIAJ6cLA7bsBJcFGe0RzhRkdne6oc2Oc9OZvl2gtyyKxRTLD8PvWnOF4m7/s1600/CK-Bubble3.png
	*Copy kod di bawah dan gantikan dengan kod biru: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaT04In09hhyphenhyphenFITVKhwjQR-CvA4GjpzPIv-n7UAsjs_E_gPb3F2Q2wX0cYKuF2AtDDlRUFz1hjpvMoL4uEOUy1-5PO5AFv43IobGlytC5JTuxt0kjNqGw0LXDqUeLHLLfKaFPgDV3sEuuE/s1600/CK-Bubble4.png		*Copy kod di bawah dan gantikan dengan kod biru: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8dJd6WPlGDmzcj6cxaKlXRPtQXPxwkUA_usib55zyEuY8rQDmMYdisz9TJGSTYnRqdL6dqXFQMrab3zxDgLmpnW7Dfj4sm96KPgN5pwF0gkFIWGVateKs84aUr5mcAQ8URo6k9PFiCbp6/s1600/CK-Bubble5.png		*Copy kod di bawah dan gantikan dengan kod biru: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsFJ66RlC3jZSx0dHrx5ZtLTSg0JiJp1AutkJPQ0CTEnYXaQRAsaKu8nHSGM_kTKxN8ADm9nWyw4EYUVESSXqWeYLhqM1QVPPCLOeSt7lNDlhQCF5UyRVbagR-bQz2cHFgzRcztvKb6OP8/s1600/CK-Bubble7.png

Jika ada sebarang pertanyaan, sila tinggalkan komen di bawah.

Sila Share Post CK Ini Sekiranya Anda Suka

• @Facebook
• @Twitter
• @Google+

​Dapatkan Widget Ini!