Posted by : Karta_Jaya

Hai sobat blogger! sungguh hari yang sangat melelahkan hari ini. Kenapa? karena saat saya menulis artikel ini koneksi internet sempat terganggu di dunia Kampus Hijau. Akhirnya proses pengeditan sempat terganggu. Tapi tidak lama kemudian koneksinya sudah bisa jalan sehingga saya bisa memberikan tips ini kepada teman/sobat blogger semua.
Seperti biasa, saya ingin memberikan tips blog kepada teman-teman di sini, yang pasti setiap anda mepraktekkan tips yang saya berikan jangan lupa berkomentar yah....Soalnya komentar anda sangat bermanfaat buat perbaikan blog ini.
Huuuhhhhh....jadi ngawur yah ceritanya!. Tenang saja, itu sebuah refleksi buat hari ini. Oke langsung saja kita kepada pokok permasalahan yah. Membuat Tampilan Komentar Pemilik Blog Berbeda adalah sebuah tips yang lumayan rumit. Apalagi kalau kode-kode yang terdapat dalam tips ini tidak ada dalam script HTML blog kita, sungguh menyesalkan bukan?. Tapi tenang saja mudah-mudahan dengan tips ini, tampilan komentar blog anda berbeda dari pengunjung blog anda. Aminnnn


Tidak usah berpanjang lebar, langsung saja kita ke langkah-langkah cara membuatnya.

Langkah Pertama

1. Login ke blogger dengan Akun kamu
2. Setelah anda berhasil masuk, pilih Rancangan
3. Pilih Edit HTML, kemudian kamu cari kode seperti ini
<dd class='comment-body'>
4. Jika sudah ketemu, tambahkan script ini di atasnya
<b:if cond='data:comment.author == data:post.author'>
<dd class='comment-body-author'>
<p><data:comment.body/></p>
</dd>
<b:else/>
5. Kemudian cari kode penutup dd (perhatikan kode berwarna hijau)
<p><data:comment.body/></p>
</b:if>
</dd>
6. Jika sudah ketemu, tambahkan kode penutup b:if ini di bawahnya
</b:if>
 Langkah Kedua

1. Carilah kode css untuk comment-body kemudian letakkan kode berikut ini tepat di bawahnya
.comment-body {
atribut perintah pada comment-body
}

.comment-body-author {
atribut yang sama dengan atribut pada comment-body
color:#333333; /* warna huruf */
background:#F6F6F6; /* warna latar */
}
Ganti tulisan .comment-body  menjadi  .comment-body-author.

>> Jika tidak ada, buatlah kode css untuk comment-body-author
yang diletakkan di atas ]]></b:skin> (sebaiknya ditempatkan pada deretan kode css untuk comments) seperti berikut:
.comment-body-author {
margin:0px;
padding:5px;
color:#333333; /* warna huruf */
background:#F6F6F6; /* warna latar */
border: 1px solid #CCC; /* warna bingkai */
border-radius:7px;
-moz-border-radius:7px;
-webkit-border-radius:7px;
}
Pada kode CSS di atas menggunakan peritah border radius. Kamu bisa menghapusnya jika mau.
> Kemudian aturlah margin. padding, color, backgroun, dan bordernya sesuai keinginan anda.

*Selanjutnya cari kode css untuk comment-body p. lalu ubah menjadi comment-body p, comment-body-author p tanpa mengubah atribut yang ada. 
.comment-body p, comment-body-author p {
atribut perintah pada comment-body p
}
*jika tidak ada, buatlah kode css untuk comment-body-author, seperti ini:
.comment-body-author p {
margin:0px;
padding:10px;
}
*Atur margin dan padding sesuai keinginanmua
*Jika sudah selesai, silahkan Simpan Template  

{ 4 komentar... read them below or Comment }

  1. Ribet, tapi Berhasil,
    Thanks Infonya....

    BalasHapus
  2. @All : Memang semua kode HTML/CSS dari setiap template blog itu berbeda-beda. Jadi mohon maaf jika tutorial ini tidak bisa berjalan pada blog sobat blogger. Mungkin kode template blog sobat berbeda.
    @Yurillah : Selamat yah...semoga blognya makin kere...
    Thank sudah berkunjung ke blog saya. (Jkt/2012)

    BalasHapus
  3. makasih ya tipnya... kunjungi balik ya..

    BalasHapus

Tukaran Link Yooo...Silahkan Masukkan Nama dan URL Blog Kamu di Dalam Kotak di Bawah Ini. Silahkan Konfirmasi Saya di HUBUNGI KAMI untuk Melakukan Link Balik ke Blog Anda. Terima Kasih

Terima Kasih Telah Bertukaran Link Dengan Kami. Secepatnya Akan Kami Link Balik

Welcome to My Blog

Blog Archive

Tips Blog


Silahkan Anda Baca Artikel Kami, Jangan Lupa Tinggalkan Jejak Anda di Kolom Komentar.





Page Rank Checker Logo Forantum I Blogging Is My Life Photobucket Blogger Help Templates Widgets SEO Tips aRvaNs Site's WAHYOKU BLOG

Jika Sobat Menghapus Link TTB dari blog sobat, maka TTB-pun akan Berbuat hal yang sama. Adil kan?




Silahkan Anda Klik Salah Satu Link Iklan Di Atas


Widget Blog


Silahkan Anda Baca Artikel Kami, Jangan Lupa Tinggalkan Jejak Anda di Kolom Komentar.


- Copyright © TIPS dan TRIK BLOG -Robotic Notes- Powered by Blogger - Designed by Johanes Djogan -