Cara Bikin Kolom Komentar Keren di Blogger

Kolom komentar pada web website online dapat menjadi pusat interaksi para pengunjung net web page Anda. Adanya kolom komentar memang baik. Hanya saja, tidak semua net web page benar-benar membutuhkan kolom komentar. Jika Anda menggunakan WordPress, fitur ini dapat Anda aktifkan maupun nonaktifkan sesuai keinginan. 

Bentuk Kolom Komentar 1

1. Tema > Klik Edit HTML

2. Temukan dan ganti kode berikut ini

3. Klik kode HTML lalu tekan ctrl + f

4. Copy pate kode berikut

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

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

6. 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;

}

7. Save dan Simpan 

Bentuk Kolom Komentar 2

1. 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}

}

2. 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}

3. Save dan Simpan 

4. Lihat hasilnya

Bentuk Kolom Komentar 3

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"}

4. Simpan dan Lihat Hasilnya