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
- Login ke dashboard anda
- Masuk ke "TEMPLATE" lalu klik " Edit HTML " kemudian lihat bagis CSS ( kode yang berada diatas kode ]]></b:skin> atau </style> )
- 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.
- 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 ***/
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 ***/
Sumber : http://rivai-silaban.blogspot.com/2013/10/counter-comment-style.html
Author : coxelgokil | ACI BUDAYA
Anda telah membaca
artikel tentang : Cara Membuat Counter Comment Style Di Blog . Oleh Admin, Anda diperbolehkan mengcopy-paste atau menyebarluaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya. Terimakasih...
