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

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

comment

• counter comment style
• cara membuat pesan komentar valid html5
• solusi kesalahan membuat pesan komentar diblog
• cara membuat counter comment diblog
• Cara membuat thread comment seo friendly
• Widget top komentator valid html5
• Cara membuat icon author comment
• Cara membuat pesan komentar di blogspot
• Cara mempercantik gambar komentar blog
• Cara membuat pesan komentar di blog

html

• fungsi mode html pada menu entri baru blogspot
• fungsi compose pada menu entri baru blogspot
• cara membuat box keterangan code
• fungsi float pada html
• fungsi style clear both
• fungsi margin pada html
• cara membuat style link type square
• cara membuat Image pseudo style
• cara membuat speech bubble style
• cara membuat Google Plus buttons style
• cara membuat Blockquote di blogspot

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