Sunday, August 04, 2013

Tips Mengganti Desain Cool Threaded Comment buat Blogger


Kalian pasti bosen kan liat desain komenan blogger yang garing, gitu gitu aja dan ga keren..

Nih, ada desain keren buat kalian, para blogger yang pengen bikin kolom komenan menjadi cool, bergaya, dan elegan.

Check it out.

Pertama.

Masuk ke Edit HTML dulu bos.
Kalo masih belum tahu caranya. Pilih Template di Menu Blogger > Edit HTML



Kedua.

Kalo model komenan blog kalian masih too old, alias belum ada tombol Reply buat balas komenan, buat dulu biar ada tombol Reply nya. Ini kalo di kampung gua sering dikenal pake istilah Threaded Comment. Gimana caranya?

Temukan dulu kode ini (pakelah Ctrl + F)

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

Kemudian hapus tuh kode, dan ganti pake kode di bawah 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 kalian nemuin ada dua baris kode yang sama kaya di atas, ganti aja dua-duanya, oke?

Tapi kalo blogger kalian baru, alias sudah ada feature Reply di Comment, lewati aja langkah tersebut.

Ketiga.

Untuk mengubah desain kudet threaded comment kalian, jangan lewatkan langkah berikut ini.

Cari aja kode ]]></b:skin> di sono, kemudian tambahkan kode CSS panjang ini tepat di atasnya pas.


.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 #F50A0A;
background: #FF0000;
background: -webkit-gradient(linear, left top, left bottom, from(#FF7676), to(#D91212));
background: -moz-linear-gradient(top, #FF7676, #D91212);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF7676', endColorstr='#D91212');

}
.comments .continue a:hover, .comments .comment .comment-actions a:hover {
  text-decoration: none;
background:#FF7676;
background: -webkit-gradient(linear, left top, left bottom, from(#D91212), to(#FF7676));
background: -moz-linear-gradient(top, #D91212, #FF7676);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#D91212', endColorstr='#FF7676');
}

.comments .continue a:active, .comments .comment .comment-actions a:active {
position: relative;
top:1px;
background: -webkit-gradient(linear, left top, left bottom, from(#FF0000), to(#EB1414));
background: -moz-linear-gradient(top, #FF0000, #EB1414);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF0000', endColorstr='#EB1414');
}

.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("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAc AAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent;
}
.comments .thread-collapsed .thread-arrow {
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA AcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAAB JRU5ErkJggg==") 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;
}

Kemudian Save template-nya dan.. Voila! Tiba-tiba kolom komenan blog kalian udah jadi elegan banget.

Contoh jadinya bisa dilihat di kolom komenan di bawah ini.

Semoga bermanfaat! Kalo berhasil, komen bawah ini ya.

Related Articles

7 comments:

  1. aww, berhasil man!
    keren banget jadinya.
    sip, nice post

    ReplyDelete
  2. Replies
    1. muncule dadi yaopo? screenshot lah.. :)
      wes mbok ikuti step nya one by one?

      Delete
  3. Replies
    1. coba lagi.
      ada yg keliru kemarin, sekarang udah diperbarui kok

      Delete
  4. man,,,kalo mau komen pake fesbuk gmna???

    ReplyDelete