Jumat, 08 November 2013
Rubah Tampilan Comments Dengan Fitur Replay Thread Comment Ala Utta
Lalu bagaimana caranya biar tampilan Thread Commenty 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{width:auto;padding:5px 5px;margin-top:5px;margin-bottom:5px;background:#111;border-left:10px double darkred;border-right:10px double darkred;border-top:5px double #1d1d1d;border-bottom:5px double #1d1d1d;color:#CCC;text-shadow:0 0 2px red,0 0 2px red,0 0 2px red,0 0 2px red;font-family:dungeon;font-size:20px;font-weight:normal;margin:20px 0}
.cm_wrap {clear:both;margin-bottom:10px;float:right;width:100%;}
.cm_head{margin:0;width:70px;float:left}
.cm_avatar{background:#DDD;margin:0;vertical-align:middle;border:1px solid #111;padding:3px;width:36px;height:36px}
.comments .avatar-image-container {
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1vkeL3PJ4xHTVjF4JVY-DKFcNERnDYYKWr5OZoJ0DbVfIXOFjHtEgSoH_dkzARrB2FaTzgGZY76n2TWK5uEEgvasvdngrsgTqkETVMwCAkDqEKvFVRCgAP53bO6ELzfkMlTlcT1kIdm8/s1600/default-avatar.png");
background-position: top center;
background-repeat: no-repeat;
width: 36px;
height:36px;
margin: 0;
padding:0;
overflow: hidden;
float: left;
margin-right: 33px;
display: block;
border: 1px solid rgba(255, 255, 255, 0.04);
}
.cm_reply{padding-top:5px}
.cm_reply a{color:#CCC;display:inline-block;margin:0;padding:1px 6px;border:1px solid #C4C4C4;text-align:center;text-decoration:none;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;background:#252525;font:12px/18px sans-serif}
.cm_reply a:hover{opacity:0.9;text-decoration:none !important;background:darkred;color:#fff}
.cm_entry{opacity:0.9;padding:16px; background:#111; border-bottom:5px double #666;border-left:10px double #252525;border-top:5px double #666;border-right:10px double #252525; overflow:hidden}
.cm_arrow{display:block;}
.cm_info{margin-bottom:5px}
.cm_name{text-shadow:0 0 1px red,0 0 1px red,0 0 1px red,0 0 1px red;font-family:dungeon;font-weight:bold;font-size:15px;float:left}
.cm_name a{color:white;}
.cm_date{font-size:13px;float:right;font-style:italic;color:darkred}
.cm_entry p{margin:0;font-family:dominican;font-size:18px;color:#ccc}
.cm_pagenavi{font-size:15px;text-transform:uppercase;color:#fff;font-weight:bold}
.cm_pagenavi a{color:white;text-decoration:none;padding:10px}
.cm_pagenavi a:hover{text-decoration:underline}
.cm_pagenavi span{background:#111;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,.. ^^
Langganan:
Posting Komentar (Atom)
Tidak ada komentar:
Posting Komentar