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:
1. Silahkan masuk ke akun Blogger Anda.
2. Setelah itu klik Menu --> Template, --> Back-up dlu template anda --> Klik EDIT HTML
3. Cari Kode
]]></b:skin> dengan menekan CTRL+F untuk mempermudah pencarian
4. 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
}
5, Setelah itu, cari kode
<p><data:blogCommentMessage/></p> dengan menekan CTRL+F.
6. Lalu ganti dengan kode berikut
<div id='YBB-comment'><data:blogCommentMessage/></div>
Catatan :
Jika kode
<p><data:blogCommentMessage/></p> ada dua ganti kedua kode tersebut.
7. Kemudian, Klik Tombol Simpan Template.