Cikgu Kacamata


29
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:
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:

*Copy kod di bawah dan gantikan dengan kod biru:

*Copy kod di bawah dan gantikan dengan kod biru:

*Copy kod di bawah dan gantikan dengan kod biru:

*Copy kod di bawah dan gantikan dengan kod biru:

*Copy kod di bawah dan gantikan dengan kod biru:



Jika ada sebarang pertanyaan, sila tinggalkan komen di bawah.






Sila Share Post CK Ini Sekiranya Anda Suka
Dapatkan Widget Ini!

29 comments:

  1. hoho cantik...tapi saya tak boleh buat kat blog saya sbb guna google plus comment.huhu...apa2 pun terima kasih tuto ni boleh la guna untuk hias nnti hehe

    ReplyDelete
    Replies
    1. Boleh remove google plus comment tu...CK dah test guna google plus comment tu kendian uncheck. komen spt sedia kala...tp google plus comment mmg cun...

      Delete
  2. Rajin cikgu buat tutorial :)

    ReplyDelete
    Replies
    1. Thanks Nao Mei. Saja nak share2 mana yg CK tau :)

      Delete
  3. tq cikgu :) nnt ada masa, nak buat la.. :D

    ReplyDelete
    Replies
    1. Your welcome. Silakan Nurul Farahizzati ;)

      Delete
  4. teringin juga nak buat.. tapi tengok la dulu.. hehe..

    ReplyDelete
  5. tringin la nk bt..he3 trima ksih atas prkgsian ni :)

    ReplyDelete
  6. 1st time singgah blog CK.. bagus dgn tutorial yg sangat membantu terutamnya newbie.. syabas CK.

    ReplyDelete
    Replies
    1. Terima kasih PCL. CK buat mana yg termampu :)

      Delete
  7. thanks for sharing cikguu :)

    ReplyDelete
  8. wah terbaik la CK.. mmg boleh jadi cikgu blog ni :D nanti nak buat, terima kasih atas tutorial.. :)

    ReplyDelete
    Replies
    1. Hehe...cikgu tak bertauliah ni :D. Ya, sama-sama :)

      Delete
  9. singgah sini sambil-sambil cuba tuto ni . thanks cikgu ;)

    ReplyDelete
    Replies
    1. Ya...sama-sama Someone. Jika perlu bantuan, roger je CK ;)

      Delete
  10. Sama-sama Uda Awak. Terima kasih kerana sudi share :)

    ReplyDelete
  11. baru je nak menjerit kat sini. tengok2 takde shoutbox. hewhewhew.

    ReplyDelete
  12. aduh..pening sikit dengan edit html kat blogspot yang baru nie..nak cari kode susah

    ReplyDelete
    Replies
    1. Betul tu...kena berhati2 pasal takut terusik kod-kod lain. Kalau ada ape yg boleh CK bantu, insyaAllah CK akan bantu...

      Delete
  13. sangat menarik nih...tutorial nya...
    trims ya :)

    ReplyDelete
  14. wah yang ini pun menarik jugak,pening nak buat yang mana satu ye he3...

    p/s-->cikgu ada tak tutor untuk letak widget smiley icon khas untuk pop up windows.hari tu saya berjaya buat...kalau dah publish baru nampak smiley tu.tapi gara2 saya edit kod html..terus hilang pulak dah..

    ReplyDelete
    Replies
    1. Tula...kdg2 byk widget ni pun poning gak, hehe.

      Maksud aLeaSaRa smiley icon utk post komen ye?...kalau betul insyaAllah satu hari nanti CK postkan ;)

      Delete
  15. cikgu, macam mana pulak kalau nak letak bil komen sebelah tajuk entri??

    ReplyDelete
    Replies
    1. InsyaAllah CK akan postkan cara-caranya nanti ;)

      Delete