Cara Modifikasi/costumize Blogger Thread Comment

Tweet

D-Copy Blog | Hai sahabat blogger semua, di sore yang mendung ini ( 14 Oktober 2012, 15:48) kita akan membahas bagaimana cara memodifikasi/costumize blogger thread comment. Mungkin jika Anda sering bermain main ke blog terkenal www.spiceupyourblog.com mungkin Anda akan melihat komentar blog tersebut akan sama seperti yang saya utarakan ini. Saya hanya mengcopy page source blog tersebut dan seperti dibawah ini contoh gambar commentnya :

Blogger Thread Comment Hack 1

-------------------------------------------------------------------------------

Blogger Thread Comment Hack 2

Saya memang suka menghack blog saya jadi apa salahnya saya berbagi ilmu kepada Anda. Sebelum melakukan tutorial hack ini, Anda harus menggunakan blogger thread comment seperti yang saya juga gunakan. Anda tidak mengerti apa itu blogger thread comment? Blogger thread comment adalah sebuah gaya komentar berbalas seperti gambar diatas dan yang sa juga gunakan.

Tahap Pertama, jika Blog Anda tidak memiliki fitur Blogger Thread Comments :

1. Terlebih dahulu backup template Anda
2. Masuk ke Menu Edit HTML, jangan lupa centang Expand Template Widget
3. Cari kode dibawah ini :

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

Keterangan :

• Kode diatas ada 3-4, ganti seluruhnya

    4.  Ganti kode (langkah 3) dengan kode dibawah ini :

<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>

    5.  Save Template Anda.

 Tahap Kedua, memodifikasi Blogger Thread Comments :

1. Masih pada langkah kedua diatas, lalu cari kode yang mirip seperti dibawah ini di template Anda :

#comments{overflow:hidden}
#comments h4{display:inline;padding:10px;line-height:40px}
#comments h4,.comments .comment-header,.comments .comment-thread.inline-thread .comment{position:relative}
#comments h4,.comments .continue a{background:#b6cfea}
#comments h4,.comments .user a,.comments .continue a{font-size:12px}
#comments h4,.comments .continue a{font-weight:normal;color:#fff}
#comments h4:after{content:"";position:absolute;bottom:-10px;left:10px;border-top:10px solid #b6cfea;border-right:20px solid transparent;width:0;height:0;line-height:0}
#comments .avatar-image-container img{border:0}
.comment-thread{color:#111}
.comment-thread a{color:#777}
.comment-thread ol{margin:0 0 20px}
.comment-thread .comment-content a,.comments .user a,.comments .comment-thread.inline-thread .user a{color:#b6cfea}
.comments .avatar-image-container,.comments .avatar-image-container img{width:48px;max-width:48px;height:48px;max-height:48px}
.comments .comment-block,.comments .comments-content .comment-replies,.comments .comment-replybox-single{margin-left:60px}
.comments .comment-block,.comments .comment-thread.inline-thread .comment{border:1px solid #ddd;background:#f9f9f9;padding:10px}
.comments .comments-content .comment{margin:15px 0 0;padding:0;width:98%;line-height:1em}
.comments .comments-content .icon.blog-author{position:absolute;top:-12px;right:-12px;margin:0;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSTnWmX772KOycqiNxI64uyX4Y6KLSo7pDY5gGABIJ5AumwNhzMYJ6sHNOq82yzoeX5bT0LzgAx96_XVjDw2lX_n1MEckDpi_07SyAij3Q-w9hNp032hgItUqpTYiTU0dHMssj6yD130s/s320/picresized_1338990142_comment-author-blue.gif338990142_comment-author-blue.gif);width:36px;height:36px}
.comments .comments-content .inline-thread{padding:0 0 0 20px}
.comments .comments-content .comment-replies{margin-top:0}
.comments .comment-content{padding:5px 0;line-height:1.4em}
.comments .comment-thread.inline-thread{border-left:1px solid #ddd;background:transparent}
.comments .comment-thread.inline-thread .comment{width:auto}
.comments .comment-thread.inline-thread .comment:after{content:"";position:absolute;top:10px;left:-20px;border-top:1px solid #ddd;width:10px;height:0px}
.comments .comment-thread.inline-thread .comment .comment-block{border:0;background:transparent;padding:0}
.comments .comment-thread.inline-thread .comment-block{margin-left:48px}
.comments .comment-thread.inline-thread .user a{font-size:13px}
.comments .comment-thread.inline-thread .avatar-image-container,.comments .comment-thread.inline-thread .avatar-image-container img{width:36px;max-width:36px;height:36px;max-height:36px}
.comments .continue{border-top:0;width:98%}
.comments .continue a{padding:10px 0;text-align:center}
.comment .continue{display:none}
#comment-editor{width:98%!important}
.comment-form{width:100%;max-width:100%}

    5.  Jika sudah ketemu kode yang mirip pada kode ditas di HTML blog Anda, ganti seluruh kode tersebut dengan kode dibawah ini :

Blogger Thread Comment Hack 1

/*Blogger Thread Comment D-Copy*/
#comments-block.avatar-comment-indent {margin: 2em 0 1.5em !important;position: relative;}
dl#comments-block {line-height: 1.5em;margin: 2em 0 1.5em !important;}
#comments-block .comment-author {background: none repeat scroll 0 0 #A9F5D0;color: #FFFFFF;font-size: 15px;font-weight: bold;margin-left: 60px;}
#comments-block .comment-author a, dl#comments-block dt.author-comment a {color: #FFFFFF;text-decoration: none;}
#comments-block .avatar-image-container {background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4hyphenhyphensmRi6YAVRenV2C4gfX6g7psu-FoJF4CsQUdHUz7G6hMgp4T2s2rKy3WRPccXUdIGUxkTUIEOnRBGNzqfPoFE_8JqWcZKhhSw71tNdbTByl0dIcOYXRVVbWY8YPVuineJtJHkEPT-kJ/s1600/Wide_Brush_64x64.png") no-repeat scroll center center #FFFFFF;border: 1px solid #B6B6B6;height: 70px !important;left: 0;margin-top: -10px;position: absolute;width: 70px !important;}
#comments-block .avatar-image-container img {border: medium none !important;float: right;height: 70px !important;width: 70px !important;}
#comments-block .avatar-image-container.avatar-stock img {border-width: 0;padding: 0;}
.commentauthorname {background: none repeat scroll 0 0 #DF7401;border: 1px solid #FFFFFF;color: #FFFFFF;padding: 0 20px;position: relative;z-index: 99;}
#comments-block .comment-body {background: none repeat scroll 0 0 #FEFFF9;border-bottom: 2px solid #E6E6E6;font-size: 14px;margin: 0 0 30px;padding: 5px 5px 20px 90px;}
#comments-block .comment-body p {margin: 0 0 0.75em;}
#comments-block .comment-footer {background: none repeat scroll 0 0 transparent;border: medium none;font-size: 12px;font-style: italic;font-weight: normal;margin: 0 5px;text-decoration: none;}
#comments-block .comment-footer a {color: #444444;text-decoration: none;}
#comments-block .naacomment {background: none repeat scroll 0 0 #E0ECF8;color: #FFFFFF;font-size: 15px;font-weight: bold;margin-left: 60px;}
#comments-block .naacomment a {color: #FFFFFF;text-decoration: none;}
#comments-block .naacomment {background: none repeat scroll 0 0 #E0ECF8;color: #FFFFFF;font-size: 15px;font-weight: bold;margin-left: 60px;}
#comments-block .naaperu {background: none repeat scroll 0 0 #8181F7;border: 1px solid #FFFFFF;color: #FFFFFF;padding: 0 20px;position: relative;z-index: 99;}
#comments-block  .naacommentbody {background: url("") no-repeat scroll right bottom #F9F9FC;border-bottom: 2px solid #E6E6E6;font-size: 14px;margin: 0 0 30px;padding: 5px 5px 20px 90px;}
#comments-block .naacommentbody p {margin: 0 0 0.75em;}
#comments-block .naacommentfooter {background: none repeat scroll 0 0 transparent;border: medium none;font-size: 12px;font-style: italic;font-weight: normal;margin: 0 5px;text-decoration: none;}
#comments-block .naacommentfooter a {color: #444444;text-decoration: none;} /* start */
.comment .comment-header{background: none repeat scroll 0 0 #A9F5D0;color: #333;font-size: 15px;font-weight: bold;margin-left: 60px;}
.comment .comment-header a {color: #FFFFFF !important;text-decoration: none;}
.comment .avatar-image-container {background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4hyphenhyphensmRi6YAVRenV2C4gfX6g7psu-FoJF4CsQUdHUz7G6hMgp4T2s2rKy3WRPccXUdIGUxkTUIEOnRBGNzqfPoFE_8JqWcZKhhSw71tNdbTByl0dIcOYXRVVbWY8YPVuineJtJHkEPT-kJ/s1600/Wide_Brush_64x64.png") no-repeat scroll center center #FFFFFF;border: 1px solid #B6B6B6;max-height: 70px !important;margin-top: -5px;width: 70px !important;position:relative;z-index:50;}
.comment .comment-block {margin-left: 75px;}
.comment .avatar-image-container img {border: medium none !important;height: 70px !important;width: 70px !important;max-height: 70px !important;max-width: 70px !important;}
.comment-header cite {background: none repeat scroll 0 0 #DF7401;border: 1px solid #FFFFFF;color: #FFFFFF;padding: 0 20px;position: relative;z-index: 99;margin-left:-20px;}
.comment .comment-content {background: none repeat scroll 0 0 #FEFFF9;border-bottom: 2px solid #E6E6E6;font-size: 14px;margin: 0 0 30px;padding: 5px 5px 10px 10px;}
.comment .comment-actions a{background: none repeat scroll 0 0 #DDDDDD;color: #333333;display: inline-block;line-height: 1;margin: 0 3px;padding: 3px 6px !important;text-decoration: none;}
.comment .comment-actions a:hover{background:#CCC;text-decoration: none !important;}
cite.blog-author {background: none repeat scroll 0 0 #8181F7 !important;;}
.icon.blog-author {display:none;background: url("") no-repeat scroll 0 0;margin-left: 90px;width:60px !important;height:60px !important;position:absolute;right:5px;bottom:5px;top:10px;}/* end */
a.backtotop{display: block;height: 54px;position: absolute;right: 20px;top: -6px;width: 70px;z-index:56;}
/*End Blogger Thread Comment D-Copy*/

Blogger Thread Comment Hack 2

/*Blogger Thread Comment D-Copy*/
#comments h4{ margin:1em 0;   font-weight:bold;   font-size:15px;   text-shadow:1px 1px 1px #ddd;   line-height:1.4em;   text-transform:uppercase;   letter-spacing:.2em;   color:$sidebarcolor}
#comments-block.avatar-comment-indent {
margin: 2em 0 1.5em !important;
position: relative;
}
dl#comments-block {
line-height: 1.5em;
margin: 2em 0 1.5em !important;
}
#comments-block .comment-author {
background: none repeat scroll 0 0 #A9F5D0;
color: #FFFFFF;
font-size: 15px;
font-weight: bold;
margin-left: 60px;
}
#comments-block .comment-author a, dl#comments-block dt.author-comment a {
color: #FFFFFF;
text-decoration: none;
}
#comments-block .avatar-image-container {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4ENhvhVPrhGMYb4eoLGUgvMEFgWyQwFshoGw5FsdhUOkPRpgF9EY6G_-WD6s4dhFLRePh_mbCKKn2rRp5Daq-CCtHyXxnPQIOpfTyvF1tkiO-qazIVaRAdq34aIMcK5PcUx856QzxbXvO/s1600/bbt-comment-avatar.png") no-repeat scroll center center #FFFFFF;
border: 1px solid #B6B6B6;
height: 70px;
left: 0;
margin-top: -10px;
position: absolute;
width: 70px;
}
#comments-block .avatar-image-container img {
border: medium none !important;
float: right;
height: 70px;
width: 70px;
}
#comments-block .avatar-image-container.avatar-stock img {
border-width: 0;
padding: 0;
}
.commentauthorname {
background: none repeat scroll 0 0 #DF7401;
border: 1px solid #FFFFFF;
color: #FFFFFF;
padding: 0 20px;
position: relative;
z-index: 99;
}
#comments-block .comment-body {
background: none repeat scroll 0 0 #FEFFF9;
border-bottom: 2px solid #E6E6E6;
font-size: 14px;
margin: 0 0 30px;
padding: 5px 5px 20px 90px;
}
#comments-block .comment-body p {
margin: 0 0 0.75em;
}
#comments-block .comment-footer {
background: none repeat scroll 0 0 transparent;
border: medium none;
font-size: 12px;
font-style: italic;
font-weight: normal;
margin: 0 5px;
text-decoration: none;
}
#comments-block .comment-footer a {
color: #444444;
text-decoration: none;
}
#comments-block .naacomment {
background: none repeat scroll 0 0 #E0ECF8;
color: #FFFFFF;
font-size: 15px;
font-weight: bold;
margin-left: 60px;
}
#comments-block .naacomment a {
color: #FFFFFF;
text-decoration: none;
}
.naaperu {
background: none repeat scroll 0 0 #8181F7;
border: 1px solid #FFFFFF;
color: #FFFFFF;
padding: 0 20px;
position: relative;
z-index: 99;
}
#comments-block .naacommentbody {
background: url("http://i.imgur.com/UqufZ.gif") no-repeat scroll right bottom #F9F9FC;
border-bottom: 2px solid #E6E6E6;
font-size: 14px;
margin: 0 0 30px;
padding: 5px 5px 20px 90px;
}
#comments-block .naacommentbody p {
margin: 0 0 0.75em;
}
#comments-block .naacommentfooter {
background: none repeat scroll 0 0 transparent;
border: medium none;
font-size: 12px;
font-style: italic;
font-weight: normal;
margin: 0 5px;
text-decoration: none;
}
#comments-block .naacommentfooter a {
color: #444444;
text-decoration: none;
}
/*End Blogger Thread Comment D-Copy*/

    6.  Save Template Anda dan lihat pembaruan komentar Anda mirip dengan Spice U'r Blog.