CSS Style untuk thread komentar default template blogger Keren
Saat ini banyak sekali pengembang template blogger membuat custom style untuk tread komentar di blogspot yang keren keren.Mereka kebanyakan menambahkan code javascript untuk membantu agar tampilan menjadi unik dan efeks yang variatif.Tentunya hal ini akan menjadi semakin menarik untuk dilihat visitor karena memang berkesan unik.
Namun sebenarnya kita cukup bereksplore dengan hanya menambahkan code CSS saja untuk membuat gaya komentar tread yang unik.Nggak perlu menggunakan javascript,ini khusus untuk saya yang begitu kurang suka dengan banyak menggunakan JS pada template.Karena pada dasarnya template XML blogger itu kebanyakan menggunakan Javascript untuk memunculkan fungsi tertentu.Kalau masih harus ditambahin fungsi JS lain lagi,saya khawatir load time akan semakin lemoooot.....
Ini Beda dengan WP yang bisa menggunakan PHP untuk nambahi banyak fitur lain lagi.


Baiklah,jika kamu ingin suasana komentar treaded blogger yang unik dan keren,cukup hanya menambahkan code CSS saja dan tanpa Javascript.Dijamin pasti tambah keren tuh blognya,,,,

Namun syaratnya template blgospot kamu harus menggunakan fungsi thread comment default,alias masih murni dan resmi dari template blogger.
Namun coba kamu pasang saja pada template Kamu,kalau memang template kamu sudah di modif maka CSS ini mungkin nggak akan berguna.Karena hanya menambahkan CSS saja,maka jika memang nggak fungsi hanya tinggal meremovenya kembali.Jadi jangan kuatir template kamu akan menjadi berantakan,kalau masih kuatir maka bikinlah bekupnya..

Tips:Fitur Tread komentar biasanya digunakan oleh template blogger standard,dan fitur ini bisa Kamu comot untuk menggantikan fitur tread komentar template kamu jika sudah dimodif.
Pastikan Tread komentar template kamu masih default/standar blogger,agar bisa berfungsi.

Cara Penggunaan:


 <b:includable id=iframe_comments var=post>



<b:includable id=threaded_comment_css>
<STYLE>
#comments h4{
background:#fff url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCFhwhXHjna_CMsX67KEItk4KXcSCMKUalnY46OZpiw7mL2uQTr7hnqR4LH1JkyZ-Ijkk3uN1CciFAVcjYKKprC5heqR5uaBTkpGkq2A1rKi2e9-AT3CFBjG5rDVjRxd9Be88_L4lRyok/s1600/icon_comments.gif") no-repeat 3px .3em;
width:550px;
margin:.1em 0;
font-size:12pt;
font-weight:normal;
line-height:1.5em;
letter-spacing:0.1em;
color:#111;
padding-left:25px;
border-left: 1px solid #ccc;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin: 10px 0 10px 0;
behavior: url(http://fetchak.com/ie-css3/ie-css3.htc);
}
.iframe-comment {
background:#f5f5f5;background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(1, #f5f5f5));background:-moz-linear-gradient(top, #fff, #f5f5f5);
padding:6px 5px 5px;
border: 1px solid #ccc;
float: right;
position: relative;
top: -8px;
height: 25px;
cursor: pointer;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
behavior: url(http://fetchak.com/ie-css3/ie-css3.htc);
}
.comments {
clear: both;
margin-top: 20px;
margin-bottom: 0px;
line-height: 1em;
border: 1px solid #ccc;
padding:10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 0 0 3px #ccc;
-webkit-box-shadow: 0 0 3px #ccc;
box-shadow: 0 0 3px #ccc;
behavior: url(http://fetchak.com/ie-css3/ie-css3.htc);
}
.comments .comments-content {
font-size: 13px;
margin-bottom: 16px;
}
.comments .comment .comment-actions a {
float:right;
display: inline-block;
margin-left: 5px;
padding: 1px 6px;
border-right: 1px solid #C4C4C4;
border-top-color: #E4E4E4;
border-left-color: #E4E4E4;
color: #424242 !important;
text-align: center;
text-shadow: 0 -1px 0 white;
text-decoration: none;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
background: #EDEDED;
background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #E5E5E5) );
background: -moz-linear-gradient( center top, white 20%, #E5E5E5 100% );
font: 11px/18px sans-serif;
-webkit-border-top-left-radius: 15px;
-webkit-border-top-right-radius: 15px;
-moz-border-radius-topleft: 15px;
-moz-border-radius-topright: 15px;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
behavior: url(http://fetchak.com/ie-css3/ie-css3.htc);
}
.comments .comment .comment-actions a:hover {
text-decoration: none !important;;
background: #ccc;;
background: -webkit-gradient(linear,left top,left bottom,color-stop(.2, #eeeeee),color-stop(1, #cccccc));;
background: -moz-linear-gradient(center top,#eeeeee 20%,#cccccc 100%);;
text-decoration: underline;
-webkit-border-top-left-radius: 15px;
-webkit-border-top-right-radius: 15px;
-moz-border-radius-topleft: 15px;
-moz-border-radius-topright: 15px;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
}
.comments .comments-content .comment-thread ol {
list-style-type: none;
padding: 0;
text-align: left;
}
.comments .comments-content .inline-thread {
padding: 0.5em 1em;
}
.comments .comments-content .comment-thread {
margin: 8px 0px;
}
.comments .comments-content .comment-thread:empty {
display: none;
}
.comments .comments-content .comment-replies {
margin-top: 1em;
margin-left: 36px;
}
.comments .comments-content .comment {
margin-bottom:16px;
padding-bottom:8px;
}
.comments .comments-content .comment:first-child {
padding-top:16px;
}
.comments .comments-content .comment:last-child {
border-bottom:1px dashed #ccc;
padding-bottom:0;
}
.comments .comments-content .comment-body {
position:relative;
}
.comments .comments-content .user {
font-size: 14px;
color: #666666 !important;
text-decoration:none;
}
.comments .comments-content .icon.blog-author {
background-repeat: no-repeat;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEgAACxIB0t1+/AAAAAd0SU1FB9sLFwMeCjjhcOMAAAD+SURBVDjLtZSvTgNBEIe/WRRnm3U8RC1neQdsm1zSBIU9VVF1FkUguQQsD9ITmD7ECZIJSE4OZo9stoVjC/zc7ky+zH9hXwVwDpTAWWLrgS3QAe8AZgaAJI5zYAmc8r0G4AHYHQKVwII8PZrZFsBFkeRCABYiMh9BRUhnSkPTNCtVXYXURi1FpBDgArj8QU1eVXUzfnjv7yP7kwu1mYrkWlU33vs1QNu2qU8pwN0UpKoqokjWwCztrMuBhEhmh8bD5UDqur75asbcX0BGUB9/HAMB+r32hznJgXy2v0sGLBcyAJ1EK3LFcbo1s91JeLwAbwGYu7TP/3ZGfnXYPgAVNngtqatUNgAAAABJRU5ErkJggg==);
}
.comments .comments-content .datetime {
font-size: 10px;
color: #999;
text-decoration:none;
}
.comments .comments-content .datetime a {
float:right;
}
.comments .comments-content .comment-header {
margin:0 0 8px;
border: thin solid #E6E6E6;
background-color: #dff0fa;
padding: 5px;
}
.comments .comments-content .comment-content {
margin:0 0 8px;
padding: 5px;
border: thin solid #E6E6E6;
background-color: #F4F4F4;
line-height: 21px;
}
.comments .comments-content .comment-content {
text-align:justify;
}
.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 .continue {
cursor: pointer;
border: 1px solid #C4C4C4;
border-top-color: #E4E4E4;
border-left-color: #E4E4E4;
color: #424242 !important;
text-align: center;
text-shadow: 0 -1px 0 white;
text-decoration: none;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
background: #EDEDED;
background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #E5E5E5) );
background: -moz-linear-gradient( center top, white 20%, #E5E5E5 100% );
font: 11px/18px sans-serif;
behavior: url(http://fetchak.com/ie-css3/ie-css3.htc);
}
.comments .continue a {
display: block;
padding: 0.5em;
font-weight: bold;
}
.comments .continue a:hover {
text-decoration: none !important;;
background: #ccc;;
background: -webkit-gradient(linear,left top,left bottom,color-stop(.2, #eeeeee),color-stop(1, #cccccc));;
background: -moz-linear-gradient(center top,#eeeeee 20%,#cccccc 100%);;
}
.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,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAA DEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC&quot;) no-repeat scroll 0 0 transparent;
}
.comments .thread-collapsed .thread-arrow {
background: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAA DEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAABJRU5ErkJggg==&quot;) no-repeat scroll 0 0 transparent;
}
.comments .avatar-image-container {
float: left;
width: 36px;
max-height: 36px;
overflow: hidden;
border: 1px solid #DDD;
padding:2px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
behavior: url(http://fetchak.com/ie-css3/ie-css3.htc);
}
.comments .avatar-image-container img {
width: 36px;
}
.comments .comment-block {
margin-left: 48px;
position: relative;
padding: 10px 10px 0px 10px;
background: #fcfcfc;
border: 1px solid #E4E4E4;
overflow: hidden;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
behavior: url(http://fetchak.com/ie-css3/ie-css3.htc);
}/* Responsive styles. */
@media screen and (max-device-width: 480px) {
.comments .comments-content .comment-replies {
margin-left: 0;
}
}
  </STYLE>
</b:includable>


Ini adalah widget yang sederhana, namun cukup efektif untuk sekedar meringkas bagian-bagian yang biasanya dianggap terlalu panjang atau terlalu lebar. Kamu bisa menggunakan widget ini untuk meletakkan foto, video, daftar teman atau apapun, yang menurutmu terasa sedikit mengganggu penampilan.


Untuk Contohnya sobat bisa lihat langsung pada postingan ini, perhatikan pada bagian Menu diatas.
Jika sobat berminat dan ingin membuatnya, ikuti langkahnya sebagai berikut :

1. Login ke akun Blogger sobat
2. Klik Perancangan >> Elemen Laman
2. Klik Tambah Gadget
3. Pilih HTML/Javascript
4. Masukan kode berikut :

<style type="text/css">
/*
Copyright April 2012 :: Muchtar a.k.a UTta
Visit: http://.blogspot.com/
*/
#panelutta {display:block;}
#panel {background-color:#CF4C23;border:2px solid #CF4C23;border-width:2px 2px 0 2px;overflow:auto;margin:0;padding:20px 15px 15px 15px;color:#111;
font:normal 12px "Consolas","Courier New",Courier,mono,serif;-webkit-box-shadow:inset 0 0 7px #222;-moz-box-shadow:inset 0 0 7px #222;box-shadow:inset 0 0 7px #222;display:none;}
.tombolpanel {position:relative;cursor:pointer;text-shadow:1px 1px 2px #000;padding:7px 15px;background-color:#333;border-top:3px solid #CF4C23;color:#e5e5e5;text-align:center;font:bold 14px Times,Sans-Serif;font-style:italic;-webkit-box-shadow:0 -1px 2px #222;-moz-box-shadow:0 -1px 2px #222;box-shadow:0 -1px 2px #222;-webkit-border-radius:0 0 14px 14px;-moz-border-radius:0 0 14px 14px;border-radius:0 0 14px 14px;}
.tombolpanel:hover {color:#ccc;}
.tombolpanel:after {content:;position:absolute;top:100%;margin-top:-10px;left:5%;width:0;height:0px;display:block;border-width:20px;border-style:solid;border-color:#333 #333 transparent #333;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
     $(.tombolpanel).click(function() {
          $(#panel).slideToggle(slow);
          $(.tombolpanel span.in).toggle();
     });
});
</script>
<div id="panelutta">
<div id="panel">

... ISI KONTEN DI SINI ...

</div>
<div class="tombolpanel">
<span class="in">Buka Panel</span>
<span class="in" style="display:none;">Tutup Panel</span>
</div>
</div>

5. Klik Simpan, dan lihat hasilnya. :D

KET ::
- Kode yang Saya beri warna hijau adalah JQuery. Sebelum menambahkan widget ini sebaiknya periksa dulu isi template anda. Jika template anda sudah dilengkapi dengan JQuery, maka buang kode tersebut dari widget.

Sobat juga bisa meng-otak-atik script sesuai kehendak sobat asalkan sobat mengerti. Semoga berhasil dan bermanfaat.