Membuat Threaded Comment Unik dan Berwarna

Salam Blogger!
Sambil menunggu hujan berhenti Bang Kamplenk akan mebagikan postingan tentang "Membuat Threaded Comment Bertingkat, Unik dan Berwarna, Bagi sahabat yang sudah bosen dengan tampilan standar bawaan Blogspot cara ini bisa dijadikan alternatif, ikuti panduannya :
Pada dasbor klik Template --> edit HTML
Klik Ctrl+F dan cari kode ]]></b:skin>
Tambahkan kode CSS berikut diatas kode ]]></b:skin>

PENTING !!!
Threaded Comments ini hanya untuk tampilan Comments blog yang belum pernah diedit, bagi yang pernah menganti dan merubahnya anda harus mengembalikan dengan tampilan standar, caranya cari kode ini  <b:include data='post' name='comments'/>
Biasanya terdapat lebih dari dua, ganti semunya dengan :

<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>

Bila sudah dipraktekan lalu copast kode dibawah ini diatas kode ]]></b:skin>

Semoga Bermanfaat.



#comments {
padding:10px;
}
#comments h4{display:inline;padding:10px;line-height:40px}
#comments h4,.comments .comment-header,.comments .comment-thread.inline-thread .comment{position:relative}
#comments h4{background:#1aa1e2;}
#comments h4,.comments .user a,.comments .continue a{font-size:16px}
#comments h4,.comments .continue a{font-weight:normal;color:#fff}
#comments h4:after{content:"";position:absolute;bottom:-10px;left:10px;border-top:10px solid #1aa1e2;border-right:20px solid transparent;width:0;height:0;line-height:0}
h4#comment-post-message {
display:none;
}
#comments-block {
margin:1em 0 1.5em;
line-height:1.6em;
}
#comments-block .comment-author {
margin:.5em 0;
}
#comments-block .comment-body {
margin:.25em 0 0;
}
#comments-block .comment-footer {
margin:-.25em 0 2em;
line-height:1.4em;
text-transform:uppercase;
letter-spacing:.1em;
}
#comments-block .comment-body p {
margin:0 0 .75em;
}
.comment .avatar-image-container {
border:1px solid #B6B6B6;-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
max-height:60px;
margin-top:-10px;
width:60px;
position:relative;
z-index:70;
border:4px double #1aa1e2;- webkit-border-radius:100px;
-moz-border-radius: 100px; border-radius: 100px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4); 
box-shadow: 0 1px 3px rgba(0, 0, 0, .4); 
} 
.comments .comments-content {
padding:5px;
font-size:11px;
}
.comment .comment-block {
margin-left:75px !important;
min-height:84px;
text-align:left;
}
.comment .comment-header {
background:none repeat scroll 0 0 #5D974C;-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
color:#333;
font-size:12px;
font-weight:normal;
margin-left:60px;
}
.comment .comment-header a {
color:#fff !important;
text-decoration:none;
}
.comment .comment-content {
background:none repeat scroll 0 0 #FEFFF9;
border-bottom:2px solid #1aa1e2;
font-size:12px;
margin:0 0 30px;
padding:5px 5px 10px 10px;
text-align:left;
}
.comment .comment-actions a {
color:#860000;
display:inline-block;
line-height:1;
margin:0 3px;
padding:3px 6px !important;
text-decoration:none;
}
.comment-header cite {
background:none repeat scroll 0 0 #FD7000;-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
color:#fff;border: 2px solid white;
padding:2px 5px;
position:relative;
z-index:99;
margin-left:-20px;
}
cite.blog-author {
background:none repeat scroll 0 0 #490077 !important;-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
}
.icon.blog-author {
display:none !important;
background:url("") no-repeat scroll 0 0;
margin-left:90px;
width:60px !important;
height:60px !important;
position:absolute;
right:5px;
bottom:5px;
top:10px;
}
.comment .comment-header {
color:#333;
font-size:12px;
font-weight:bold;
}
.comment .avatar-image-container img {
border:medium none !important;
height:60px !important;
width:60px !important;
max-height:60px !important;
max-width:60px !important;
}
.comment .comment-actions a {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
background:none repeat scroll 0 0 #1aa1e2 !important;
color:#FFF !important;
display:inline-block !important;
line-height:1 !important;
margin-top:-10px !important;
margin-right:2px !important;
padding:3px 6px !important;
text-decoration:none !important;
font-size:14px;
}
.comment .comment-actions a:hover {
background:#860000 !important;
text-decoration:none !important;
}
.comments {
font-size:1em;
color:#000;
}
.comments .continue a {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
background:none repeat scroll 0 0 #04B404 !important;
color:#FFF !important;
display:inline !important;
line-height:1 !important;
margin-top:10px !important;
margin-right:2px !important;
padding:3px 6px !important;
font-size:13px;
}
.comments .continue a:hover {
background:#860000 !important;
color:#FFF;
text-decoration:none;
}
.item-control {
display:inline-block;
}
.comments .continue {
border-top:2px solid transparent !important;
}
#comment-editor {
width:103% !important;
}
.comment-form {
width:100%;
max-width:100%;
}
.comments .thread-toggle {
margin-bottom:10px;
}
.comments .comment-thread.inline-thread .comment {
margin:0 0 5px 15%;
}
C O D E

Related Posts:

  • Membuat Dynamic Social Bar tanpa Edit HTML Social Bar Salam Blogger! Pada kesempatan ini Bang Kamplenk akan mengshare tentang cara Membuat Widget Dynamic Social Bar keren, unik dan mudah digunakan, dalam penerapannya tidak perlu Edit HTML,dan tidak memberatkan load… Read More
  • Cara Membuat Tombol Demo pada Blog RIEFSAZBLOG. Pada kesempatan ini Bang Kamplenk akan mengshare tentang bagaimana cara membuat tombol Live Demo, widget ini sangat berguna bagi sobat yang blognya menampilkan tentang tutorial ataupun panduan seputar blo… Read More
  • Cara Membuat Artikel Terbaru, Terbaru Tanpa Edit HTML Update Article Salam Blogger. Bagi sobat yang ingin memperganteng Blognya dengan cara menambahkan Artikel Paling Baru bisa ikuti panduannya dibawah ini, Fungsi dan kegunanya yaitu mengetahui dan memudahkan pembaca dan pe… Read More
  • Koleksi Widget RSS Feed Subcription Terbaru 7 Pilihan RSS Salam Blogger. RIEFSAZBLOG. Assalamualaikum...Sebelumnya saya ucapkan Met Lebaran ya...Mohon Maaf kalau masih banyak kekurangan dan komentar yang belum saya jawab, maklum masih belajar. Dalam memperganteng… Read More
  • Cara Membuat Komentar Terbaru Bergaya Datar Recent Comments Terbaru Salam Blogger ! Pada kesempatan ini Bang Kamplenk akan mengshare cara membuat Recent Comments Terbaru, pada artikel sebelumnya saya juga pernah membagikan cara Membuat Recent Comment Bergaya Windo… Read More

2 komentar:

  1. terima kasih atas infonya. bagus artikelnya.. ijin tinggalkan jejak.

    BalasHapus
    Balasan
    1. Sama-sama Gan...Masih banyak yg lainnya ;)

      Hapus

Silahkan sobat tinggalkan jejak di bawah ini...NO.SPAM
Dengan Memberikan Komentar Secara Otomatis akan Mendapatkan Pagerank, Traffic dan Backlink.