adsense link 728px X 15px

Thursday, June 24, 2010, 

Selain untuk mempercantik blog, fungsi dari Highlight author comments adalah untuk membedakan komentar antara visitor dan author (admin) blog. Jadi misalkan ada visitor yang bertanya, maka akan tampak jelas apabila author tersebut membalas atau memberikan jawaban kepada visitor. Dengan alasan demikian tutorial ini sangat mendukung untuk kotak komentar blog yang belum dilengkapi fasilitas Reply. Lebih jelasnya anda bisa melihatnya live demo pada blog ini atau bisa juga anda lihat DI SINI.

Berikut langkah-langkah untuk membuatnya.

  1. Login ke blogger.com
  2. Klik Rancangan
  3. Klik Edit HTML, kemudian beri centang pada Expand Widget Template
  4. Cari kode berikut

    ]]></b:skin>

    Copy kode di bawah ini lalu letakkan tepat di atas kode tadi.

    .owner-Body {
    background: #f6f6f6;
    margin-top: -7px;
    padding-left: 10px;
    padding-top: 10px;
    border-right: 1px solid #999;
    border-bottom: 1px solid #999;
    border-left: 1px solid #ccc;
    }
    .owner-Body p {
    margin: 0;
    padding-bottom: 15px;
    }

    * pada background, kode warna #f6f6f6 menentukan warna background komentar admin. Anda bisa menggantinya sesuai dengan keinginan anda
    * anda juga bisa menambahkan image pada kotak komentar admin dengan menambahkan kode berikut url(http://image anda) setelah kode warna (beri spasi)
  5. Kemudian cari kode berikut

    <data:commentPostedByMsg/>
    </dt>
    <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>

    Copy kode di bawah ini kemudian sisipkan pada kode di atas

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

    </b:if>

    Penempatannya seperti ini

    <data:commentPostedByMsg/>
    </dt>

    <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>
  6. Klik Simpan

Sekarang anda buka blog anda dan berikan komentar pada blog anda sendiri dan bedakan dengan tampilan komentar sebelum anda menambahkan kode-kode di atas. Semoga bermanfaat dan happy blogging.... ^^,







33 Comments:

Masda said...  on  June 24, 2010 at 3:36 AM

Mau jadi Pertamax ah sekalian ngasih live demo :D (hasilnya seperti ini ;) )

admin said...  on  June 24, 2010 at 3:59 AM

Dulu pernah pake,tapi Templateku yg ini agak rewel . . Ntar tk coba lagi ah

admin said...  on  June 24, 2010 at 5:27 AM

thanks 4 tips.. good posting bro. inovatif :)

gayuh said...  on  June 24, 2010 at 7:38 AM

makasih sharenya bro, aku langsung ketkp.. tapi aku masih mum,et sama kode kode

om rame said...  on  June 24, 2010 at 1:40 PM

dari tadi manteng disiniii... beLajar utak-atik border, yang itu aja beLum LuLus eh udah nonghoL tutor barunya nih. buat PR duLu aja deh, hehehe...

andi bacil said...  on  June 24, 2010 at 4:21 PM

Nice info...ntar dicoba ah...

om rame said...  on  June 24, 2010 at 4:46 PM

baLik Lagih om, tadi Lupa beLum ngucapin seLamat beraktifitas dan lam suskes seLaLu.

Refline said...  on  June 24, 2010 at 5:08 PM

thanx bgt kang. . . Sy coba ya, skalian sy follow

axc said...  on  June 25, 2010 at 2:29 AM

makasih infonya mas

Amdhas said...  on  June 25, 2010 at 3:54 AM

saya mau borong komentar di sini..soalnya baru up date..izin baca dulu

berita untuk negri said...  on  June 25, 2010 at 3:55 AM

waduh html saya dah ganti,,saya juga lagi ngakalin ini..tapi ga bisa,,tapi akan saya coba lagi sob..makasih sudah berbagi

hendro-prayitno said...  on  June 25, 2010 at 3:58 AM

kira2 kalau buat css3 bisa ganti owner jadi embed ga sob?
soalnya pas ke w3c salah terus parsingnya sampai 70 point

om rame said...  on  June 25, 2010 at 6:54 AM

nanti maLem ijin begadang Lagi disiniii... yah om.
kaLo ada kendaLa mohon, nanti saya nanya toLong dijawab yah om. semoga tidak.

om rame said...  on  June 25, 2010 at 6:59 AM

baLik Lagi tadi Lupa mau tanya, yang "akoey's bLog" masih satu admin juga yah om?. saya baru tau nih.
keren-keren juga Loh informasinya.

Umy Diary said...  on  June 25, 2010 at 7:52 AM

brada,,, nggak bakalan berAT YA loadnya ?

Masda said...  on  June 25, 2010 at 7:53 AM

@all, sama-sama mas, makasih kunjungannya :)
@Hendro-Prayitno, walah saya juga masih belajar CSS3 mas, saya juga belum begitu paham CSS3,,, makasih kunjungannya,
@Om_Rame, silakan Om kalo mau bertanya, akan saya bantu sebisa saya...:)
blog yang Om maksud lain punya saya Om, blog saya cuman ini saja, saya juga barusan berkunjung kesana, :)
btw foto profilenya juga g sama :D

Masda said...  on  June 25, 2010 at 7:58 AM

@Umy Diary, yah seperti apa yang mbak lihat pada blog saya, :) terima kasih kunjungannya...

arfi said...  on  June 25, 2010 at 4:22 PM

aku udah pernah nyoba sob.. tapi tetep aja gagal.. huhuhu..ilmu HTML masih kacau nih,,,,

Belajar SEO Blogspot said...  on  June 25, 2010 at 5:51 PM

iya bro masda, saya uda pernah nyoba, cukup berguna untuk membangun diskusi dengan pengunjung ;)

penghuni60 said...  on  June 25, 2010 at 11:29 PM

ijin aku save ya kodenya tar mo diplajari
thnks

Science Box said...  on  June 25, 2010 at 11:30 PM

numpang lewaaaaaat.... hehe... :))

om rame said...  on  June 26, 2010 at 12:34 AM

barusan coba tutor ini beLum berhasiL juga nih om, mungkin penempatannya kode scripnya kurang tepat kaLi yah.

Masda said...  on  June 26, 2010 at 1:33 AM

@om_rame, kode pada point 5 sama g om? Ato ada tambahan kode lainnya setelah kode
<data:commentPostedByMsg/>
kalo emang ada penyisipan kodenya tetap di bawah
</dt>

TSM said...  on  June 26, 2010 at 2:19 AM

udah berhasil sob.....:X , tapi coba pake backround image masih gagal, udah d praktekin lom sob???

suranegara said...  on  June 26, 2010 at 3:51 AM

Gan, kalau ada posting cara buat custom feedburner form yo.. ntar ane ngomen yang pertamax dah... :D

Tips Komputer | Tips SEO | Tips Blogger said...  on  June 26, 2010 at 5:22 AM

saya mau coba sobat, tapi belum terlalu jelas ngerti magsudnya he..he..he, bisa dijadikan tambahan Tips SEO nie

TUKANG CoLoNG said...  on  June 26, 2010 at 6:03 AM

aku save dulu deh ntar aku praktekin. Oia aku juga sebenernya butuh tutorial nambahin fasilitas replay kayak yang ada di wordpress ke blogspotku. tau caranya?

Umy Diary said...  on  June 26, 2010 at 9:37 AM

UMY BErkunjung

om rame said...  on  June 26, 2010 at 5:56 PM

meLanjutkan obroLan aja.
oh yah, untuk bLog akoey, mohon maaf saya saLah kira.

mengenai tutor kaLi ini, semaLam sudah saya coba pada tempLate teman saya dengan hasiL yang memuaskan. tapi kaLau di tempLate saya masih terkendaLa dengan scrip yang agak berbeda, jadi mungkin ada kesaLahan pada peLetakan scripnya.
mengenai upLoad tempLate, biar om saya masih bersemangat untuk mencobanya sendiri nanti kaLau sudah mentok baru deh diserahkan ke om_mazda. semoga tidak mengaLami kendaLa yang berarti. makLumLah beLajarnya secara otodidak jadi masih sangat merayap, maLah kaLo Lupa ngebackup suka pada Lupa. hehehe...

seLamat berakhir pekan aja yah om, saLam sehat seLaLu.

elok langita said...  on  June 26, 2010 at 7:59 PM

tutornya jelass.. gampang dimengerti.. langsung praktek :D

Cerita aja said...  on  June 26, 2010 at 9:34 PM

wah bagus, ntar nyoba aah. salam kenal yaa

Rizkyzone said...  on  June 28, 2010 at 4:20 AM

keren sob blog q juga dah aq pasang

Anonymous said...  on  June 28, 2010 at 8:38 PM

asslm
postingy bgus nti coba dewh..
tp atu~atu ja dlu
lawong yg td ja lum rmpung hehehe
wt PR ja yah . . . nti tlong dbntu
met lunch break ja deh...

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

Post a Comment

 

It's Me

My Photo
Masda
Seorang blogger "KOTA GADIS" yang selalu penasaran dengan sesuatu hal yang baru. Belajar, belajar, dan terus belajar serta berusaha untuk menerapkannya. Karena menurut saya "Ilmu itu untuk diterapkan bukan untuk dipelajari".

Facebook Twitter
View my complete profile

Exchange Link

MasdaZine

Followers