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.

Tags:

Luqman is a coder from Indonesia, 21 years old. He has special ability to convert warm milk into lines of code. He loves travelling, reading, good at beating his friends in table tennis too. Also he is a fan of AKB48, sometimes playing piano. He will get his bachelor degree in Computer Science from Institut Teknologi Bandung, soon.

Related Articles

7 comments:

  1. ainun atiqohWednesday, August 07, 2013 2:45:00 am

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

    ReplyDelete
  2. Mustapha IbrahimSaturday, August 10, 2013 10:29:00 am

    asem, rak iso, kae kode template sopo?

    ReplyDelete
    Replies
    1. Luqman ArifinMonday, August 12, 2013 12:38:00 pm

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

      Delete
  3. Mustapha IbrahimMonday, August 19, 2013 11:56:00 am

    hah, langkah pertama wae wis rak iso.

    ReplyDelete
    Replies
    1. Luqman ArifinSunday, August 25, 2013 10:37:00 pm

      coba lagi.
      ada yg keliru kemarin, sekarang udah diperbarui kok

      Delete
  4. UnknownThursday, August 29, 2013 7:18:00 pm

    man,,,kalo mau komen pake fesbuk gmna???

    ReplyDelete