Counter Comment Style

Counter comment style ini dapat mempercantik tampilan komentar blog anda, cara membuat counter comment style ini sangat mudah sebab anda hanya mendesign cssnya tanpa mengedit kode htmlnya. Counter comment ini berada tepat diatas aplikasi komentar halaman blog, coba anda perhatikan counter comment halaman blog ini, yang berada tepat diatas form komentar. Counter comment akan menampilkan jumlah dari semua komentar pada suatu postingan dihalaman tersebut. Tampilan standart dari counter comment ini hanya sebaris tulisan dan saya rasa kurang menarik, jadi ada baiknya kita modifikasi sedikit untuk menambahkan kesan bahwa halaman blog tersebut lebih elegan dan menarik. Untuk melihat contoh demonya silahkan lihat screenshotnya dibawah ini atau lihat tampilan counter comment pada halaman blog ini, diatas aplikasi komentar blog ini. Langsung saja menuju TKP dan simak cara memodifikasinya. 

Install Program CSS

1. Login ke dashboard anda
2. Masuk ke "TEMPLATE" lalu klik " Edit HTML " kemudian lihat bagis CSS ( kode yang berada diatas kode ]]></b:skin> atau </style> )
3. Cari kode #comments h4 atau sejenisnya. setelah ketemu ganti semua kode yang bersangkutan dengan kode #comments h4 pada template anda dengan kode CSS yang berada didalam spoiler dibawah ini.
4. Perhatikan kode CSS dibawah ini, yang perlu anda hapus kode pada template anda adalah kode yang sama dengan kode CSS dibawah ini, agar tidak memiliki 2 kode yang sama paa template anda, bila memang template anda tidak memiliki kode tersebut, langsung saja paste kode dibawah ini ke template anda.

/*****************************************
Name : Counter comment style
By : Rivai Silaban | Blog Design
Update : Senin, 14 Oktober 2013
******************************************/
#comments h4 {
padding : 10px;
line-height : 30px;
margin-left:20px;
}
#comments h4, .comments .comment-header, .comments .comment-thread.inline-thread .comment {
position : relative;
}
#comments h4, .comments .continue1 a {
position:relative;
padding:5px 10px;
color:#fff;
border-radius:10px;
width:200px;
font-family: Georgia;
text-align: center;
border:solid #444 3px;
}
#comments h4, .comments .user a, .comments .continue1 a {
font-size : 18px;
}
#comments h4, .comments .continue1 a {
font-weight : bold;
color : #EBEBEB;
font-family: Verdana;
text-shadow: 3px 1px 2px #000;
background-color: #0099FF;
font-size: 18px;
font-style: italic;
}
#comments h4:after {
content:"";
display:block;
position:absolute;
bottom:-20px;
left:80px;
width:0;
height:0;
border-width:0;
border-right-width:10px;
border-bottom-width:20px;
border-style:solid;
border-color:transparent #444;
}
#comments h4:before {
content:"";
display:block;
position:absolute;
bottom:-20px;
left:60px;
width:0;
height:0;
border:0;
border-right-width:30px;
border-bottom-width:20px;
border-style:solid;
border-color:transparent #0099FF;
}/*** Blog Design CSS and ***/