Monday, May 6, 2013

Modifikasi Threded Komen Di blogger Ala Bp

Bp_Threded_KomenSetelah sekian lama mencari dan membandingkan tutorial tentang threaded komen di dunia maya ini , Akhirnya pencarian berakhir pada sebuah tutorial tentang threded komen dari bX-NicoNico , di mana sistem threded komen yang di buatnya menggunakan tag blogger data:comment.inReplyTo yang akan mengembalikan id dari komentar induk , dan menggunakan loop blogger untuk menunjukan balasan komentar . Dari artikel tersebutlah saya mencoba mempelajari dan mengembangkan kode-kode untuk threded komen yang akan kita bahas kali ini , baik di bagian Css maupun HTML . Sesuai dengan judul postingan ( Modifikasi Threded Komen Di blogger Ala Bp ) , Threded Komen yang akan kita buat kali ini , telah saya rubah kata-katanya kedalam bahasa indonesia baik pada bagian author maupun pada tomblol reply dan delete sehingga menjadi Jawab dan Hapus .

Dan adapun cara Modifikasi Threded Komen Di blogger Ala Bp adalah :

1. Buka Blogger Dasbor >>Pilih Opsi lainya >> Pilih/klik templete .

2. Back Up dulu Templete anda.

3. Selanjutnya Klik Edit HTMl >> centang kotak kecil Expand Template Widget.

4. Cari Kode dibawah ini gunakan Ctrl + F atau F3 untuk memudahkan pencarian.
<b:includable id='comments' var='post'>
5. Selanjutnya copy kode dibawah ini dan letakan kode tersebut tepat di atas kode no.4 di atas.

Klik Untuk :
<b:includable id='custom-comments' var='post'>
<section class='custom-comments' id='custom-comments'>
<b:if cond='data:post.allowComments'>

<!-- bambangpage.blogspot.com -->
<h4>
Ada
<b:if cond='data:post.numComments == 1'>
1 Komentar Pada &quot;<data:post.title/>&quot;:
<b:else/>
<data:post.numComments/> Komentar Pada &quot;<data:post.title/>&quot;:
</b:if>
</h4>
<!-- bambangpage.blogspot.com -->

<b:if cond='data:post.commentPagingRequired'>
<nav class='paging-control-container'>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>&#160;
<data:post.commentRangeText/>&#160;
<a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>
<a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a>
</nav>
</b:if>

<div id='comments-area'>
<b:loop values='data:post.comments' var='comment'>
<b:if cond='data:comment.inReplyTo'><b:else/>
<b:if cond='data:comment.author == data:post.author'>&lt;div class=&#39;author-comment&#39;&gt;</b:if>
<div class='comment-item clearfix' expr:id='data:comment.anchorName'>
<div class='comment-header clearfix'>
<strong class='user pull-left'>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if> .....Mengatakan.....
</strong>
<a class='comment-permalink pull-right' expr:href='data:comment.url' title='Comment Permalink'><data:comment.timestamp/></a>
</div> <!-- comment-header -->
<div class='avatar-box pull-left'>
<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
</b:if>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
</div> <!-- avatar-box -->
<div class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<data:comment.body/>
</b:if>
</div> <!-- comment-body -->
<b:loop values='data:post.comments' var='replies'>
<b:if cond='data:replies.inReplyTo == data:comment.id'>
<b:if cond='data:replies.author == data:post.author'>&lt;div class=&#39;author-comment&#39;&gt;</b:if>
<div class='comment-reply clearfix' expr:id='data:replies.anchorName'>
<div class='comment-header clearfix'>
<strong class='user pull-left'>
<b:if cond='data:replies.authorUrl'>
<a expr:href='data:replies.authorUrl' rel='nofollow'> <data:replies.author/></a>
<b:else/>
<data:replies.author/>
</b:if> .....Mengatakan.....
</strong>
<a class='comment-permalink pull-right' expr:href='data:replies.url' title='Comment Permalink'><data:replies.timestamp/></a>
</div> <!-- reply comment-header -->
<div class='avatar-box pull-left'>
<b:if cond='data:replies.favicon'>
<img expr:src='data:replies.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
</b:if>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:replies.authorAvatarImage/>
</b:if>
</div> <!-- reply avatar-box -->
<div class='comment-body'>
<b:if cond='data:replies.isDeleted'>
<span class='deleted-comment'><data:replies.body/></span>
<b:else/>
<data:replies.body/>
</b:if>
</div> <!-- reply comment-body -->
<span class='comment-bottom-line'>
&lt;a class=&#39;delete-btn&#39; data-icon=&#39;&amp;times;&#39; href=&#39;<data:replies.deleteUrl/>&#39; title=&#39;<data:top.deleteCommentMsg/>&#39;&gt;Hapus&lt;/a&gt;
</span>
</div> <!-- reply comment-reply -->
<b:if cond='data:replies.author == data:post.author'>&lt;/div&gt;</b:if>
</b:if> <!-- replies.inReplyTo -->
</b:loop>
<span class='comment-bottom-line'>
<b:if cond='data:comment.isDeleted != &quot;true&quot;'>&lt;a class=&#39;reply-btn&#39; data-icon=&#39;&amp;dArr;&#39; href=&#39;javascript:replyTo(&quot;<data:comment.id/>&quot;);&#39;&gt;Jawab&lt;/a&gt;</b:if>&lt;a class=&#39;delete-btn&#39; data-icon=&#39;&amp;times;&#39; href=&#39;<data:comment.deleteUrl/>&#39; title=&#39;<data:top.deleteCommentMsg/>&#39;&gt;Hapus&lt;/a&gt;
</span>
<div expr:id='&quot;form-container-&quot; + data:comment.id'/>
</div> <!-- comment-item -->
<b:if cond='data:comment.author == data:post.author'>&lt;/div&gt;</b:if>
</b:if> <!-- comment.inReplyTo -->
</b:loop>
</div>

<b:if cond='data:post.commentPagingRequired'>
<nav class='paging-control-container'>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>&#160;
<data:post.commentRangeText/>&#160;
<a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>
<a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a>
</nav>
</b:if>

<div class='custom-comment-form' id='custom-comment-form'>
<h4>Tulis dan Publikasikan Komentar Anda :</h4>
<p>Tulis Komentar Anda Disini :</p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<div class='custom-comment-editor-wrapper'>
<iframe class='blogger-iframe-colorize blogger-comment-from-post' id='comment-editor' name='comment-editor' src=''/>
</div>
<data:post.friendConnectJs/>
<data:post.cmtfpIframe/>
<script type='text/javascript'>BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;, &#39;<data:post.communityId/>&#39;);</script>
<a class='cancel-reply-btn' href='javascript:replyTo(&quot;cancel&quot;);'>Cancel Jawaban</a>
</div>

<script type='text/javascript'>
//<![CDATA[
var originalSource = document.getElementById('comment-editor').src.split('#');
function replyTo(id) {
var frame = document.getElementById('comment-editor'),
form = document.getElementById('custom-comment-form'),
container = (id != "cancel") ? document.getElementById('form-container-' + id) : document.getElementById('custom-comments'),
part = originalSource;
frame.style.height = "50px";
frame.style.visibility = "hidden";
frame.src = (id != "cancel") ? part[0] + '&parentID=' + id + '#' + part[1] : part[0] + '#' + part[1];
container.insertBefore(form, null);
frame.onload = function() {
this.style.height = "250px";
this.style.visibility = "visible";
};
}
//]]>
</script>

</b:if>
</section>
</b:includable>

5. Selanjutnya cari kode di bawah ini gunakan Ctrl+F atau F3 untuk memudahkan pencarian .
<b:include data='post' name='threaded_comments'/>
atau seperti ini:
<b:include data='post' name='comments'/>
6. Kemudian ganti dengan kode di bawah ini .Pungsi dari Penggantian kode ini adalah untuk mengaktifkan threded komen yang kita buat.
<b:include data='post' name='custom-comments'/>
7. Dan untuk kode Css copy kode di bawah ini dan pastekan di atas kode ]]></b:skin>.

Klik Untuk :
/* Start Comment Style CSS Code */
.clearfix:after {
content:"";
display:table;
clear:both;
}

.clearfix {*zoom:1}

.pull-left {
display:block;
float:left;
}

.pull-right {
display:block;
float:right;
}

/* Start Custom Comments' CSS */
.custom-comments {
margin:3em 0 0;
font:normal normal 13px/1.4 Tahoma,Arial,Sans-Serif;
letter-spacing:0;
}

/* links */
.custom-comments a,
.custom-comments a:visited {
color:#2143B4;
text-decoration:none;
}

.custom-comments a:hover {text-decoration:underline}

/* comment item */
.custom-comments .comment-item {
margin:0 0 1em;
padding:0 0 .7em 0;
border-bottom:1px solid #eee;
position:relative;
}

/* comment header */
.custom-comments .comment-header {background-color:#f1f1f1;border:2px solid #e3e3e3;padding: 1px;border-radius: 5px;-moz-border-radius: 5px;margin:left:40px;color: #39a6f3; overflow:hidden; margin:0 0 1em 0;
}
.comment-permalink pull-right
.custom-comments .datetime a{color:#0E6284;font-size:12px;float:left;text-decoration:none}
/* avatar area */
.custom-comments .avatar-box {
width:50px;
margin:-5px 5px 20px 0;
}

/* avatar */
.custom-comments .avatar-image-container,
.custom-comments .avatar-image-container a,
.custom-comments .avatar-image-container img {
border:none;
padding:0 0;
margin:-5px 5px;
float:none;
display:block;
width:35px;
height:35px;
max-width:none;
max-height:none;
}

.custom-comments .avatar-image-container img {
border:1px solid #ddd;
padding:1px;
background-color:#fafafa;
}

/* comment body */
.custom-comments .comment-body {margin-top: 5px;margin-bottom: 8px;padding-left: 10px;margin-left: 60px;border-left: 4px solid #C4C4C4;background: #f9f9f9;border-left-style: double;}

/* comment reply */
.custom-comments .comment-reply {
margin:1em 0 0 75px;
padding:1em 1.2em;
background-color:transparant;
position:relative;
font-size:11px;
}

.custom-comments .comment-reply:after {
content:"";
display:block;
width:0;
height:0;
position:absolute;
top:0;
left:0;
border:0px solid transparent;
border-color:white #F5F2D8 #F5F2D8 white;
}

.custom-comments .comment-reply .user {margin-left:15px;}
.custom-comments .comment-reply a {color:#767643}

.custom-comments .comment-reply .avatar-image-container img {
border-color:#EAE5C4;
background-color:#F5F0D3;
}

/* comment item footer */
.custom-comments .comment-bottom-line {
display:block;
clear:both;
margin:1em 0 .5em 75px;
text-align:right;
}

/* comment buttons */
.custom-comments .comment-bottom-line a,
.custom-comments .cancel-reply-btn {
border:1px solid #ddd;
outline:none;
padding:2px .7em 3px .5em;
margin:0 0 0 4px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
text-decoration:none;
}

.custom-comments .comment-reply .comment-bottom-line a,
.custom-comments .cancel-reply-btn {border-color:#EAE5C4}
.custom-comments .comment-bottom-line a:before {content:attr(data-icon) " "}
.custom-comments .comment-bottom-line .reply-btn:before {color:#3DB537}
.custom-comments .comment-bottom-line .delete-btn:before {color:#B42A21}

.custom-comments .comment-bottom-line a:hover,
.custom-comments .cancel-reply-btn:hover {
border-color:#bbb;
text-decoration:none;
}

.custom-comments .comment-bottom-line a:active,
.custom-comments .comment-bottom-line a:focus,
.custom-comments .cancel-reply-btn:active,
.custom-comments .cancel-reply-btn:focus {border-color:#999}
.custom-comments .cancel-reply-btn {padding:3px 1em 4px}

/* comment form */
.custom-comments .custom-comment-form {
margin:1em 0 2em;
clear:both;
}

.custom-comments .comment-item .custom-comment-form {
border:1px solid #eee;
padding:1em .2em 2em 1.5em;
margin-left:75px;
}

.custom-comments #comment-editor {
max-width:none;
width:100%;
height:250px;
border:none;
background:none;
}
.custom-comments .comment-reply .comment-bottom-line a,
.custom-comments .cancel-reply-btn {border-color:#EAE5C4}
.custom-comments .comment-bottom-line a:before {content:attr(data-icon) " "}
.custom-comments .comment-bottom-line .reply-btn:before {color:#3DB537}
.custom-comments .comment-bottom-line .delete-btn:before {color:#B42A21}

.custom-comments .custom-comment-form .cancel-reply-btn {display:none}
.custom-comments .comment-item .custom-comment-form .cancel-reply-btn {display:inline}
.custom-comments .comment-item .custom-comment-form h4 {display:none}

/* loading animation */
.custom-comments .custom-comment-editor-wrapper {background:transparent url('data:image/gif;base64,R0lGODlhEgAEAKEAAH9/fwAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQJDwACACwAAAAAEgAEAAACB5SPqcvtrwoAIfkECQ8AAgAsAAAAAAQABAAAAgSEjwkFACH5BAkPAAIALAAAAAALAAQAAAIMjCMJC4fKXBKsnVkLACH5BAkPAAIALAAAAAASAAQAAAIRjCN5mOCwkojt0Xnkg1l1sRUAIfkECQ8AAgAsAAAAABIABAAAAhGEIRkbKRwOUsxBaStdeDdfAAAh+QQJDwACACwHAAAACwAEAAACDIQhGRuHylwSrJ1ZCwAh+QQFDwACACwOAAAABAAEAAACBISPCQUAOw==') no-repeat 50% 50%}

/* deleted comment */
.custom-comments .deleted-comment {
font-style:italic;
color:#aaa;
}

/* comments paging control */
.custom-comments .paging-control-container {
font-size:80%;
text-align:center;
width:auto;
height:auto;
line-height:normal;
margin:1em 0;
float:none;
display:block;
clear:both;
border:1px solid #eee;
padding:.5em 1em;
overflow:hidden;
}

.custom-comments .paging-control-container .unneeded-paging-control {display:none}
.custom-comments .paging-control-container .paging-control {display:inline}

/* Author Comments Style: Do whatever you want with this! */
.custom-comments .author-comment .comment-reply .user:after {display:none}
.custom-comments .author-comment .user:after,
.custom-comments .author-comment .author-comment .comment-reply .user:after {
content:url("http://newtemplete-project.googlecode.com/files/_admin-coment.png");
display:inline-block; width:12px; height:12px; vertical-align:top; margin:-8px 0px 0 25px;
}
.author-comment > .comment-item,
.author-comment > .comment-reply {}

/* End Comment Style CSS Code */

Keterangan :

* Untuk membedakan komentar admin dan komentar pengunjung ganti kode yang berwarna Biru dengan alamat URL image admin anda..

8. Simpan Templete anda.

Blogger Threded Komen ini di peruntukan untuk blog baru dan blog lama yang memiliki komentar yang tidak terlalu banyak.

Selesai selamat mencoba....


Jika Anda Menyukai Artkel Seperti Di atas,Link back ke artikel ini dengan mengcopy salah satu kode di bawah ini

URL untuk Postingan:


HTML Link Code:

BB (forum) link code:



0 comments:

Post a Comment

 

Copyright 2011 Bambang's Page is proudly powered by blogger.com | Design by Bambang's Page | Find us on Google+

Postingan Baru

Komentar Baru

Postingan Acak