Cara-Cara Nak HIGHLIGHT AUTHOR COMMENT di Blogger

Posted by : Farid Casablancas April 20, 2011

Jika korang ADMIN Blog, adalah penting untuk Berinteraksi dengan Pembaca Blog dan salah satu caranya ialah dengan Membalas Comment mereka.. Dan jika Posting korang penuh dengan Comment, adalah penting untuk orang mengetahui yang mana Comment ADMIN dan yang mana Comment PEMBACA..

Blogspot sekarang dah maju, macam2 boleh buat.. Jadi kalau nak buat HIGHLIGHT AUTHOR COMMENT nie korang cuma perlu buat beberapa Trick jer..

Apa tu "HIGHLIGHT AUTHOR COMMENT" ?? tgok kat bawah nie..

*Klik Image untuk Saiz Sebenar

Dah PAHAM ?? Okay, sekali lagi aku nak Ingatkan, Tutorial nie aku rasa PALING SUSAH tapi Hasilnya Mengancam.. Jadi kalau korang rasa TAK NAK buat, jangan buat.. Kalau nak buat jugak, Meh sini aku ajarkan..

Step 1 : Pergi ke DASHBOARD --> DESIGN --> Edit HTML.. BACKUP TEMPLATE korang sebelum apa-apa TERJADI.. aku tak Bertanggungjawab !!

Step 2 : Tick kotak "Expand Widget Template"

Step 3 : Tekan CTRL+F dan cari Kod Berwarna MERAH yang aku Tandakan macam kat Bawah nie..

<b:loop values='data:post.comments' var='comment'>
            <dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
              <b:if cond='data:comment.favicon'>
                <img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
              </b:if>
              <a expr:name='data:comment.anchorName'/>
              <b:if cond='data:blog.enabledCommentProfileImages'>
                <data:comment.authorAvatarImage/>
              </b:if>
              <b:if cond='data:comment.authorUrl'>
                <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
              <b:else/>
                <data:comment.author/>
              </b:if>
              <data:commentPostedByMsg/>
            </dt>
            <dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
              <b:if cond='data:comment.isDeleted'>
                <span class='deleted-comment'><data:comment.body/></span>
              <b:else/>
                <p>
                  <data:comment.body/>
                </p>
              </b:if>
            </dd>
            <dd class='comment-footer'>
              <span class='comment-timestamp'>
                <a expr:href='data:comment.url' title='comment permalink'>
                  <data:comment.timestamp/>
                </a>
                <b:include data='comment' name='commentDeleteIcon'/>
              </span>
            </dd>
          </b:loop>

Okay, Dah JUMPA ?? Cari yang sebijik tau macam kat ATAS tu tau.. (Sesetengah TEMPLATE Berlainan Kod, Sebab tu lah aku suruh korang CARI Kod Berwarna MERAH yang ATAS dgn yang BAWAH sekali tu)

Okay, Sekarang korang Highlightkan dan GANTIkan SEMUA Kod di ATAS (Dari Kod Berwarna MERAH di ATAS sampai la yang Berwarna MERAH di BAWAH sekali tu) dengan SEMUA Kod kat BAWAH nie..

<b:loop values='data:post.comments' var='comment'>
            <div expr:class='&quot;author-comment &quot; + data:comment.authorClass'>
            <dt class='comment-author' expr:id='data:comment.anchorName'>
              <b:if cond='data:comment.favicon'>
                <img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
              </b:if>
              <a expr:name='data:comment.anchorName'/>
              <b:if cond='data:blog.enabledCommentProfileImages'>
                <data:comment.authorAvatarImage/>
              </b:if>
              <b:if cond='data:comment.authorUrl'>
                <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
              <b:else/>
                <data:comment.author/>
              </b:if>
              <data:commentPostedByMsg/>
            </dt>
            <dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
              <b:if cond='data:comment.isDeleted'>
                <span class='deleted-comment'><data:comment.body/></span>
              <b:else/>
                <p>
                  <data:comment.body/>
                </p>
              </b:if>
            </dd>
            <dd class='comment-footer'>
              <span class='comment-timestamp'>
                <a expr:href='data:comment.url' title='comment permalink'>
                  <data:comment.timestamp/>
                </a>
                <b:include data='comment' name='commentDeleteIcon'/>
              </span>
            </dd>
          </div>
          </b:loop>

NOTE : Kalau korang ada buat Fungsi "REPLY BUTTON", korang PADAM je sekali, Nanti korang boleh Buat Balik Fungsi tu..

Okay, dah siap ?? Sekarang cari ]]></b:skin> , dan PASTEkan Kod di bawah ini SEBELUM ]]></b:skin> ..

.comment-footer{
margin-bottom:0 !important;
}
.author-comment{
background-color:#F0FFF0;
padding:5px;
margin-bottom:1.5em;
border:1px solid #ccc;
border-radius:10px;
}
.author-comment.blog-author {
background: #FFEBCD url(https://lh3.googleusercontent.com/_-BRP4LFLyWc/TZX3b7r2AyI/AAAAAAAAATY/8Am8ri02OjE/s800/admin.png) no-repeat right top;
}

KUNING : Itu Kod Warna untuk USER Comment Background ..
HIJAU : Itu Kod Warna untuk AUTHOR Comment Background ..
MERAH : Itu URL Image CROWN untuk AUTHOR Comment.. Kalau korang nak TUKARkan dengan Image korang sendiri, Tukarkan URL tu dengan URL Image korang..

Kat mana nak Cari KOD WARNA ?? Klik SINI ..


Okay, dah SIAP ?? SAVE TEMPLATE !!

NOTE : Kalau korang tak puas hati dengan WARNA korang pilih tu, Korang ubah la ikut suka korang sendiri.. Sekali lagi aku ingatkan, KALAU RASA Tutorial nie SUSAH, jangan Buat..  Hasilnya korang boleh tgok kat Comment aku sendiri.. Klik je kat mana2 Post aku yang byk Comment..

Seorang Blogger telahpun Berjaya Membuat HIGHLIGHT AUTHOR COMMENT nie, dan Hasilnya Sangat AWESOME !! Nak Tengok ?? Jom Usha Blog SOLEHAH : THE RAKSASA LOVER


ARIGATO GOZAIMASU !!

{ 63 Orang Doakan Farid Kaya... read them below or Comment }

  1. ♥ solehah ♥April 20, 2011 1:59 PTG

    waa..terima kaseh farid.solehah dah buat..menjadik pun..dulu penah try buat skali..tp xjd..

    BalasPadam
  2. Farid CasablancasApril 20, 2011 2:43 PTG

    @♥ solehah ♥ : sama-sama :D selalunya farid akan test dulu, baru buat post tapi dlm byk2 Tutorial camni, yang nie lah paling berkesan walaupun susah.. :D

    BalasPadam
  3. ♥ solehah ♥April 20, 2011 2:46 PTG

    @Farid Casablancas

    haha.tgok lah blog solehah..dah buat laa..comel.haha *terimakaseh . :)

    BalasPadam
  4. Farid CasablancasApril 20, 2011 3:05 PTG

    @♥ solehah ♥ : dah tgok, SERIUS LAWA !! jelez2 :D haha.. btw, Template dia cantik lah, nak jugakkkkkkkk (gedik) :))

    BalasPadam
  5. ♥ solehah ♥April 20, 2011 3:10 PTG

    @Farid Casablancas

    haha..tgok tutorial farid jugak..sebb tu lawa.haha.

    *template kita sma lah..nie leelou kn?kn??tp solehah dh edit koding2 tu ckit..xnpk mcm tmplate dr leelou lg dh.. :)

    BalasPadam
  6. Farid CasablancasApril 20, 2011 3:20 PTG

    @♥ solehah ♥ haha, tapi farid xdpt nak kuasai Tutorial sendiri (paham tak ??) haha.. yup, dari Leelou.. wahhh, mmg Solelah nie designer lah :D edit guna Photoshop ker ?? farid xreti nak Edit guna Photoshop :((..kira farid mmg xreti nak edit background template, tukar bgraound image reti lah.. btw, Image Swirl2 kaler biru kat blakang tu farid ambik dari Vector Image, nak Separate kan pon boleh *Buang dia punya Line*

    BalasPadam
  7. ♥ solehah ♥April 20, 2011 3:25 PTG

    @Farid Casablancas

    leelou is the best okei.hehe..
    koding senang..x mcm designer tmplate or tmplate lain2.. solehah guna leelou dr mula blogging dulu..hee.. nnti farid try lah..hoho.. :)

    ha aa..semua guna potoshop + potoscape ckit.haha

    BalasPadam
  8. Farid CasablancasApril 20, 2011 3:36 PTG

    @♥ solehah ♥

    Yup :) antara banyak2 Template, Template nie lah yg farid paling suka sbb senang.. yg paling Hampeh template PYZAM.COM.. Okay2, farid cuba try nnt :) btw, farid ada Adobe Photoshop CS5, tapi xreti guna :((

    BalasPadam
  9. ♥ solehah ♥April 20, 2011 3:38 PTG

    @Farid Casablancas

    ha aa..tmplate pyzam mcm ngek ckit.haha..alaa.kn bnyk tutorial potoshop skarg nie..farid tgok je lah.. :) nnti pndai jugak guna..

    BalasPadam
  10. Farid CasablancasApril 20, 2011 3:47 PTG

    @♥ solehah ♥

    ye2 :D tutorial banyak, tapi bila kita buat sendiri, still x jadi.. :(( .. InsyaAllah :D setakat skarang nie, farid dah pndai guna ckit, tu pon AYEEM AYAM yg ajar.. btw, farid dah mula rasa semak ngan Label Bernombor kat tepi Comment nie :D

    BalasPadam
  11. ♥ solehah ♥April 20, 2011 3:49 PTG

    @Farid Casablancas

    xpe2..teruskan usaha anda..hehe :) semak ke???x pun..haha..

    BalasPadam
  12. Farid CasablancasApril 20, 2011 4:09 PTG

    @♥ solehah ♥

    Thanks Solehah :D yker ?? tp farid suka yg macam kat Blog Solehah tu, sebab dia dpt beza "KAWAN" ngan "TUAN BLOG" :D tapi klau farid nk buat, farid kena buat Design sendiri, tak nak ar semacam ngan Solehah, nanti dituduh Copycat kan.. haha.. btw, Blog Solehah mmg lawa !! :)

    BalasPadam
  13. ♥ solehah ♥April 20, 2011 4:37 PTG

    @Farid Casablancas

    adoi.haha.. buatlaa..nnti nak tengok jugak..ehehe.. :) btw.terima kaseh..haha..farid godek2 je koding template nie..nnti farid buat lagi cntek kot..hehehe :)

    BalasPadam
  14. Farid CasablancasApril 20, 2011 6:14 PTG

    @♥ solehah ♥

    Yeay !! Solehah, farid dah berjaya buat :D tapi sorilah, terpaksa gunakan "KAWAN" jugak untuk User comment.. tapi untuk Farid, ofcoz la "GENJI" hehehehe :))

    BalasPadam
  15. ♥ solehah ♥April 20, 2011 6:17 PTG

    @Farid Casablancas

    haha..okei la tu.."kawan" memg sesuai pun :) ehehe.. genji sgt ke??haha..

    BalasPadam
  16. Farid CasablancasApril 20, 2011 6:27 PTG

    @♥ solehah ♥

    Haha.. GENJI kot :D btw, nie saje je farid test, xtau nak letak apa, btw nama GENJI terlintas time tu, haha.. nama dia Jadi mangsa.. tapi 1 bab lagi, Image kat bawah skali tu "bottom" farid main buat jer, xreti nak edit dari Template :D

    BalasPadam
  17. PhatLadyApril 20, 2011 6:42 PTG

    akak dah try 2x.. x jadik ponnn ~X(

    BalasPadam
  18. Farid CasablancasApril 20, 2011 6:49 PTG

    @PhatLady

    Akak.. kenapa tak jadi plak ?? maybe ada prob.. akak guna Template apa ??

    BalasPadam
  19. ♥ solehah ♥April 20, 2011 9:50 PTG

    @Farid Casablancas

    eh2..okei la tu..semart dhh..hehe.. senang kn tmplate nie.haha..

    BalasPadam
  20. PhatLadyApril 20, 2011 11:58 PTG

    @Farid Casablancas

    salam..dah jadik..!!! yeayyy..!!!! thanks manyak2..!!! sukeh belog awk..best2..!! ;)

    cume ade lg soklan tambahan neh..
    1) cane nak buat / setting URL image cth cam crown tuh..?

    2) cursor tuh mane nak dapat design cam tuh & cane nak setting..??

    hehehehe... *tgh eksaited edit belog sambil rilis-tensen* :p

    BalasPadam
  21. Farid CasablancasApril 21, 2011 3:12 PG

    @♥ solehah ♥

    Ye mmg senang.. tak pening kepala mcm PYZAM.. dah la Template dia Width kecik.. haha

    BalasPadam
  22. Farid CasablancasApril 21, 2011 3:17 PG

    @PhatLady

    Haaa, kan dah boleh :D sama-sama akak :D

    Jawapan untuk Soklan Tambahan :
    1) Akak upload image akak kat mana2, kat Blog akak sendiri pon boleh, lepas tu akak COPY URL Image tu, tekan Right Click....

    2) Cursor nie farid ambik kat CURSORS-4U, bila akak dah ambik, nanti farid ajar ok ??..

    Akak ada Facebook tak ?? Kalau nak cerita kat sini mmg panjang, kat facebook senang ckit.. klaw akak tanak add farid pon takpe, akak Mesej jer.. ;;-)

    BalasPadam
  23. ♥ solehah ♥April 21, 2011 3:18 PG

    @Farid Casablancas

    jgn ckp kuat sgt..nnti pyzam dgr trus mrajok.haha

    BalasPadam
  24. Farid CasablancasApril 21, 2011 3:22 PG

    @♥ solehah ♥

    Haha.. ok2 :D tapi klaw dia dgar pon best jgk, nanti dia dtg comment sini, lagi bertambah gempak lah klaw designer terkenal dtg comment sini :D

    btw, tak tido lagi ker ?? :D

    BalasPadam
  25. ♥ solehah ♥April 21, 2011 3:25 PG

    @Farid Casablancas

    takk..hehe..eh2..farid x slalu on twiter ek??hehe

    BalasPadam
  26. Farid CasablancasApril 21, 2011 4:07 PG

    @♥ solehah ♥

    wahhh, hebat :D tak, twitter mcm farid ngah tweet sorg2, xder org nak tweet farid pon :(( btw, Facebook 24Jam farid on9 :)

    BalasPadam
  27. ♥ solehah ♥April 21, 2011 4:16 PG

    @Farid Casablancas

    haha..solehah 24 jam on twiter..fb..jarang..ngee :)

    BalasPadam
  28. Farid CasablancasApril 21, 2011 4:20 PG

    @♥ solehah ♥

    best ker twitter ?? cam x jer :D tapi kat Facebook skunk diowg Invite farid ke Group CUTE and TOP Blogger.. Solehah ada join x Group tu ??

    *Kepala Otak dah xtau nak cari Tutorial apa :D

    BalasPadam
  29. ♥ solehah ♥April 21, 2011 4:25 PG

    @Farid Casablancas

    bes2..bes lg dr fb.haha..solehah xtau pun pasal tu..ngee..

    BalasPadam
  30. Farid CasablancasApril 21, 2011 4:27 PG

    @♥ solehah ♥

    Ye la tu best, cuba tgok wall twitter farid, macam farid ngah cakap sorg2.. xder saper pon nk tweet.. Facebook best walaupon kdg dia buat kita sakit hati :D

    BalasPadam
  31. ♥ solehah ♥April 21, 2011 4:29 PG

    haha..yelayela..nnti rajin2 kn bukak twit,,nnti solehah twit bnyk2..ehehe :)

    BalasPadam
  32. Farid CasablancasApril 21, 2011 4:40 PG

    @♥ solehah ♥

    Haha :D okay2 :D tapi text di Twitter xleh taip panjang2.. KELEMAHAN btol.. haha.. btw, Tweet la farid :D

    BalasPadam
  33. ♥ solehah ♥April 21, 2011 4:43 PG

    @Farid Casablancas

    ha aa..kelemahan tol.ehehe..dh twit pun td..haha

    BalasPadam
  34. Farid CasablancasApril 21, 2011 4:49 PG

    @♥ solehah ♥

    haha :D dah tweet Solehah juga :P

    BalasPadam
  35. PhatLadyApril 21, 2011 8:39 PG

    humanggg aihhh korang (farid & solehah) menyembang sampai kul 4am++????

    hahaha..zaman akak "muda" dolu2 mmg x perasan ayam berkokok nak masuk subuh kalo dah leka bertenet (bertenet=surf tenet).. sila abaikan kerosakan bahasa itu... hahahah

    BalasPadam
  36. PhatLadyApril 21, 2011 8:50 PG

    Farid, akak x bleh add awak.. bukak belog awak kuar neh -->> ERROR

    "The requested URL could not be retrieved"

    adehhh..nnt awak add akak yer... nnt akak "eksep"... ;)

    BalasPadam
  37. PhatLadyApril 21, 2011 8:56 PG

    @Farid Casablancas

    blh buat sbb pertolongan incek hubby akak. akak dah x kosa nak konsenteret buat sbb dh try 4x. x tau mane mistake ker akak yg x sabo2x. hahah

    jawapan utk soklan2 semalam:

    1)nnt akak try wat, nak usha2 line dulu...x brp clear nih.. bos tgh ulang alik dpn meja nih..HAHAHA..!!

    2) wokehh... akak dh amik kang akak bgtau k... ;)

    FB akak ade...kat belog akak ade name tuh... akak x bleh add awak..nnt kalo free add akak yer.. thanks ;)

    BalasPadam
  38. ElisApril 21, 2011 11:06 PG

    buat xjady lah .. tapy xpe next time try agy .. heheh.. but kmoo punye mmg smart....

    BalasPadam
  39. Farid CasablancasApril 21, 2011 11:34 PG

    @PhatLady

    Haha.. akak, farid baru mangun tido pkul 2:00 AM, camne nak tido :D haha

    BalasPadam
  40. Farid CasablancasApril 21, 2011 11:36 PG

    @PhatLady

    "The Requested URL Could Not Be Retrieved" ?? okay2 :) nanti farid yg add akak :)

    BalasPadam
  41. Farid CasablancasApril 21, 2011 11:37 PG

    @PhatLady

    haha, ouh, guna pc office ker ??

    BalasPadam
  42. Farid CasablancasApril 21, 2011 11:38 PG

    @Elis

    kenapa tak jadi ?? Elis guna Template apa ?? PYZAM ?? guna LEELOU, senang nak Edit :) lagipon Template dia Best :) Terima Kasih ;)

    BalasPadam
  43. misz athiqahApril 21, 2011 4:29 PTG

    farid!!!...saya dah buat..menjadi!!..wah~~~bkesan r toturial nie..thanx a lot...=)

    BalasPadam
  44. Cikgu Khairul & Kak DiLApril 27, 2011 11:41 PTG

    maceh farid..huhu...
    tpi kena buat esok le nampaknya..spek mata entah ke mana pulak..:P

    BalasPadam
  45. aNiss :):)Mei 11, 2011 3:49 PG

    dah try bnyak kali... tapi tak jadi!! sedihh :(

    BalasPadam
  46. NuSaNa NoSa 91Mei 11, 2011 11:09 PTG

    hebat la.. tutorial yg lain drp lain.. good job~ ^_^

    BalasPadam
  47. nanaMei 19, 2011 1:55 PTG

    sudah try. jadi.
    terima kasih. =D
    tp kan macam mana kalau saya nak tambh url image utk user pulak??

    BalasPadam
  48. nanaMei 19, 2011 1:55 PTG

    sudah try. jadi.
    terima kasih. =D
    tp kan macam mana kalau saya nak tambh url image utk user pulak??

    BalasPadam
  49. Farid CasablancasMei 20, 2011 10:28 PG

    @nana

    Try code nie.. gantikan ngan yg atas tu .. xpon ikut cara kod kat bawah nie :)


    .comment-footer{
    margin-bottom:0 !important;
    }
    .author-comment{
    background: #46C7C7 url(http://1.bp.blogspot.com/-gzogUclMVig/Ta6uiCpFqsI/AAAAAAAAAeY/TRaD16kxRag/s1600/kawan.png) no-repeat right top;
    padding:5px;
    margin-bottom:1.5em;
    border:1px solid #ccc;
    border-radius:10px;
    }
    .author-comment.blog-author {
    background: #FFF8C6 url(http://1.bp.blogspot.com/-91ED1n43eIY/Ta6uiiVEX9I/AAAAAAAAAec/9HM6g2AgcvE/s1600/genji.png) no-repeat right top;
    }

    BalasPadam
  50. ♥ Nurulz Sabeeha ♥Mei 21, 2011 9:25 PG

    yehh dah jadi :)

    BalasPadam
  51. Juwita AfifahJun 09, 2011 3:02 PG

    BERJAYA!!!!! Mekasehh. =)

    BalasPadam
  52. headayahchul :)Julai 20, 2011 5:04 PTG

    Gile laa , farid! :D da maju ehh.thanks~yg ni laa dayah nk.hehe

    BalasPadam
  53. CikTeddyCornerJulai 22, 2011 3:23 PTG

    thanks..dh jadik!

    BalasPadam
  54. Farid CasablancasJulai 27, 2011 10:11 PG

    @headayahchul :)

    Hehe, baguslah kalau dah jadi.. Hehe :D

    BalasPadam
  55. Farid CasablancasJulai 27, 2011 10:13 PG

    TERIMA KASIH SEMUA !! KALAU ADA MASALAH SILA BAGITAU SAYA DI FACEBOOK :)

    BalasPadam
  56. Siti Zubaidah (eydalepot)Februari 07, 2012 1:37 PTG

    ishhh, die tak nak run laaa.. tak menjadi la nii ... ermmmm...

    BalasPadam
  57. UnknownApril 30, 2012 10:28 PTG

    alorghhh tak jadi larghhh..nie tuto ke-3 sydi tengok n buat.maseh tak jadi. kenapa ya?haiyooo

    BalasPadam
  58. girlChaliphJun 05, 2012 5:58 PTG

    tak jadik..hukhuk.tak jumpe cari kod tu..hewhew

    BalasPadam
  59. atinSeptember 10, 2012 11:06 PTG

    yey!menjadi..tq:)

    BalasPadam
  60. UnknownSeptember 11, 2012 10:36 PG

    sy dah try ! menjadik.. yeah nice tutorial. follow sini btw .. TY !

    BalasPadam
  61. Mieraa HandayaniOktober 19, 2012 3:24 PTG

    Tutorial sangat membantu. Thank you so much ! :)

    BalasPadam
  62. UnknownJanuari 07, 2013 3:43 PTG

    @aNiss :):)
    sme la kite...

    BalasPadam
  63. Long ChamJun 17, 2013 6:33 PTG

    panjang nyer tutorial nie hahaha
    www.kucinghitam.net

    BalasPadam

Welcome to My Blog

Instagram

Instagram

Followers

YouTube Channels



- Copyright © 2025 Farid Casablancas -