Modifikasi Pesan Komentar Blogger

Pesan Komentar blog adalah sebuah tulisan untuk menyampaikan pesan, tata cara dalam berkomentar, dan lain sebagainya. Pesan Komentar ini sudah terpasang oleh sebuah template, terletak diatas kotak komentar, namun pesan komentar ini hanya simple saja, tanpa adanya kode-kode yang menambahkannya.

Memodifikasinya adalah salah satu caranya, dengan memodifikasi pesan komentar ini anda dapat menentukan background dari sebuah pesan komentar, tampilan font, dan tentunya lebih stylish. Pesan Komentar ini dibuat dengan menggunakan kode CSS3 dan sedikit menggunakan HTML sebagai pelengkapnya. dilengkapi dengan anak panah untuk menunjukan pesan komentar, dan bayangan kotak. Ikutilah cara berikut ini untuk membuatnya:

• Silahkan masuk ke Blogger Anda.
• Setelah itu, Klik Menu Template, --> Simpan terlebih dahulu template anda, --> Klik Tombol Edit HTML.
• Cari Kode ]]></b:skin> dengan menekan CTRL+F.
• Masukan kode CSS3 berikut diatas kode ]]></b:skin> :

/* CSS3 Pesan Komentar YBB */

#YBB-comment{

position: relative; 

background:#E1E1E1;  /* background pesan komentar */

width:100%;

box-shadow: 5px 5px 5px #CCCCCC;  /* Bayangan Pesan Komentar */

padding:10px; 

font:normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif;  /* font dari pesan komentar */

text-align:justify; 

border:3px solid #717171;  /* Garis Batas pesan komentar */

margin:0 10px 10px 0; 

margin-top: 10px; 

line-height: 1.3em; 

} 

#YBB-comment::after, #YBB-comment::before { 

top: 100%; 

border: solid transparent; 

content: " ";

height: 0; 

width: 0; 

position: absolute; 

pointer-events: none 

} 

#YBB-comment::before { 

border-top-color: #717171;  /* Anak Panah pesan komentar samakan dengan garis pembatas */

border-width: 15px; 

left: 10%; 

margin-left: -30px 

}

#YBB-comment::after { 

border-top-color: #E1E1E1;  /* Anak Panah pesan komentar samakan dengan background */

border-width: 9px; 

left: 10%; 

margin-left: -24px

}

• Setelah itu, cari kode <p><data:blogCommentMessage/></p> dengan menekan CTRL+F.
• Ganti dengan kode berikut <div id='YBB-comment'><data:blogCommentMessage/></div> .

Catatan :
Jika kode <p><data:blogCommentMessage/></p> ada dua ganti kedua kode tersebut.

• Kemudian, Klik Tombol Simpan Template.

Selamat Mencoba,

Salam Sukses,

Your-BelajarBLOG