Komentar Gaya Warna-warni ini mempunyai beberapa fitur seperti, Memberikan gaya latar warna pada nama, tombol Balas(reply), dan tanggal, dan mempunyai fungsi yaitu, jika latar berwarna orange berarti pengunjung, dan jika latar berwarna ungu muda berarti pemilik blog, dan sebagai pelengkap yaitu font.
Cara Menambahkan Gaya Warna-Warni Pada Komentar Blogger Dengan CSS
- Silahkan Masuk Ke Akun Blogger Anda.
- Setelah itu, Klik Menu Template, --> Simpan terlebih dahulu template anda, --> Setelah itu, Klik Tombol Edit HTML.
- Cari Kode ]]></b:skin> dengan menekan CTRL+F.
- Masukan Kode berikut ini diatas kode ]]></b:skin> :
<!-- Start Colorful Stylish Comments -->
@font-face {
font-family: 'Philosopher';
font-style: normal;
font-weight: 400;
src: local('Philosopher'), url(http://themes.googleusercontent.com/static/fonts/philosopher/v4/OttjxgcoEsufOGSINYBGLYbN6UDyHWBl620a-IRfuBk.woff) format('woff');
}
.comment .avatar-image-container {
border: 1px solid #B6B6B6;
max-height: 70px !important;
margin-top: -5px;
width: 70px !important;
position: relative;
z-index: 50;
}
.comment .comment-block {
margin-left: 75px !important;
}
.comment .comment-header {
background: none repeat scroll 0 0 #A9F5D0;
color: #333;
font-size: 15px;
font-weight: bold;
margin-left: 60px;
}
.comment .comment-header a {
color: white !important;
text-decoration: none;
}
.comment .comment-content {
background: none repeat scroll 0 0 #FEFFF9;
border-bottom: 2px solid #E6E6E6;
font-size: 14px;
margin: 0 0 30px;
padding: 5px 5px 10px 10px;
}
.comment .comment-actions a {
background: none repeat scroll 0 0 #DDD;
color: #333;
display: inline-block;
line-height: 1;
margin: 0 3px;
padding: 3px 6px !important;
text-decoration: none;
}
.comment .comment-actions a {
background: none repeat scroll 0 0 #DDD;
color: #333;
display: inline-block;
line-height: 1;
margin: 0 3px;
padding: 3px 6px !important;
text-decoration: none;
}
.comment-header cite {
background: none repeat scroll 0 0 #DF7401;
border: 1px solid white;
color: white;
padding: 2px 20px;
position: relative;
z-index: 99;
margin-left: -20px;
}
cite.blog-author {
background: none repeat scroll 0 0 #8181F7 !important;
}
.icon.blog-author {
display: none !important;
background: url("") no-repeat scroll 0 0;
margin-left: 90px;
width: 60px !important;
height: 60px !important;
position: absolute;
right: 5px;
bottom: 5px;
top: 10px;
}
.comment .comment-header {
color: #333;
font-size: 15px;
font-weight: bold;
}
.comment .avatar-image-container img {
border: medium none !important;
height: 70px !important;
width: 70px !important;
max-height: 70px !important;
max-width: 70px !important;
}
.comment .comment-actions a {
background: none repeat scroll 0 0 #DDD !important;
color: #333 !important;
display: inline-block !important;
line-height: 1 !important;
margin: 0 3px !important;
padding: 3px 6px !important;
text-decoration: none !important;
font-size:16px;
}
.comment .comment-actions a:hover {
background: #CCC !important;
text-decoration: none !important;
}
.comments {
font-family: 'Philosopher', arial, serif !important;
font-size: 1em;
color: black;
}
.comments .continue a {
display: block !important;
font-weight: bold !important;
padding: .5em !important;
color:#E34600;
font-size:16px;
}
.comments .continue a:hover {
color:#4D3123;
text-decoration:none;
}
.item-control {
display: none !important;
}
.comments .continue {
border-top: 2px solid transparent !important;
}
<!-- End Colorful Stylish Comments -->
- Kemudian, Klik Tombol Simpan Template.
Selamat Mencoba,
Salam Sukses,
Your-BelajarBLOG
Makasih Kang.
Salam Sukses,
Your-BelajarBLOG