Cara Membuat Kolom Komentar Blogger Keren

Cara Membuat Kolom Komentar Blogger Keren. 

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:

Cara Membuat Kolom Komentar Blogger Keren

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.

Kotak Komentar Keren


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.

Kolom Komentar Blogger Terbaru

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).*

Thanks for reading Cara Membuat Kolom Komentar Blogger Keren | Labels: Desain Blog edit this post

13 komentar on Cara Membuat Kolom Komentar Blogger Keren

  1. Makasih saya berhasil mas, ilmu bermanfaat :)

    ReplyDelete
  2. kenapa yang saya gak berhasil ya gan ?... info dong gan

    ReplyDelete
  3. nyari artikel ini krna gatau kenapa pas cek komentar tiba-tiba kolom komentar blog saya hanya ada post komentar tulisan doang, dan juga gak bisa bales komen gitu. sedih. jadi kalo mau bales ya nulis di kolom komentar gitu.


    nah pas udah nyoba langkah-langkah diatas, gak berhasil mas. Yakin udah sesuai sama langkah-langkahnya.

    oya kode yang lama gak di hapus mas, gapapa gitu?

    ReplyDelete
    Replies
    1. Kode lama harus dihapus, biar gak bentrok

      Delete
    2. Nah, itu dia mas.. kalo kudu di hapus, dari mana ke mana yah mas. . :D

      Delete
  4. maaf mas, di template saya tdk ada kode ]]> lalu bagaimana ya?

    ReplyDelete
    Replies
    1. parsekan kode berikut ke blogcrowds: ]]></b:skin>
      maka begitulah bentuk kodenya. (]]></b:skin>)

      Delete

Contact Form

Name

Email *

Message *

Back To Top