Untuk mendapatkan space iklan dihalaman ini silahkan hubungi owner Blog Design, Kami akan secepatnya merespon dan mempertimbangkan letak dari iklan text dan banner anda...

Monday, October 14, 2013

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.

counter comment style

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.... !!! .

Me

Admin Rivai Silaban

Share article with : Google+ Facebook Twitter
Di posting oleh : Unknown Update pada : 10:07 AM

7 comments :

  1. kode css-nya panjang banget ya mas :)

    ReplyDelete
    Replies
    1. tidak terlalu lah,
      css tersebut mencakup 3 fungsi tampilan comment, jadi panjang dikit heheheh..
      yang terpenting kodenya ringan sob :)

      Delete
    2. lagian bisa dikompres juga ya mas :)

      Delete
    3. wismakreatif mengucapkan

      Selamat Hari Raya Idul Adha...Mohon Maaf Lahir Batin :)

      Delete
    4. rata rata kode apat di compress, dan hal itu cukup bagus sob..

      Kami dari BLOG DESIGN juga mengucapkan

      Selamat Hari Raya Idul Adha...
      Mohon Maaf Lahir Batin .....

      buat teman, saudara yang merayakan hari yang berbahagia ini.

      Delete
  2. keren gan kapan2 ane coba ,., ane simpan dulu ya ^_^

    ReplyDelete

1. Komentar SPAM Akan secepatnya dihapus
2. Pastikan untuk " Berlangganan Lewat Email " untuk membangun kreatifitas blog ini
3. Cek komentar masuk sebelum bertanya.
4. Link aktiv tidak akan berpungsi.
5. Dilarang menyebarluaskan artikel tanpa persetujuan dari saya.
6. Untuk mengajukan pertanyaan diluar postingan diatas, silahkan klik " Forum Diskusi "
7. Bergabung dengan kami untuk menjadi member Klik " Join to Member "
8. Komentar yang mengandung code tag HTML, konversikan terlebih dulu silahkan klik " Konversi Kode "

Salam bloger .. !!
Pergunakan semua fasilitas di Blog ini untuk mempermudah anda..
Konversi Kode Forum Diskusi Join to Blog