Modifikasi Tampilan Pesan Komentar Blogger

Alhamdulillah bisa menyapa anda lagi dengan tutorial baru. Setelah beberapa hari kesempatan on line hanya sempat dan asyik utak-atik template, update sampai terlupakan, apalagi yang namanya blogwalking. Maka kali ini insyaAllah saya ingin mengetengahkan tutorial sederhana saja, seperti judul diatas, cara modifikasi tampilan pesan komentar blogger.

Tampilan default pesan komentar blogger sangat sederhana tanpa sedikitpun polesan dari aspek desain, nah bagi anda yang ingin memiliki pesan komentar yang berbeda anda bisa mencoba menembahkan beberapa property CSS untuk merubah background pesan komentar anda, juga jenis dan ukuran font dll. Sebagai contoh yang bisa anda kembangkan lagi seperti berikut:

Cara Modifikasi Tampilan Komentar Blogger

• Setelah login ke akun anda
• Pada dasbor  Klik Edit HTML ---> Proceed ---> Expand Widget Templates
• Klikk Ctrl+F dan cari kode berikut: <p><data:blogCommentMessage/></p>
• Lalu ganti dengan kode berikut: <div id='pra-comment'><data:blogCommentMessage/></div>

Biasanya kode <p><data:blogCommentMessage/></p> jumlahnya lebih dari 2, ganti semua kode tersebut.

• Klikk Ctrl+F dan cari kode ]]></b:skin>
• Tambahkan kode CSS berikut diatas kode ]]></b:skin>

#pra-comment{
position: relative; 
background:#F3C5C5;
width:100%;
padding:10px; 
font:normal 12px trebuchet ms; 
text-align:justify; 
border:3px solid #AD3000;
margin:0 10px 10px 0; 
margin-top: 10px; 
line-height: 1.3em; 
} 
#pra-comment::after, #pra-comment::before { 
top: 100%; 
border: solid transparent; 
content: " ";
height: 0; 
width: 0; 
position: absolute; 
pointer-events: none 
} 
#pra-comment::before { 
border-top-color: #AD3000; 
border-width: 15px; 
left: 10%; 
margin-left: -36px 
}
#pra-comment::after { 
border-top-color: #F3C5C5; /* Samakan dengan warna background */
border-width: 9px; 
left: 10%; 
margin-left: -30px
}

Anda masih dapat mengedit CSS diatas. Misalnya mengganti warna background, jenis dan ukuran font dll. Untuk mendapatkan kode warna anda bisa lihat disini

• Simpan template dan lihat hasilnya diblog anda

Demikian tutorial cara modifikasi tampilan pesan komentar blogger. Semoga bermanfaat. Good luck.

Mungkin anda juga bisa melihat tutorial cara modifikasi form komentar blogger dengan penggunaan CSS anda bisa menambahkan padanya background warna ataupun gambar. Cek out disini

• Tweet
• Share
• Share
• Share
• Share