Cara Membuat Kolom Komentar Blogger Keren

Baca Juga

Cara Membuat Kolom Komentar Blogger Keren. 

Blogger sudah lama merilis threaded comment system yang merupakan fitur terbaru kolom atau kotak komentar di blog. Tampilannya simple.

Jika Anda ingin mengubahnya menjadi kolom komentar yang lebih menarik, mirip kotak komentar di blog Wordpress, maka lakukan langkah di bawah ini.

Demo tanpilannya seperti ini:

Berikut ini cara memasangnya:

1. Tema > Klik Edit HTML

2. Temukan dan ganti kode berikut ini

<b:include data='post' name='comments'/>

3. Ganti dengan kode berikut ini:

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

Jika kode no 2 ada dua kode, ganti dua-duanya.

4. Copas kode berikut ini di atas kode  ]]></b:skin> 

.comments {
  clear: both;
  margin-top: 10px;
  margin-bottom: 0px;
  line-height: 1em;
}
.comments .comments-content {
  font-size: 12px;
  margin-bottom: 16px;
font-family: Verdana;
font-weight: normal;
text-align:left;
line-height: 1.4em;
}
.comments .continue a, .comments .comment .comment-actions a {
display:inline;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
padding: 2px 5px;
text-decoration: none;
text-shadow:0 1px 1px rgba(0,0,0,.3);
color:#FFF;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,.2);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
margin-right: 10px;
border: 1px solid #3079ED;
background: #0066FF;
background: -webkit-gradient(linear, left top, left bottom, from(#0099FF), to(#009999));
background: -moz-linear-gradient(top, #0099FF, #009999);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#0099FF&#39;, endColorstr=&#39;#009999&#39;);
}
.comments .continue a:hover, .comments .comment .comment-actions a:hover {
  text-decoration: none;
background:#0099FF;
background: -webkit-gradient(linear, left top, left bottom, from(#009999), to(#0099FF));
background: -moz-linear-gradient(top, #009999, #0099FF);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#009999&#39;, endColorstr=&#39;#0099FF&#39;);
}
.comments .continue a:active, .comments .comment .comment-actions a:active {
position: relative;
top:1px;
background: -webkit-gradient(linear, left top, left bottom, from(#0066FF), to(#0099CC));
background: -moz-linear-gradient(top, #0066FF, #0099CC);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#0066FF&#39;, endColorstr=&#39;#0099CC&#39;);
}
.comments .comments-content .comment-thread ol {
  list-style-type: none;
  padding: 0;
  text-align: none;
}
.comments .comments-content .inline-thread {
  padding: 0.5em 1em 0 1em;
}
.comments .comments-content .comment-thread {
  margin: 8px 0px 0px 0px;
}
.comments .comments-content .comment-thread:empty {
  display: none;
}
.comments .comments-content .comment-replies {
  margin-top: 1em;
  margin-left: 40px;   font-size:12px;
}
.comments .comments-content .comment {
  padding-bottom:8px;
  margin-bottom: 0px
}
.comments .comments-content .comment:first-child {
  padding-top:16px;
}
.comments .comments-content .comment:last-child {
  border-bottom:0;
  padding-bottom:0;
}
.comments .comments-content .comment-body {
  position:relative;
}
.comments .comments-content .user {
  font-style:normal;
  font-weight:bold;
}
.comments .comments-content .user a {
  color: #444;
}
.comments .comments-content .user a:hover {
  text-decoration: none;
color: #555;
}
.comments .comments-content .icon.blog-author {
  width: 18px;
  height: 18px;
  display: inline-block;
  margin: 0 0 -4px 6px;
}
.comments .comments-content .datetime {
  margin-left:6px;
color: #999;
font-style: italic;
font-size: 11px;
float: right;
}
.comments .comments-content .comment-content {
font-family: Arial, sans-serif;
font-size: 12.5px;
line-height: 19px;
}
.comments .comments-content .comment-content {
font-family: Arial, sans-serif;
font-size: 12.5px;
line-height: 19px;
  text-align:none;
margin: 15px 0 15px;
}
.comments .comments-content .owner-actions {
  position:absolute;
  right:0;
  top:0;
}
.comments .comments-replybox {
  border: none;
  height: 250px;
  width: 100%;
}
.comments .comment-replybox-single {
  margin-top: 5px;
  margin-left: 48px;
}
.comments .comment-replybox-thread {
  margin-top: 5px;
}
.comments .comments-content .loadmore a {
  display: block;
  padding: 10px 16px;
  text-align: center;
}
.comments .thread-toggle {
  cursor: pointer;
  display: inline-block;
}
.comments .comments-content .loadmore {
  cursor: pointer;
  max-height: 3em;
  margin-top: 3em;
}
.comments .comments-content .loadmore.loaded {
  max-height: 0px;
  opacity: 0;
  overflow: hidden;
}
.comments .thread-chrome.thread-collapsed {
  display: none;
}
.comments .thread-toggle {
  display: inline-block;
}
.comments .thread-toggle .thread-arrow {
  display: inline-block;
  height: 6px;
  width: 7px;
  overflow: visible;
  margin: 0.3em;
  padding-right: 4px;
}
.comments .thread-expanded .thread-arrow {
  background: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAc AAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC&quot;) no-repeat scroll 0 0 transparent;
}
.comments .thread-collapsed .thread-arrow {
  background: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA AcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAAB JRU5ErkJggg==&quot;) no-repeat scroll 0 0 transparent;
}
.comments .avatar-image-container {
  float: left;
  overflow: hidden;
}
.comments .avatar-image-container img {
  width: 36px;
}
.comments .comment-block {
  margin-left: 48px;
  position: relative;
padding: 15px 20px 15px 20px;
background: #F7F7F7;
border: 1px solid #E4E4E4;
overflow: hidden;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-image: initial;
}

5. Save! Simpan Tempat!

Demikian cara Cara Membuat Kolom Komentar Blogger Keren sebagaimana gambar di atas.

Kotak Komentar Keren Lainnya

Berikut ini kode kolom komentar lainnya. Desainnya seperti ini.

Kode CSS
Copas kode berikut ini di atas kode  ]]></b:skin>

#comments-block{margin:15px 0}
#comments-block .comment-author{border-radius:4px 4px 0 0;background:rgba(0,0,0,0.03);padding:15px 15px 0}
#comments-block .comment-body{background:rgba(0,0,0,0.03);padding:30px 15px 25px;margin:0}
#comments-block .comment-body p{margin:0}
#comments-block .comment-footer{border-radius:0 0 4px 4px;background:rgba(0,0,0,0.03);padding:0 15px 15px;margin:0 0 20px;font-size:.88rem}
.comment-form{margin-top:20px}
#comments-block .avatar-image-container{display:inline-block;margin-right:4px;margin-bottom:-10px;background:#888;border-radius:17px}
#comments-block .avatar-image-container img{display:block}
p.comment-footer{display:inline-block;font-weight:700}
h4#comment-post-message{display:none;margin:0}
.comments{clear:both;margin-top:10px;margin-bottom:0}
.comments .comments-content{font-size:14px;margin-bottom:30px}
.comments .comments-content .comment-thread ol{text-align:left;margin:13px 0;padding:0;list-style:none}
.comment .avatar-image-container{background:rgba(0,0,0,0.03);border-radius:20px;float:left;max-height:36px;overflow:hidden;width:36px;height:36px;background-repeat:no-repeat;background-position:8px 7px}
.comments .avatar-image-container img{max-width:36px;border-radius:17px}
.comments .comment-block{background:rgba(0,0,0,0.03);position:relative;padding:20px;margin-left:45px;border-radius:10px;word-break:break-word}
.comments .comments-content .comment-replies{margin:10px 0;margin-left:45px}
.comments .comments-content .comment-thread:empty{display:none}
.comments .comment-replybox-single{margin:20px 0}
.comments .comment-replybox-thread{margin:20px 0}
.comments .comments-content .comment{margin-bottom:6px;padding:0}
.comments .comments-content .comment:first-child{padding:0;margin:0}
.comments .comments-content .comment:last-child{padding:0;margin:0}
.comments .comment-thread.inline-thread .comment,.comments .comment-thread.inline-thread .comment:last-child{margin:0 0 5px 14%}
.comment .comment-thread.inline-thread .comment:nth-child(6){margin:0 0 5px 12%}
.comment .comment-thread.inline-thread .comment:nth-child(5){margin:0 0 5px 10%}
.comment .comment-thread.inline-thread .comment:nth-child(4){margin:0 0 5px 8%}
.comment .comment-thread.inline-thread .comment:nth-child(3){margin:0 0 5px 4%}
.comment .comment-thread.inline-thread .comment:nth-child(2){margin:0 0 5px 2%}
.comment .comment-thread.inline-thread .comment:nth-child(1){margin:0 0 5px}
.comments .comments-content .comment-thread{margin:0;padding:0}
.comments .comments-content .inline-thread{margin:0}
.comments .comments-content .icon.blog-author{display:inline;height:18px;margin:0 0 -4px 6px;width:18px}
.comments .comments-content .icon.blog-author::after{content:"author";background:rgba(0,0,0,0.36);color:#fff;padding:2px 6px;border-radius:10px;font-size:11px}
.comments .comments-content .comment-header{font-size:14px;margin:0 0 15px}
.comments .comments-content .comment-content{margin:0 0 15px;text-align:left;line-height:1.6}
.comments .comments-content .datetime{margin-left:6px}
.comments .comments-content .datetime a{color:#707070}
.comments .comments-content .user{font-weight:700;font-style:normal}
.comments .comment .comment-actions a{display:inline-block;font-size:13px;line-height:15px;margin:4px 8px 0 0}
.comments .continue a{display:inline-block;font-size:13px;padding:.5em}
.comments .comment .comment-actions a:hover,.comments .continue a:hover{text-decoration:underline}
.pesan-komentar:not(:empty){padding:20px;background:#f9f9f9;margin-bottom:30px}
.deleted-comment{font-style:italic;opacity:.5}
.comments .comments-content .loadmore{cursor:pointer;margin-top:3em;max-height:3em}
.comments .comments-content .loadmore.loaded{max-height:0;opacity:0;overflow:hidden}
.comments .thread-chrome.thread-collapsed{display:none}
.comments .thread-toggle{display:inline-block}
.comments .thread-toggle .thread-arrow{display:inline-block;height:6px;margin:.3em;overflow:visible;padding-right:4px;width:7px}
.comments .thread-expanded .thread-arrow{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC) no-repeat scroll 0 0 transparent}
.comments .thread-collapsed .thread-arrow{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAABJRU5ErkJggg==) no-repeat scroll 0 0 transparent}
.comments .hidden{display:none}
@media screen and (max-device-width:480px) {
.comments .comments-content .comment-replies{margin-left:0}
}

Cara Menyembunyikan Tanggal Komentar

Untuk menghilangkan atau menyembunyikan tanggal komentar, ganti kode:

.comments .comments-content .datetime {  margin-left:6px;color: #999;font-style: italic;font-size: 11px;float: right;}

menjadi 

.comments .comments-content .datetime {display:none}

Kolom Komentar Blogger Terbaru

Template Blogger Versi 3 (Contempo, Soho, Emporio, dan Notable) memiliki kotak atau kolom komentar yang bagus, simple, keren. Berbeda dengan kolom komenta template Blogger versi 1 (classic theme) dan versi 2 (Simple dkk.).

Ini penampakannya.

Berikut ini cara memasang kotak komentar bawaan Blogger versi terbaru, tanpa harus ganti template secara keseluruhan.

1. Copas kode berikut ini di bawah kode <b:skin><![CDATA[ 

<!-- Variable definitions -->
<Group description="Komentar Baru Blogger (Contempo, Soho, Emporio, Notable)"> <Variable name="body.background" description="Body Background" type="background" color="#dddfe2" default="#dddfe2 none repeat scroll top left" value="#dddfe2 none repeat scroll top left"/> <Variable name="body.font" description="Font" type="font" default="normal 400 14px Roboto, Arial, sans-serif" value="normal 400 14px Arial,sans-serif"/> <Variable name="body.text.color" description="Text Color" type="color" default="#1d2129" value="#1d2129"/> <Variable name="body.text.font" description="1" type="font" default="$(body.font)" value="normal 400 14px Roboto,Arial,sans-serif"/> <Variable name="posts.background.color" description="2" type="color" default="#fff" value="#ffffff"/> <Variable name="body.link.color" description="3" type="color" default="#008c5f" value="#008c5f"/> <Variable name="body.link.visited.color" description="4" type="color" default="#008c5f" value="#008c5f"/> <Variable name="body.link.hover.color" description="5" type="color" default="#1d2129" value="#1d2129"/> <Variable name="blog.title.font" description="6" type="font" default="$(body.text.font)" value="normal 400 14px Roboto, Arial, sans-serif"/> <Variable name="blog.title.color" description="7" type="color" default="#fff" value="#ffffff"/> <Variable name="header.icons.color" description="8" type="color" default="#fff" value="#ffffff"/> <Variable name="tabs.font" description="9" type="font" default="$(body.text.font)" value="normal 400 14px Arial,sans-serif"/> <Variable name="tabs.color" description="10" type="color" default="#ccc" value="#cccccc"/> <Variable name="tabs.selected.color" description="11" type="color" default="#fff" value="#ffffff"/> <Variable name="tabs.overflow.background.color" description="12" type="color" default="#fff" value="#ffffff"/> <Variable name="tabs.overflow.color" description="13" type="color" default="$(body.text.color)" value="#1d2129"/> <Variable name="tabs.overflow.selected.color" description="14" type="color" default="$(body.text.color)" value="#1d2129"/> <Variable name="posts.title.color" description="15" type="color" default="$(body.text.color)" value="#1d2129"/> <Variable name="posts.title.font" description="16" type="font" default="$(body.text.font)" value="normal 400 14px Arial,sans-serif"/> <Variable name="posts.text.font" description="17" type="font" default="$(body.text.font)" value="normal 400 14px Arial,sans-serif"/> <Variable name="posts.text.color" description="18" type="color" default="$(body.text.color)" value="#1d2129"/> <Variable name="posts.icons.color" description="19" type="color" default="$(body.text.color)" value="#6c6f74"/> <Variable name="labels.background.color" description="20" type="color" default="#008c5f" value="#008c5f"/> </Group>

2. Cari dan ganti SEMUA kode:

data:post.commentFormIframeSrc 

dengan kode kolom komentar Blogger terbaru berikut ini:

data:post.commentFormIframeSrc appendParams {skin: "contempo"}

3. Save! Simpan Template.

Desain komentar lainnya silakan cari di kotak pencarian. Demikian juga jika ada masalah soal kolom komentar di blog Anda, silakan cari di search box. Happy Blogging! (www.contohblog.com).*