PLEASE DISABLE YOUR ADBLOCK OR DNS BLOCKED FOR SUPPORT THIS SITE!

Blog Inspirasi Digital

Blog Inspirasi Digital

Tutorial Mikrotik, Hotspot, Blog, SEO, WEB 2.0, HTML, CSS, Javascript dan Inspirasi Digital

Tampilan beda untuk komentar pemilik blog

Membedakan tampilan komentar pemilik dengan pengujung atau istilah kren-nya Author Comment Highlight tentu akan mempermudah pengunjung lain untuk melihat mana komentar dari pengunjung blog dan mana komentar pemilik blog.



Tanpa banyak cuap-cuap langsung aja ya ketahap pembuatannya?


Pertama:


Masuk pada Template -> Edit HTML -> jangan lupa beri tanda centang pada Expand Template Widget


cari kode <dd class=’comment-body’> atau lihat arahan kode warna hijau dibawah ini, jika sudah ketemu kode <dd class=’comment-body’> tambahkan kode dengan warna merah di atas kode tersebut. kemudian tambahkan juga kode </b:if> seperti tampak pada kode dibawah.


<dl id=’comments-block’>
        <b:loop values=’data:post.comments’ var=’comment’>
<b:if cond=’data:comment.author == data:post.author’>
<dt class=’owner-Author’ expr:id=’”comment-” + data:comment.id’>
<a expr:name=’”comment-” + data:comment.id’/>
<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>
<b:else/>
          <dt class=’comment-author’ expr:id=’”comment-” + data:comment.id’>
            <a expr:name=’”comment-” + data:comment.id’/>
            <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>
</b:if>

<b:if cond=’data:comment.author == data:post.author’>
<dd class=’owner-Body’>
<p><data:comment.body/></p>
</dd>
<b:else/>

          <dd class=’comment-body’>
            <b:if cond=’data:comment.isDeleted’>
              <span class=’deleted-comment’><data:comment.body/></span>
            <b:else/>
              <p><data:comment.body/></p>
            </b:if>
          </dd>

</b:if>

<b:if cond=’data:comment.author == data:post.author’>
<dd class=’owner-Footer’>
<span class=’comment-timestamp’>
<a expr:href=’”#comment-” + data:comment.id’ title=’comment permalink’>
<data:comment.timestamp/>
</a>
<b:include data=’comment’ name=’commentDeleteIcon’/>
</span>
</dd>
<b:else/>

 


Kemudian tambahkan kode CSS dibawah ini


Cari kode dengan warna hijau, jika sudah ketemu tambahkan kode dengan warna merah dibawahnya.


#comments-block .comment-body p {
margin:0 0 .75em;
background:#f3f3f3 no-repeat left bottom;
}


.owner-Body {
margin:0;
padding:0 0 0 20px;
}
.owner-Body p {
font-size:100%;
margin:0 0 .2em 0;
color:#FF0000;
text-decoration:bold;
}


Selamat mencoba..ups hampir lupa ucapan terima kasih buat mas anang yang menulis lebih dulu tutorial ini.

53 komentar:

  1. Ah, jadi pertamax nih ceritanya. :D Thanks Om, langsung diaplikasikan ilmunya. Salam hangat...

    BalasHapus
  2. Anonim31/3/08

    @ecko : wah jarang2 nih mas ecko jadi pertamax...ya udah om premium hihi

    BalasHapus
  3. Kereeen..ditunggu ya hack blogger selanjutnya...

    BalasHapus
  4. Anonim10/4/08

    @abi : OK silahkan ikuti terus perkembangan di blog om :)

    BalasHapus
  5. Anonim24/4/08

    udah lama saya nyari tips ini Om, Koq baru ketemu sekarang ya? Thanks Om.

    BalasHapus
  6. Anonim25/4/08

    @feri : thanks juga feri dan silahkan dicoba

    BalasHapus
  7. Anonim11/5/08

    Duh om, saya sudah pernah buat kolom komentar dari tutorial kang rohman, tp tidak berwarna.

    Udah seneng2 nemu tips ini. Tp gabisa digunakan katanya kode xml tidak benar..

    Kayanya formatnya beradu ya?

    huhuhuuu.....

    BalasHapus
  8. Anonim11/5/08

    @bani : mungkin ada kesalahan waktu copy paste kodenya..atau templatenya sudah di modifikasi..dicoba dulu ya...

    BalasHapus
  9. saia coba kok rada susah yah om...

    ada apa gerangan.....

    numpang absen dulu aja yah om.. :D

    BalasHapus
  10. Anonim27/6/08

    wah kotak komentarnya baru ya om, kapan dibuatkan tutorialna nieh

    BalasHapus
  11. Anonim30/6/08

    ini dia yang dicari-cari
    tak cobain dulu ahh... :))

    BalasHapus
  12. #comments-block .comment-body p {
    margin:0 0 .75em;
    background:#f3f3f3 no-repeat left bottom;
    }

    oom kok yg ini punyaku g ada ya..???

    BalasHapus
  13. (bantuin o-om ahh.., tapi sori kok, kalo salah ntar di koreksi ya)

    @Kang Noval..

    #comments-block .comment-body p {
    margin:0 0 .75em;
    background:#f3f3f3 no-repeat left bottom;
    }

    Ini gak mesti sama... tergantung templates
    (soalnya punya saya juga beda, he..he.. yang penting cari aja kode CSS buat BODY komentar)

    BalasHapus
  14. om, apa bedanya code css di atas antara owner-body dengan owner-body p

    kalo saya hapus salah satu boleh gak om?

    BalasHapus
  15. Om .. g jadi ... templateku beda e dah g kek blogger yg standard gmn??? :(( Tolongin ane dunn om....

    BalasHapus
  16. ://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif
    http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif

    BalasHapus
  17. #comments-block .comment-body p {
    margin:0 0 .75em;
    background:#f3f3f3 no-repeat left bottom;
    oom tulisan ini nggak ada tu di html template sya
    }

    BalasHapus
  18. waduuh... ga da OM tag di atas, kyknya template saya udah di modifikasi..;(

    BalasHapus
  19. Anonim2/9/08

    Nach ini dia..yang gw suka agar nanti gw bisa kreasi,biar blognya tampil beda,tapi sampai hari ini sebagai newbie gw blom bisa meletakkkan posting comentar dibawah posting,mungkin Om ada petunjuk,Thanks

    BalasHapus
  20. Wah Bagus kang tutorialnya

    BalasHapus
  21. Anonim6/10/08

    om....
    punya saya kok ga bisa dirubah ya...
    templatenya beda om..
    gmn?
    :((

    BalasHapus
  22. Anonim28/11/08

    Saya mau Om...saya juga pakai template buatan Anda..pasti tips ini cocok

    BalasHapus
  23. Selamat malam o-om :D

    BalasHapus
  24. Anonim24/12/08

    terimakasih o-om. infonya helpful. tapi kode diatas gak bisa langsung di kopi paste.. soalnya ada salah ketik yaitu pada:
    tanda petiknya. yang seharusnya pake tanda ( ' ) tapi pada kode di atas pake ( ` ) jadinya malah error deh..

    BalasHapus
  25. Anonim8/1/09

    Ini dia yang aku cari2,ternyata ada disini.langsung dipraktekin om...

    BalasHapus
  26. Anonim9/1/09

    mau tanya oom, kalo link authornya harus pake link dari google account atau link blog kita? ane nyoba gagal mulu...:((

    BalasHapus
  27. Assalamu alaikum bang oom..

    terima kasih.. atas ilmunya, permisi ya..mau ngeborong ilmu ni..?!?! ;;)) malam ini Alhamdulillah sudah berhasil menerapkan 2 (komentar dibawah posting& pasang emoticon),namun 2 lainnya gagal melulu.. (tampilan blogger flowers & costumized u/ blogger followers)

    solusinya bagaimana ya?/? ;))

    BalasHapus
  28. Anonim22/2/09

    Makasih byk om...
    Artikelnya bnr2 bermanfaat

    BalasHapus
  29. Anonim22/3/09

    Mas..kok saya mau nyari kode yang warna ijo kok gak ada di edit html saya?

    BalasHapus
  30. bener kata mas andrianzz Kang oom, td saya cb muncul error di html-nya trus pas diganti mau deh di save html-nya.
    dan hasilnya ... it's work for me.

    Trims ya mas.
    silahkan dilihat buktinya di http://endeavorist.blogspot.com
    (sekalian promosi :))

    BalasHapus
  31. oom tmpalate udah di modifikasi jadi susah nyari kode yang serupa seperti yang om tunjukan.. saya udah nyari pake notepad di find tapi ga ada. klo yang mirip2 ada sih.. ptokannya yang penting di comment body ya om?:-*

    BalasHapus
  32. Mantap... langsung tak cobain ya omm.. :) mkasih

    BalasHapus
  33. o-om. kalau diantara yang ngak bisa juga walau sudah menamhbahkan yang seharusnya, di color:warna; mesti tambah kata background sebelum color tersebut, ini yg aku alami

    BalasHapus
  34. yah tak cobak e dulu..!!! suwonnn

    BalasHapus
  35. makasih om........ cara nampilin kotak emotion gmn yak??

    BalasHapus
  36. makasih om... it works :D

    BalasHapus
  37. nice blog :)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

    BalasHapus
  38. Anonim29/3/10

    wauh om bingung ni soalnya emang masih pemula ...
    aku bingung pas kode css nya doang nih tolong sarannya...

    BalasHapus
  39. Di Coba Dulu Gan, Terima Kasih

    BalasHapus
  40. Anonim29/9/10

    om,,, highlight author comment nya yang ada kotaknya dong om, kayak comment om di posting ini...

    BalasHapus
  41. Anonim6/10/10

    sep om...
    q coba dlo ...

    BalasHapus
  42. trims infonya..aku coba dulu..

    BalasHapus
  43. ajzkro om infonya,,, boleh dicoba

    BalasHapus
  44. Dapat ilmu lagi..terima kasih om

    BalasHapus
  45. mas oom bagus, makasih tutornya

    BalasHapus
  46. di template yang ane beli udah langsung diset
    jadi tanpa harus mengedit..
    top lyrics | song lyrics |music lyrics

    BalasHapus


 

Back to Top