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 !!

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

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

    BalasPadam
  2. @♥ 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. @Farid Casablancas

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

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

    BalasPadam
  5. @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. @♥ 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. @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. @♥ 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. @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. @♥ 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. @Farid Casablancas

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

    BalasPadam
  12. @♥ 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. @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. @♥ 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. @Farid Casablancas

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

    BalasPadam
  16. @♥ 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. akak dah try 2x.. x jadik ponnn ~X(

    BalasPadam
  18. @PhatLady

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

    BalasPadam
  19. @Farid Casablancas

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

    BalasPadam
  20. @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. @♥ solehah ♥

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

    BalasPadam
  22. @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. @Farid Casablancas

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

    BalasPadam
  24. @♥ 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. @Farid Casablancas

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

    BalasPadam
  26. @♥ solehah ♥

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

    BalasPadam
  27. @Farid Casablancas

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

    BalasPadam
  28. @♥ 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. @Farid Casablancas

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

    BalasPadam
  30. @♥ 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. haha..yelayela..nnti rajin2 kn bukak twit,,nnti solehah twit bnyk2..ehehe :)

    BalasPadam
  32. @♥ solehah ♥

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

    BalasPadam
  33. @Farid Casablancas

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

    BalasPadam
  34. 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
  35. 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
  36. @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
  37. buat xjady lah .. tapy xpe next time try agy .. heheh.. but kmoo punye mmg smart....

    BalasPadam
  38. @PhatLady

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

    BalasPadam
  39. @PhatLady

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

    BalasPadam
  40. @Elis

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

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

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

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

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

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

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

    BalasPadam
  47. @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
  48. Gile laa , farid! :D da maju ehh.thanks~yg ni laa dayah nk.hehe

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

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

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

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

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

    BalasPadam
  54. Tutorial sangat membantu. Thank you so much ! :)

    BalasPadam
  55. panjang nyer tutorial nie hahaha
    www.kucinghitam.net

    BalasPadam

Welcome to My Blog

Instagram

Instagram

Followers

YouTube Channels



- Copyright © Farid Casablancas -