WAbNUGvLAHrdRF6NGlR1ji9P0SE Cara Membuat Warna Kotak Komentar Admin Berbeda ~ hayeksaja.blogspot.com

Cara Membuat Warna Kotak Komentar Admin Berbeda

Maksud dari judul di atas adalah kita akan memberi warna serta border pada kolom komentar admin sehingga pengunjung dapat dengan mudah membedakan mana komentar admin dan mana komentar pengunjung lain. Warna kotak komentar yang berbeda ini akan terjadi saat kita berkomentar jika kita selaku admin blog telah sign in di Blogger.
Bila tertarik untuk mengaplikasikan trik ini pada template blog Sobat, silakan simak langkah-langkahnya di bawah ini.

1. Masuk ke akun Blogger Sobat.

2. Klik Rancangan > Edit HTML.

3. Klik Download Template Lengkap untuk berjaga-jaga kalau nanti terjadi kesalahan kita dapat dengan mudah mengembalikan template seperti semula.

4. Beri tanda centang di Expand Template Widget.

5. Cari kode ]]></b:skin>. Tekan Ctrl + F lalu isikan kode untuk mempercepat pencarian.

6. Copy kode di bawah ini lalu paste di atas kode tersebut.

.comment-body-author {
background: #fee6e6; /* Warna Background */
border:2px dotted #d31111; /*Border*/
margin:0;
padding:0 0 0 0px;
}
  • #fee6e6 merupakan warna untuk latar belakang, silakan ganti kode warnanya untuk mengubah warnanya.
  • 2px dotted #d31111 adalah border style dot dengan ketebalan 2 piksel dan berwarna #d31111. Silakan diubah sesuai keinginan Sobat.
7. Cari kode seperti di bawah ini.

<b:if cond='data:comment.authorUrl'>
              <a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'><data:comment.author/></a>
            <b:else/>
              <data:comment.author/>
            </b:if>
            <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>

          <dd class='comment-footer'>

8. Tambahkan kode:
<b:if cond='data:comment.author == data:post.author'>
<dd class='comment-body-author'>
<p><data:comment.body/></p>
</dd>
<b:else/>
di bawah kode:
<data:commentPostedByMsg/>  
          </dt>
dan kode </b:if> di bawah kode:
<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>
sehingga hasilnya menjadi seperti di bawah ini.

<b:if cond='data:comment.authorUrl'>
              <a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'><data:comment.author/></a>
            <b:else/>
              <data:comment.author/>
            </b:if>
            <data:commentPostedByMsg/>  
          </dt>
<b:if cond='data:comment.author == data:post.author'>
<dd class='comment-body-author'>
<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>
          <dd class='comment-footer'>

9. Klik tombol SIMPAN TEMPLATE.

4 comments:

Forester said...

bagus bnget gan,.. aku coba dulu yah.. ditunggu knjungan baliknya gan.. http://forester-untad.blogspot.com/

topSpot | Find your top spot here said...

Bagus nih tutorialnya bro. Kapan-kapan bakal saya coba deh. Kebetulan saya masih pakai script lain untuk kotak komentar. Thanks ya :)

lekitra said...

Bermanfaat banget cara nya sob
thanks!

otoriv.blogspot.com said...

mantap sekali, saya udah coba mas, dan berasil hehe, kjunngan baliknya ya otoriv.blogspot.com

Post a Comment

Related Posts Plugin for WordPress, Blogger...