Tutorial Cari Uang

Friday, March 16, 2007

Author Comment Highlight

Berikut ini adalah tips buat Blogger mania yang ingin membuat tampilan blog lebih mantab lagi. Mengingat ada rekues tentang tips ini maka saya coba sempatkan untuk menulis tentang tips ini.

Tips di bawah ini adalah untuk membedakan mana komentar dari pengunjung blog dan mana komentar pemilik blog, yaitu dengan membuat warna yang berlainan satu sama lain. Artinya ketika ada pengunjung blog meninggalkan komentar di blog kita maka warna dari komentar pengunjung blog tersebut akan berbeda dengan warna komentar pemilik blog tersebut.

Tampilan komentar Anang's Blog

Berikut ini akan saya coba jelaskan langkah-langkah dalam melakukan teknik ini.

Pertama-tama anda harus login ke blog anda masing-masing, ya iya lah anda kan mau ngutak-atik blog anda to? Masa anda mau login ke blog saya, mau jadi hacker ya sampeyan?

Langkah selanjutnya setelah anda berhasil login, klik menu Edit Layout pada Dashboard anda dan kemudian pilih menu Edit HTML dan selanjutnya berikanlah tanda centang pada kotak Expand Widget Templates. Dan cari kode id ='comments-block' pada bagian template anda, dan anda akan menemukan 3 buah atribut class yaitu 'comment-author', 'comment-body', dan 'comment-footer'. Nah, kemudian sisipkan kode yang berwarna merah di bawah ini ke dalam template anda. Ok?

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

          <dd class='comment-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:if>

        </b:loop>
</dl>

Nah, setelah langkah membuat kondisi if-else di atas terselesaikan dengan sempurna, maka lanjut ke tahap selanjutnya yaitu memberikan hiasan pada masing-masing tipe kondisi komentar baik itu komentar dari pengunjung maupun pemilik blog.

Misalkan yang sangat sederhana sekali yaitu memberikan warna huruf yang berbeda, sebagai contohnya warna dari isi komentar pemilik blog akan ditampilkan dengan warna merah dan huruf tebal. Pertama-tama cari atribut class 'comment-author', 'comment-body', dan 'comment-footer' pada elemen style CSS anda.

Misal saya punya kode di bawah ini:

.comment-body {
margin:0;
padding:0 0 0 20px;
}
.comment-body p {
font-size:100%;
margin:0 0 .2em 0;
}

Copy dan Paste-kan pada atribut class baru yaitu 'owner-Author', 'owner-Body', dan 'owner-Footer' dan lakukan perubahan sesuai yang diinginkan (misal warna merah dan huruf tebal).

.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;
}

Maka hasilnya nanti akan menjadi seperti ini:



Nah jika anda lebih mahir, maka anda bisa memodifikasi tampilannya menjadi sedemikian rupa, tidak hanya merubah warna tetapi juga merubah warna atau gambar background komentar dll lah pokoknya, seperti yang saya punya.

Selamat mencoba.

45 comments:

  1. Mbok sekali-kali bikin tips jadi hacker biar bisa ngacak² blog sampeyan :P

    ReplyDelete
  2. @ Hedi : hehehe.. ide bagus tuh.. tapi sayang mungkin tidak bisa direalisasikan... hehehe

    ReplyDelete
  3. tidak menarik sama sekali, aneh, tapi lumayan lah buat amatir

    ReplyDelete
  4. berlaku juga unutuk blog selain blogspot gak??

    ReplyDelete
  5. pakde, ini buat new blogger jugakah atawa untuk blogspot lama? *punya lagunya orkes sinten remen gak pakde?:d*

    ReplyDelete
  6. tips yang bermanfaat sekali, boleh nih dicoba, tx ya :)

    ReplyDelete
  7. Bagus jg....
    Kreatif deh mas satu ini ^_^

    ReplyDelete
  8. waah byk pelajaran disini...makasih dah mampir anang, ngelink ya...

    aku ko ga bisa isi SB ya?

    ReplyDelete
  9. menarik juga nih.. :)
    Btw, thanks for the encouraging comment on my blog ya.. Aku sedang mau coba hal2 baru dlm blogging :)
    Sukses terus Mas! ;)

    ReplyDelete
  10. ini posting yang mencerdaskan :)

    ReplyDelete
  11. Cak kalau punya tutorial ngeblog di blogspot atau tahu tutorial lengkapnya mbok aku di ajari to cak. Aku lak yo pingin ngeblog dengan tampilan unik juga. Ajari yooo
    Aku wis ono ning gak s4 tak apak-apak-no di http://kipetruk.blogspot.com

    ReplyDelete
  12. anang memang puuuinter... cihuuuuuyyyyy...

    ReplyDelete
  13. hmmm... sayangnya gak punya akun diblogspot...

    ReplyDelete
  14. wah..wah, thanks infonya.. pengen juga buat tampilan komen beda antara pengunjung dan pemilik.

    ReplyDelete
  15. Mas Anang, di tempatku ga ada Edit Layout, tp cuma Edit template. Jd ga ada id ='comments-block' nya. Di tempatku yg ada cuma code :

    .comment-body{
    color: #666666;
    font-size: 12px;
    text-align: justify;
    margin: 10px;
    font-weight: normal;
    }

    Trus, gimana dong nyisipinnya? Bisa atau ga, ya???

    ReplyDelete
  16. cuma buat blogger ya? ya deh, buat blogku yg satunya aja :p

    ReplyDelete
  17. @ mei : hanya untuk blogspot

    @ danudoank : khusus buat new blogger...

    @ -Nilla- : tips ini khusus untuk new blogger...

    ReplyDelete
  18. masi tetep ngga ngerti... hiks... bener2 masi A M A T I R

    ReplyDelete
  19. saya kesulitan nemuin kode ini:

    comment-body {
    margin:0;
    padding:0 0 0 20px;
    }
    .comment-body p {
    font-size:100%;
    margin:0 0 .2em 0;
    }

    dan saya bingung juga dengan ini: "Copy dan Paste-kan pada atribut class baru yaitu 'owner-Author', 'owner-Body', dan 'owner-Footer'"

    mohon dijelaskan. terima kasih :)

    ReplyDelete
  20. he he he ... tetep aja rada2 bingung, maklum gaptek ama skrip :-)

    ReplyDelete
  21. mau nanya nih mas anang!!!setiap saya buka blog mas anang dibagian bawahnya kok ada kata2 seperti : (terima kasih...)kasi tau dong caranya masukin gituan biar blog kita jadi lebih keren!!!

    ReplyDelete
  22. Salam kenal mas, saya masih newbies banget soal scritp. Btw tutornya bermanfaat kok.

    ReplyDelete
  23. Kok saya gak bisa mas? salah dimananya nih? tolong cek blog saya dan email saya yah mas..perbaikannya bagaimana..makasih loh :-)

    ReplyDelete
  24. Mas, saya udah buat. Tp ko malah kacau yak..

    Duh dasar amatir gw :(

    ReplyDelete
  25. mas, kalo mau pake footer kayak punya mas gimana? ada tanda tangannya trus transparan lagi... kirim ke e-mail saya ya di nyarinama@gmail.com

    ReplyDelete
  26. (*penuh hasrat untuk segera mencuba*)

    ReplyDelete
  27. mas anang...cara buat menu navigasi kayak mas anang punya gimana ya??kalau berkenan bagi-bagi tipsnya

    ReplyDelete
  28. Bang klo pake template yang dah editan gmn??? ane ksulitan nee... da saran????

    ReplyDelete
  29. bang lageee... ama klo ngasih comment box kek punya bang e ini gmn?? keren e :D

    ReplyDelete
  30. halo..mas.. anang...top banget blog nya

    ReplyDelete
  31. Salam kenal mas, saya masih newbies banget soal scritp. Btw tutornya bermanfaat kok. Zzzzzzzzz

    ReplyDelete
  32. Misalkan yang sangat sederhana sekali yaitu memberikan warna huruf yang berbeda, sebagai contohnya warna dari isi komentar pemilik blog akan Yeeaaaah

    ReplyDelete
  33. wah mas... buat wordpress gmn !?!?

    ReplyDelete
  34. Aku berhasil Mas... Akhirnya.... Dah lama aku bereksperimen gak bisa-bisa... Akhirnya.... Matur suwun mas Anang...

    ReplyDelete
  35. bos aku coba diblogku kok ga muncul perbedaan nya yach

    ReplyDelete
  36. piye mas.. uangeleee..
    error terus ki..
    coba cek ke blogku dong mas.. kasih kritikan biar bisa maju.. hehe

    ReplyDelete
  37. weleh...
    kaya gini toh?
    oke deh
    besok tak bikin kaya gini di blog
    *kalo inget*
    hahahahahaha....

    ReplyDelete
  38. kok gak bisa ya tipsnya..!! atau gak cocok ma templatenya....

    ReplyDelete
  39. di HTML aku susah nyari yang warnai tulisan mas,apa karna aku make XML ya

    ReplyDelete
  40. da aku buat mas tapi gak muncul tempat komentarnya dibawah posting mas

    ReplyDelete
  41. Akhhirnya.......................
    Segala sesuatu tentang blog dapet juga
    padahal sebelum mulai ngeblog dah sering disenggol
    Jangan bosan kalo ntar dirusuhin yo Mas?
    Lam kenal, telat!

    HERMAN

    ReplyDelete
  42. mas tolongin dong blogspot saya terjebak jadi gak menentu alias terkecoh info gak jelas dari informan amatir yang ngaku profesional. tapi aku yakin mas gak ya? ini lo mas saya minta info bwt daftar ke google: adsense, adsbrite, tla. apakah blog saya harus keren dulu apa blog yang masih bayi mas?

    ReplyDelete