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

Sunday, September 29, 2013

style thread komentar blogger

Style komentar untuk jenis thread comment ini valid html 5 dan CSS 3, cara membuat style thread komentar blogger valid html 5 kali ini hanya mengandalkan editan CSS untuk merubah suatu tampilan sistem komentar blogger agar memiliki tampilan lebih menarik. Pada postingan kali ini saya kita hanya mengandalkan design CSSnya tanpa merubah code tag html dan script thread commentnya, Jadi sangat cocok untuk halaman blog yang memang sistem thread commentnya belum di rubah atau dapat juga anda pergunakan untuk template responsive. Oke langsung saja menuju TKP dan simak penjelasan tutorial cara memasangnya dibawah ini, sekalian lihat demonya melalui link icon demo dan lihat screenshotnya dibawah ini.


Demo



style thread komentar blogger

Install Program CSS


  • Login ke dashboard anda
  • Masuk ke "TEMPLATE" lalu klik " Edit HTML "
  • Saran saya buat teman teman yang belum mengerti benar HTML silahkan download dulu tag XML Template anda untuk mencegah kesalahan Fatal.
  • Saatnya anda mencari code ]]></b:skin> 
  • Bila sudah silahkan ketemu cari code yang berurusan dengan #comment .comments, setelah ketemu semua hapus semua code tersebut sebab kita akan menggantikan code CSSnya agar tidak ada error CSS codenya.
  • Copy Code script CSS dibawah ini, pastekan diatas code ]]></b:skin> tadi atau bila template blog anda memakai </style> silahkan pastekan kode CSSnya tepat diatas </style> template anda.

/*****************************************
Name :Style Thread Comment Blogger
By : Rivai Silaban | Blog Design
Update : Minggu, 29 September 2013
******************************************/
#comments h4 {
display : inline;
padding : 10px 20px 10px 20px;
line-height : 60px;
}
#comments h4, .comments .comment-header, .comments .comment-thread.inline-thread .comment {
position : relative;
margin-left:50px;
}
#comments h4, .comments .continue1 a {
background: #0099FF;
}
#comments h4, .comments .user a, .comments .continue1 a {
font-size : 16px;
font-family: Georgia, "Times New Roman", Times, serif;
text-shadow: none;
font-style: italic;
}
#comments h4, .comments .continue1 a {
font-weight: bold;
color : #fff;
}
#comments h4:after {
content : "";
position : absolute;
bottom : -10px;
left : 10px;
border-top : 10px solid #0099FF;
border-right : 20px solid transparent;
width : 0;
height : 0;
line-height : 0;
}
.comments-content {background-color: #ccc;}
.comments .comment-block{
margin-left:0;
position:relative;
}
.comments .comments-content .user a{
margin-bottom:-3px;
color:#0000FF;
font-family: Georgia, "Times New Roman", Times, serif;
font-style: italic;
font-weight: bold;
font-size: 14px;
}
.comments .comments-content .icon.blog-author{ display:inline-block; float:left; margin:0px 70px 10px -10px;}
.comments .comments-content .icon.blog-author:before{ content:"Admin"; line-height:20px; position:absolute; top:5px; text-align:center; font-family: Georgia, "Times New Roman", Times, serif;
font-size: 16px;
color: #990000;
font-style: italic;
font-weight: bold;
text-shadow: 2px 1px 1px #999;}
.comments .comments-content .datetime{
font-size:10px;
line-height:10px;
display:block;
margin:-5px 10px 0 0;
}
.comments .comments-content .datetime a, .comments .comments-content .datetime a:hover{ color:#999; text-decoration:none}
.comments .avatar-image-container{
padding-left:0;
margin:5px 10px 5px 15px;
max-height:48px;
width:48px;
float:LEFT;
z-index:9;
}
.comments .avatar-image-container img{
max-width:44px;
width:44px;
border-radius:5px 5px 5px 0;
border:1px #000 ;
display:block;
}
.comments .comments-content .comment, .comments .avatar-image-container{ padding:4px;}
.comments .comments-content{ margin-bottom:10px}
.comments .comments-content .comment{margin:0 5px 0 40px}
.comments .comments-content .comment-content{padding:30px 10px 50px 10px;
margin:15px 0 -18px -25px;
position:relative;
background-color:#C1F2FF;
color:#333;
height:auto;
border-radius:3px;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
font-style: italic;
box-shadow: 0 0 2px #000;
border:solid #000000 1px;line-height:1.2em; }
.comments .comments-content .comment-content:before{
content:"";
width:0;
height:0;
position:absolute;
bottom:100%;
left:20px;
border-width:0 0 22px 22px;
border-style:solid;
border-color:transparent transparent #C1F2FF transparent;
}
.comments .comment .comment-actions a{
position:relative;
background-color:#000099;
color:#ebebeb;
margin:0 10px 0 -7px;
border-radius:3px 3px 0 0;
}
.comments .comment .comment-actions a, .comments .continue a{
font:bold 12px Arial,Helvetica,sans-serif;
padding:3px 10px;
text-align:center;
}
.comments .continue{
cursor:pointer;
display:none;
margin:0 10px 0 0;
background:#333;
width:50px;
float:right;
height:20px;
color:#fff;
border-radius:0 0 3px 3px;
}
.comments .continue a:hover, .comments .comment .comment-actions a:hover{ color:black; text-decoration:none}
.comments .comments-content .comment-thread{ margin:0; background-color:#FFF;}
.comments .comments-content .comment-replies{ margin-left:0; margin-top:0}
.comments .comments-content .comment-header{ position:relative; min-height:37px; line-height:37px; padding-left:10px}
.comments .thread-toggle{ cursor:pointer; display:none}
/* CSS End */

Bila anda ingin mengganti warna sesuai dengan tampilan halaman blog anda silahkan edit CSSnya.
Untuk style komentar blogger jenis yang lain silahkan kunjungi Design thread comment .



Kesimpulan

Style thread komentar blogger pada postingan kali ini valid html 5 dan CSS 3, dengan style gelembung akan menambahkan tampilan komentar halaman blog kesayangan anda lebih menarik.

Bila anda mengalami kesulitan dalam pemasangan style thread komentar blogger ini atau menemukan kode yang error silahkan hubungi saya atau share dengan saya di form komentar dibawah ini.

Style thread komentar blogger valid HTML 5 dan CSS 3
Minggu, 29 September 2013
Rivai Silaban | Blog Design

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 : 11:28 AM

15 comments :

  1. mas broe...gimana caranya buat halaman yg kaya mas brow ya..sya minta tunjuk ajarnya..
    saya telah banyak mencoba tapi tak berhasil.

    ReplyDelete
    Replies
    1. salam kenal sob..
      saya kurang memahami pertanyaannya sob, maksudnya buat halaman gimana sob..

      thx atas kunjungannya..

      Delete
  2. wih...panjang bener kodenya mas.
    saya simpen dulu deh, kapan2 saya coba.
    terima kasih ... :)

    ReplyDelete
    Replies
    1. tapi tidak terlalu sob, itu hanya code CSS jadi tidak berat sob..
      silahkan sob..

      Delete
  3. Bila di buat model begini akan lebih terlihat aktif web blognya ya Mas. Apalagi setiap komentar bisa langsung di jawab di bawahnya. Trims sharenya.

    Salam wisata

    ReplyDelete
    Replies
    1. sama sama sob, salam kenal dan thx kembali atas kunjungan dan pendapatnya...

      Delete
  4. mantap artikelnya mas
    idzin coba mas
    mas kq boleh saran saya verifikasi komentar dihilang z mas
    susah banget mas

    ReplyDelete
    Replies
    1. silahkan sob...
      Oh soal verifikasinya, bisa sob saya sudah non aktivkan biar teman teman yang lain juga tidak terlalu rumit berkomentar.

      thx atas saran dan kunjungannya salam bloger

      Delete
  5. Baru lagi nih Bang Rivai..? izin simak dan izin
    Terapkan di blog saya. terima kasih yah Bang Rivai

    ReplyDelete
  6. ane udah pasang tuh script ke blog ane tapi ga bisa juga th...
    malah ga bekerja bro :v

    ReplyDelete
    Replies
    1. coba dulu di cek bagian htmlnya mas bro terkadang penulisan kode #comments mau menjadi id=comment atau kekurangan huruf, sesuaikan id huruf dan class huruf pada template mas bro, memang terkadang para pembuat template blog sering mengganti tulisan devaultnya sehingga tidak berfungsi. kurang penulisan satu huruf saja akan tidak berpungsi mas bro...

      Delete

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