Menandai komentar admin dengan css

RC Blog - Buat sahabat blogger yang masih bertanya tanya tentang cara membuat tanda pada komentar admin untuk mempermudah pengunjung mencari mana komentar admin kali ini saya beri trik dan caranya.

blogger tidak memberikan ijin secara penuh untuk melakukan modifikasi penuh komentar admin, lalu bagaimana jika kita ingin membuat tampilan komentar yang berbeda pada blok komentar administrator secara keseluruhan? Dulu kita bisa menggunakan tag kondisional, tapi sekarang tidak lagi. 

jadi untuk lebih mudahnya kita akan menggunakan dan memanfaatkan css tanpa javascript...

oke langsung saja simak trik di bwah ini:

Pertama buka editor template blogger

cari kode tag berikut ini dalam template sobat...

<b:includable id='comments' var='post'>

lalu temukan kode di bawah ini dalam area tag komentar tersebut

12345<b:if cond='data:comment.authorUrl'>
  <a expr:href='data:comment.authorUrl' expr:title='data:comment.author' rel='nofollow' target='_blank'><data:comment.author/></a> 
   <b:else/>
  <data:comment.author/> 
</b:if>

setelah anda temukan, letakkan kode berikut ini di bawah kode di atas

1<span class='comment_author_flag'>RC Admin</span>

Kemudian, tambahkan kode ini di atas ]]></b:skin> atau </style>:

.comment_admin .comment_author_flag {display:inline;background:#AE1A29;font-size:13px;font-weight:normal;padding:2px 6px;margin-left:8px;color:#fff;border-radius:4px;text-transform:uppercase;letter-spacing:.1em}

untuk mengubah background komentar milik admin tambahkan kode css berikut ini di atas   ]]></b:skin> atau</style>:

1div.comment_inner.comment_admin {background:#394549;}

jika dalam template sobat sudah ada, ganti saja warnanya dengan tampilan warna yang anda suka dengan merubah nilai pada {background:#394549;}

sekarang tinggal lihat hasilnya...

demikian saja semoga berguna dan bermanfaat sob...

Read More

Membuat Pesan di atas Form Komentar Blogger

RC Blog - Ada beberapa pertanyaan dari sahabat, tentang bagaimana cara membuat atau memodifikasi kotak pesan di atas form komentar. Hal ini mungkin sudah sering terlihat pada blog-blog yang menyajikan tutorial blogger.

Membuat Pesan di atas Form Komentar - Isi dari pesan itu beragam, diantaranya Untuk memasukan kode, gunakan tag <i rel="code">KODE ANDA DISINI</i>, atau pun lainnya. Hasilnya akan tampak seperti gambar di bawah ini :

Untuk membuatnya, silahkan masuk ke Edit HTML pada template sobat. Sebelumnya silahkan backup dulu, untuk mengantisipasi kesalahan.

Langkah 1 : Cari kode <p><data:blogCommentMessage/></p> biasanya ada 4, cari yang ke 2 dan ke 4. Kurang lebih kodenya seperti ini :

<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>

tambahkan pada kode diatas :

<div id='threaded-comment-form'>
...kode di atas...
</div>

hasilnya kurang lebih seperti ini :

<div id='threaded-comment-form'>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
</div>

Lakukan langkah di atas, pada kode ke 2 dan ke 4. Kode ke-2 untuk memunculkan sebelum ada komentar, sedangkan kode ke 4 muncul setelah ada komentar pada postingan.

Langkah 2 : Cari kode :

document.getElementById(domId).insertBefore(replybox, null);

ganti dengan kode

document.getElementById(domId).insertBefore(document.getElementById('threaded-comment-form'), null);

Langkah 3 : Untuk mempercantik tampilan, tambahkan CSS di atas ]]></b:skin>

/* Modifikasi Pesan Komentar */#threaded-comment-form p {
    position: relative;
    background: #A82431;
    border: 5px solid #404040;
    padding: 10px;
    font-size: 13px;
    line-height: 1.6em;
    color: #fff;
    margin-top: 10px;
    font-size: 13px;border-radius:2px;
    }
#threaded-comment-form p::after, #threaded-comment-form p::before {
    top: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none
    }
#threaded-comment-form p::before {
    border-top-color: #404040;
    border-width: 15px;
    left: 10%;
    margin-left: -35px;
    }
#threaded-comment-form p::after {
    border-top-color: #404040;
    border-width: 10px;
    left: 10%;
    margin-left: -30px
    }
/* END Modifikasi Pesan Komentar */

Simpan Template.

Sampai di sini, kotak pesan sudah siap untuk diisi. Untuk mengisi pesan, masuk ke Dasboard -> Setelan -> Pos dan Komentar, klik Tambahkan.


Tulis pesan sobat pada kolom isian, kemudian klik Simpan Pesan di pojok kanan atas dasboard.

Semoga bermanfaat.

Read More