Baiklah pada subuh yang indah ini utta kembali lagi untuk memberikan tutorial tentunya :D , disini saya akan mencoba memberikan tutorial 'Costume Comments Dengan Fitur Replay (Thread Comment) Ala UTta' Bag.2', ini sama ajj koq dengan postingan saya sebelumnya 'Rubah Tampilan Comments Dengan Fitur Replay (Thread Comment) Ala Utta'. yang memiliki fitur reply. dan jika dibandingkan dari segi tampilan, jelas secara pribadi saya lebih senang dengan tampilan yang saya postingan sekarang, tp jika sobat lebih senang dengan tampilan yang sebelumnya gak ap2.hehee,..
Baiklah jika sobat penasaran dengan tampilan commentar ini, silahkan lihat gambar berikut :
Lalu bagaimana caranya biar tampilan Thread Comment'y gak monoton, agar tampilannya berubah seperti gambar diatas ? Keren bukan ? yuk, Silakan ikuti langkah-langkah dibawah ini:
1. Login ke blogger
2. Tata Letak.
3. Edit HTML.
4. Cari kode CSS Comment yang lama, kalau CSS punya anda Biasanya sih seperti dibawah ini..
#comments h4 {
color:#666666;
font-weight:normal;
letter-spacing:0.2em;
line-height:1.4em;
margin:1em 0;
font-size:14px;
text-transform:none;
}
#comments-block{max-height:300px;border:1px solid #eee;overflow:auto;width:569px;margin:1.3em 0 1.5em;line-height:1.6em}#comments-block .comment-author{background:#e0dede;border-top:1px solid #ddd;margin:.5em 0;padding-left:0px;color:#111}#comments-block .comment-author a:link,a:visited{color:#346ba4}#comments-block .comment-body{padding-left:0px;color:#333}#comments-block .comment-footer{padding-left:0px;margin:.25em 0 2em;line-height:1.5em;font-size:9px;border-top:1px solid #ddd}#comments-block .comment-footer a:link,a:visited{color:#444}#comments-block .comment-body p{text-align:justify;margin:0 1em .75em;padding-left:5px;border-left:3px solid #f0f0f0}#comments-block a:link{color:#c13a10}.deleted-comment{font-style:italic; color:gray}.owner-Body{padding-left:0px;color:#333}.owner-Body p{text-align:justify;margin:0 1em .75em;padding-left:5px;background:#f5f5f5;border-left:3px solid #ddd}
#blog-pager-newer-link {
float:left;
}
- Tapi yaa biasanya tiap template berbeda-beda bukan ? Jadi yaa kamu cari sendiri kode CSS komentar kamu versi template blog kamu. :D
5. Setelah ketemu, Kamu hapus semua kode CSS komentar yang lama versi template blog kamu, lalu kamu copy kode dibawah ini, diatas kode ]]></b:skin> (untuk menemukan kode yang dicari kamu tinggal CTR + F, lalu masukan kode yang ingin dicari.).
/* Blogger Threaded Comments */
#comments h4{padding:5px 5px;margin-top:5px;margin-bottom:5px;margin:0 0 10px;font-family:dungeon;font-size:25px;font-weight:normal;text-shadow:0 0 10px #fff,0 0 20px #fff,0 0 30px #fff,0 0 40px #00FCDA,0 0 70px #00FCDA,0 0 80px #00FCDA,0 0 100px #00FCDA,0 0 150px #00FCDA;
color:#FFF;
background:#101113;box-shadow:0px 1px 3px #000;box-shadow:inset 0px 0px 5px #000;
border: 2px solid rgba(255, 255, 255, 0.03);
border-left: 20px solid rgba(255, 255, 255, 0.03);}
#comments {
padding:20px 20px 10px;
position:relative;
margin:0 auto;
background-color:#101113;
border:2px solid #333;
color:#333;
-webkit-box-shadow:inset 1px 1px 10px #000;
-moz-box-shadow:inset 1px 1px 10px #000;
box-shadow:inset 1px 1px 10px #000;
}
#comments a {color:#ccc;}
#comments .note {
padding:5px 10px;
border:1px solid #222;
background-color:yellow;
background-image:linear-gradient(top,#333, #222);
box-shadow:0px 0px 0px 1px black;
color:#333;
font:normal 12px century gothic;
text-shadow:0px 1px 0px black;
}
#comments .note a,
#comments .note code {font-size:11px;}
#comments img.incomment {display:block;margin:2px 0px;}
#comments a.allow {font-size:97%;}
#comments code {
color:white;
font:normal 12px "Consolas","Courier New",Courier,mono,serif;
}
#comments code a {color:white;}
#comments code a:hover {background:transparent;}
#comments iframe.video {
width:320px;
max-width:320px;
height:224px;
box-shadow:0px 1px 3px black;box-shadow:inset 0px 0px 5px black;
display:block;
margin:10px auto 10px;
border:4px solid #444;
}
.comment-form {max-width:none;}
#comment-form {
clear:both;
margin-top:50px;
padding:20px 20px 20px 20px;
box-shadow:0px 1px 5px black;
width:auto !important;
display:block;
}
#respond {display:block;}
#comment-form h4 {margin-bottom:15px;}
#respond p {
margin:0px 0px 10px;
font-size:98%;
}
#comment-form iframe, #comment-editor {height:270px;border:none !important;}
#frameholder {border:4px solid #333;box-shadow:0px 1px 3px black;}
.comments .avatar-image-container {
margin:0px 0px 3px;
vertical-align:middle;
border: 1px solid rgba(255, 255, 255, 0.04);
padding:4px;
width:45px !important;height:45px !important;
max-width:100%;max-height:100%;
float:none;
box-shadow:0px 1px 2px black;
}
.comments .avatar-image-container img {
background-image: url("http://picturestack.com/453/380/pdPdefaultavaagv.png");
background-position: top center;
background-repeat: no-repeat;
display: block;
width:45px !important;
height:45px !important;
max-width:100%;border: 1px solid rgba(255, 255, 255, 0.04);
max-height:100%;
overflow:visible;
float:none;
}
.cm_avatar{}
.cm_entry a:after {
content:"";
width:0px;
height:0px;
border:12px solid transparent;
border-right-color:#FAFAD2;
border-bottom-color:#FAFAD2;
position:absolute;
right:0px;
bottom:0px;
}
.cm_wrap {clear:both;margin-bottom:4px;float:right;width:100%;}
.cm_head{margin:0;width:58px;float:left}
.cm_reply{}
.cm_reply a{display:block;
width:auto;
margin:0px 0px 1px 3px;
text-decoration:none;
padding:2px 7px 3px;
text-transform:none;background-color:#111;
color:#bbb !important;
border-bottom:1px solid #333;border-top:1px solid #333;
font-size:10px;font-family: "Consolas","Courier New",Courier,mono,serif;
box-shadow:0px 2px 2px black;
border-radius:3px 0px 0px 3px;transition:all 0.16s ease-in-out;}
.cm_reply a:hover{margin:0px 0px 1px -3px;background:#ccc;background:rgba(0,0,0,.1);
padding:2px 10px 3px 7px;}
.cm_entry{padding:16px 16px 16px;
border:1px solid #222;
background-color:transparent;
box-shadow:0px 1px 3px black;box-shadow:inset 0px 0px 5px black;
overflow:hidden;
position:relative;}
.cm_entry p{font-family: "Consolas","Courier New",Courier,mono,serif;font-size:12px;color:#bbb;padding:5px 10px;margin:2px 0px 0px;font-size:12px;
clear:both;border:1px solid #333;box-shadow:0px 1px 2px #222;box-shadow:inset 0px 0px 3px #222;
background: #ccc;
background: rgba(0,0,0,.1);
word-wrap:break-word;}
.cm_arrow{display:block;}
.cm_info{border:1px solid #333;
background: #ccc;
background: rgba(0,0,0,.1);
padding:5px 10px;box-shadow:0px 1px 2px #222;box-shadow:inset 0px 0px 3px #222;
margin:0px 0px 2px;}
.cm_name{text-shadow:0 0 1px black,0 0 1px black,0 0 1px black,0 0 1px black;font-family: "Consolas","Courier New",Courier,mono,serif;font-weight:bold;font-size:14px;float:left;text-decoration:none;}
.cm_name a{color:#777;}
.cm_date{font-family: "Consolas","Courier New",Courier,mono,serif;
text-decoration:none;font-size:11px;float:right;font-style:italic;color:darkred}
.cm_pagenavi{font-size:12px;text-transform:uppercase;color:#fff;font-family: "Consolas","Courier New",Courier,mono,serif;
font-weight:bold;}
.cm_pagenavi a{color:white;text-decoration:none;padding:10px}
.cm_pagenavi a:hover{text-decoration:underline}
.cm_pagenavi span{background: #ccc;
background: rgba(0,0,0,.1);padding:4px;border:1px solid #E0E0E0;
}
6. Setelah itu kamu cari lagi kode </body>, lalu paste kode berikut diatas kode </body>.
- <script type="text/javascript" src="http://najib.googlecode.com/files/threaded%20comment.js"></script>
7. Selanjutnya cari kode <b:includable id='comments' var='post'> , lalu Hapus kode antara kode <b:includable id='comments' var='post'> sampai dengan </b:includable> (kode yang berwarna biru yang harus didelete).
Contoh :
<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
<h4>
<b:if cond='data:post.numComments > 0'>
<b:if cond='data:post.numComments == 1'>
<span id='cm_total'>
</span> comment<b:else/>
<span id='cm_total'>
<data:post.numComments/>
</span> comments</b:if>
</b:if>
</h4>
------------ sebagian kode yang harus didelete -------------------
<b:include data='post' name='comment-form'/>
<b:else/>
<data:post.noNewCommentsText/>
</b:if>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/>
</a>
</b:if>
</b:if>
</b:if>
</div>
</b:includable>
8. Setelah ketemu, Lalu Paste kode berikut ini diantara kode <b:includable id='comments' var='post'> sampai dengan </b:includable> yang sudah dihapus tadi gantikan dengan kode dibawah..
<div class='comments' id='comments'><a name='comments'/>
<b:if cond='data:post.allowComments'>
<h4>
<b:if cond='data:post.numComments > 0'>
<b:if cond='data:post.numComments == 1'>
<span id='cm_total'>1</span> comment
<b:else/>
<span id='cm_total'><data:post.numComments/></span> comments
</b:if>
</b:if>
</h4>
<div id='cm_reply_css'></div>
<div class='cm_pagenavi' id='cm_page'></div>
<div id='cm_block'>
<b:loop values='data:post.comments' var='comment'>
<b:if cond='data:comment.isDeleted'>
<b:else/>
<div expr:id='data:comment.anchorName'>
<div class='cm_wrap'>
<a expr:name='data:comment.anchorName'/>
<div class='cm_head'>
<div class='cm_avatar'>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
</div>
<div class='cm_reply'>
<a expr:href='"https://www.blogger.com/comment.g?blogID=ID BLOG ANDA&postID=" + data:post.id + "&isPopup=true&postBody=%40%3C%61%20%68%72%65%66%3D%22%23" + data:comment.anchorName + "%22%3E" + data:comment.author + "%3C%2F%61%3E#form"' onclick='javascript:window.open(this.href, "bloggerPopup", "toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=450,height=450"); return false;'>Reply</a>
</div>
</div>
<div class='cm_entry'>
<span class='cm_arrow'></span>
<div class='cm_info'>
<div class='cm_name'>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'>
<data:comment.author/>
</a>
<b:else/>
<b><data:comment.author/></b>
</b:if>
</div>
<div class='cm_date'>
<data:comment.timestamp/>
<b:include data='comment' name='commentDeleteIcon'/>
</div>
<div class='clear'/>
</div>
<p><data:comment.body/></p>
</div>
</div>
</div>
</b:if>
</b:loop>
</div>
<div class='cm_pagenavi' id='cm_page_copy'></div>
<b:if cond='data:post.embedCommentForm'>
<b:if cond='data:post.allowNewComments'>
<b:include data='post' name='comment-form'/>
<b:else/>
<data:post.noNewCommentsText/>
</b:if>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>
</b:if>
</b:if>
</div>
- Sehingga hasil Keseluruhannya seperti berikut :
<b:includable id='comments' var='post'>
<div class='comments' id='comments'><a name='comments'/>
<b:if cond='data:post.allowComments'>
<h4>
<b:if cond='data:post.numComments > 0'>
<b:if cond='data:post.numComments == 1'>
<span id='cm_total'>1</span> comment
<b:else/>
<span id='cm_total'><data:post.numComments/></span> comments
</b:if>
</b:if>
</h4>
<div id='cm_reply_css'></div>
<div class='cm_pagenavi' id='cm_page'></div>
<div id='cm_block'>
<b:loop values='data:post.comments' var='comment'>
<b:if cond='data:comment.isDeleted'>
<b:else/>
<div expr:id='data:comment.anchorName'>
<div class='cm_wrap'>
<a expr:name='data:comment.anchorName'/>
<div class='cm_head'>
<div class='cm_avatar'>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
</div>
<div class='cm_reply'>
<a expr:href='"https://www.blogger.com/comment.g?blogID=ID BLOG ANDA&postID=" + data:post.id + "&isPopup=true&postBody=%40%3C%61%20%68%72%65%66%3D%22%23" + data:comment.anchorName + "%22%3E" + data:comment.author + "%3C%2F%61%3E#form"' onclick='javascript:window.open(this.href, "bloggerPopup", "toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=450,height=450"); return false;'>Reply</a>
</div>
</div>
<div class='cm_entry'>
<span class='cm_arrow'></span>
<div class='cm_info'>
<div class='cm_name'>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'>
<data:comment.author/>
</a>
<b:else/>
<b><data:comment.author/></b>
</b:if>
</div>
<div class='cm_date'>
<data:comment.timestamp/>
<b:include data='comment' name='commentDeleteIcon'/>
</div>
<div class='clear'/>
</div>
<p><data:comment.body/></p>
</div>
</div>
</div>
</b:if>
</b:loop>
</div>
<div class='cm_pagenavi' id='cm_page_copy'></div>
<b:if cond='data:post.embedCommentForm'>
<b:if cond='data:post.allowNewComments'>
<b:include data='post' name='comment-form'/>
<b:else/>
<data:post.noNewCommentsText/>
</b:if>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>
</b:if>
</b:if>
</div>
</b:includable>
NB :>> - Ganti Tulisan ID BLOG ANDA dengan ID blog kamu, misal: 3587929819661064232 (untuk mengetahui ID blomu, kamu bisa lihat deretan angka pada address bar pada saat membuka halaman Edit HTML.
9. Kalau sudah selesai semua, kamu klik Save, Lalu lihat hasilnya deh ^^
Hmm.. mungkin agak rumit yaa gan.. tapi yaa itulah yang utta ketahui. Selamat mencoba dan semoga berhasil yah kawan :D.
Semoga tutorial ini berguna bagi anda, jangan lupa komentarnya yach.hehee,.. ^^
Posting Komentar