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 ***/

Kesimpulan

Counter comment style ini merupakan suatu modifikasi untuk mempercantik tampilan komentar pada halaman blog agar lebih elegan dan menarik.

Bila anda mengalami kesulitan dalam pemasangan kode CSS ini pada halaman blog anda atau menemukan kode yang error silahkan hubungi saya atau share bersama saya pada form komentar dibawah ini.

Counter comment style
Senin, 14 Oktober 2013
Owner Blog Design Rivai Silaban

Terimakasih atas kunjungannya,Bila anda suka dengan artikel ini silahkan JOIN TO MEMBER BLOG atau berlangganan geratis Artikel dari blog ini, daftarkan email anda pada form subscribe dibawah halaman . Pergunakan vasilitas diblog ini untuk mempermudah anda. Bila ada masalah dalam penulisan artikel ini silahkan kontak saya melalui kotak komentar yang ada dibawah atau gunakan fasilitas yang ada diblog ini untuk menghubungi saya.

Salam Blogger.... !!! .

Admin Rivai Silaban

Share article with : Google+ Facebook Twitter

Di posting oleh : Unknown Update pada : 10:07 AM