Trik Komputer: THREADED COMMENTS IN BLOGGER

Sang Bloglang BeBeN si ganteng teu kabina-bina is BACK!!! Tutorial pada komentar yang bisa memungkinkan kita melakukan reply-reply gitooo pada si komentator yang dituju. Hack ini sudah ada sejak lama brooo. Disinilah perannya seorang bloglang sejati kayak BeBeN diperlukan...wekekekekekkkk. ~~Udah ganteng baik lagih~~ Screenshot (Tunggu sampai beres loading blog, lightbox trick) :

Hack ini sudah beben praktekkan, dan bener jalan euy. Hal-hal yang perlu diketahui dalam memakai hack ini :

Bagus dan simpelnya sebenarnya pada Old Comment. Old Comment tuh yang seperti ini (Sorot pada gambar guna memperbesar) :

Old Comment tuh yang seperti ini.
Smile comment jadi tidak berfungsi.
Belum ada avatar default blog. Tapi ini bisa diadakan kok sobat...tenang saja.

Featured :

Dalam komentar anda menggunakan beberapa @ replyTargets pada baris terpisah dalam komentar anda.
Menggunakan gaya untuk 'blog-author-comment' dan 'blog-nonauthor-comment'.
Hide / Show komentar individu.
Configurable template untuk menampilkan komentar - menggunakan template kustom anda applyCommentTemplate ();.

Gila...pembukaannya panjang banget yah...wakakakakaKKKK!!! Oke, kita next pada tutorial pembuatannya (Semoga tidak pusing).

Log in pada account blogger sobat. Jangan lupa untuk menDownload Full Template.
Pilih Layout--->Edit HTML.
Cari kode <b:skin>, lalu masukkan script berikut diatas/sebelum kode yang tadi.

Download Script

<script src='HTTP://SCRIPT YG DIDOWNLOAD TADI SIMPAN DISINI SETELAH DIHOSTING' type='text/javascript'/>

Simpan deh seperti pada langkah ke-3 diatas. Setelah itu...

Cari kode ]]></b:skin>, lalu letakkan kode CSS berikut diatas/sebelumnya.

.comment-segment {
margin-top: 10px;
margin-right: 10px;
}
.comment-level-0 {
margin-left: 10px;
}
.comment-level-1 {
margin-left: 25px;
}
.comment-level-2 {
margin-left: 40px;
}
.comment-level-3 {
margin-left: 55px;
}
.comment-level-gt3 {
margin-left: 70px;
}
.blog-author-comment {
background-color: #F0F0BE;
border: 1px solid #FFFF99;
}
.blog-nonauthor-comment {
background-color: #B4C8F0;
border: 1px solid #7296E2;
}
.deleted-comment {
color: gray; font-STYLE: italic
}
.delete-comment-icon {
background: url("http://www.blogblog.com/rounders3/icon_delete13.gif")
no-repeat;
}
.comment-time {
font-size: 80%;
margin: inherit;
padding-left: 10px;
padding-bottom: 10px;
}
.reply-guide {
background-color: #FFFFFF;
border: #076a93 1px dotted;
display: none;
padding-right: 10px;
padding-left: 10px;
padding-bottom: 0.75em;
padding-top: 5px;
margin-right: 10px;
margin-bottom: 10px;
}
.reply-guide-header {
color: #076a93;
padding-top: 10px;
}
.reply-guide-list {
list-style: none;
padding-left: 2px;
margin-left: 2px;
}
.reply-guide-example {
font-size: 85%;
margin-right: 5px;
margin-bottom: 10px;
float: right;
border: 1px dotted #076a93;
padding: 5 5 5 5;
}

SAVE dolo deh, kalau semua langkah-langkah diatas sudah dilakukan. Semoga tidak ada error verifikasi...wkwkwkwkwk. Oh iyah untuk gambar pada kode CSS .delete-comment-icon, bisa diganti. Soalnya tidak jalan url gambar pada link tersebut (Sebaiknya resolusinya sama seperti gambar tong sampah bawaan blog).
Kalau tidak ada error, lakukan Expand Widget Templates.
Lalu carilah kode berikut dengan menekan CTRL + F atau menekan F3 pada keyboard.

<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
...
</div>
</b:includable>

Gantilah kode diatas dari
<b:includable id='comments' var='post'> sampai
</b:includable>
dengan kode berikut ini.

<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 == 1'> 1 <data:commentLabel/>:
<b:else/><data:post.numComments/><data:commentLabelPlural/>:
</b:if>
</h4>


<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/>
<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>
</p>


<b:loop values='data:post.comments' var='comment'>
<div style="display: none;" expr:id='"comment-body-" + data:comment.id' >
<b:if cond='data:comment.favicon'><img expr:src='data:comment.favicon'/>
</b:if>
<b:if cond='data:blog.enabledCommentProfileImages'><data:comment.authorAvatarImage/>
</b:if>
<data:comment.body/>
</div>
</b:loop>

<script type="text/javascript">
// USE THIS if YOU Have multiple Authors adding them in a comma separated form after removing the '//' from the next line
// var BLOG_AUTHORS = ['http://www.blogger.com/profile/firstauthor', 'http://www.blogger.com/profile/secondauthor', 'http://www.blogger.com/profile/thirdauthor'];
// Use this if you have just one author like this blog :)
var BLOG_AUTHOR = 'http://www.blogger.com/profile/NOMOR ID SOBAT';
var BLOG_POST_COMMENT_LINK = '<data:post.addCommentUrl/>';

var eCommentDelete = false;
var eAuthorUrl = '';
<b:loop values='data:post.comments' var='comment'>
eCommentDelete = false;
eAuthorUrl = '';
<b:if cond='data:comment.authorUrl'>
eAuthorUrl = "<data:comment.authorUrl/>";
</b:if>
<b:if cond='data:comment.isDeleted'>
eCommentDelete = true;
</b:if>

buildComment("<data:comment.author/>", eAuthorUrl,
"<data:comment.id/>", "<data:comment.timestamp/>", eCommentDelete, "<data:comment.deleteUrl/>", "<data:top.deleteCommentMsg/>",
document.getElementById('comment-body-<data:comment.id/>').innerHTML);
</b:loop>
// <![CDATA[
var eCommentTemplate = '' +
'<div class="comment-segment comment-level-${COMMENT.LEVEL} ${BLOG.AUTHOR} ${COMMENT.DELETED.STYLE}" >' + '\n' +
'<a name="comment-${COMMENT.ID}"></a>' + '\n' +
'<span style="float: right; margin-right: 5px; " >' + '\n' + '<a href="#" ' + '\n' +
'onclick="toggleElementDisplays(this, ' +
'[\'comment-${COMMENT.ID}-body\', \'comment-${COMMENT.ID}-footer\', \'reply-guide-${COMMENT.ID}\'], ' +
'[\'both\', \'both\', \'hide\']); return false;">[hide]</a>' + '\n' + '</span>' + '\n' +
'<span class="comment-author" >' +
'${COMMENT.AUTHOR.URL.EXISTS.START}' +
'<a href="${COMMENT.AUTHOR.URL}" rel="nofollow">' +
'${COMMENT.AUTHOR.URL.EXISTS.END}' +
'${COMMENT.AUTHOR.NAME}' +
'${COMMENT.AUTHOR.URL.EXISTS.START}' +
'</a>' +
'${COMMENT.AUTHOR.URL.EXISTS.END}</span>' + '\n' +
'Said... ' + '\n' +
'<div id="comment-${COMMENT.ID}-body" class="comment-body"><p>${COMMENT.BODY}</p></div>' + '\n' +
'<span class="comment-time">on ${COMMENT.TIMESTAMP}</span>' + '\n' +
'<div id="reply-guide-${COMMENT.ID}" class="reply-guide comment-level-0 " >' + '\n' +
'<span style="float: right;" ><a href="#" onclick="hideElement(\'reply-guide-${COMMENT.ID}\'); return false;" >[hide]</a></span>' + '\n' +
'<h4 class="reply-guide-header">How to Reply to this comment</h4>' + '\n' + '<span>' + '\n' +
'To reply to this comment please ensure that <b>one</b> of the following lines: ' + '\n' + '<span class="reply-guide-example" >' + '\n' + '<b>Example:</b><br />' + '\n' + '@${COMMENT.ID} <br />' + '\n' + 'This is my comment. <br /> Note how my <b>first line</b> is the pasted value <br />' + '\n' + '</span>' + '\n' +
'<ul class="reply-guide-list">' + '\n' +
'<li>@${COMMENT.ID}</li>' + '\n' +
'<li>@${COMMENT.AUTHOR.NAME}</li>' + '\n' +
'</ul>' + '\n' +
'is the <b>first line</b> of your comment. ' + '\n' +
'<br />' + '\n' +
'<a href="${BLOG.POST.COMMENT.LINK}"' + '\n' +
'>Click here to enter your reply</a>' + '\n' +
'</span>' + '\n' +
'</div>' + '\n' +
'<div id="comment-${COMMENT.ID}-footer" class="comment-footer">' + '\n' +
'<span><a ' +
'href="#" onclick="showElement(\'reply-guide-${COMMENT.ID}\'); return false;" >Reply</a> |</span> ' + '\n' +
'<span><a href="#comment-${COMMENT.ID}">Permalink</a> |</span> ' + '\n' +
'<span><a href="${COMMENT.DELETE.URL}" title="${COMMENT.DELETE.TEXT}" style="text-decoration: none;" ><span class="delete-comment-icon">Delete</span></a></span>' + '\n' + '</div>' + '\n' + '</div>' + '\n';

applyCommentTemplate(eCommentTemplate);
// ]]>
</script>
<p class='comment-footer'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</p>
</b:if>
<div id='backlinks-container'>
<div expr:id='data:widget.instanceId + "_backlinks-container"'>
<b:if cond='data:post.showBacklinks'>
<b:include data='post' name='backlinks'/>
</b:if>
</div>
</div>
</div>
</b:includable>

Kode/script diatas sudah diperbaiki dan ditambah tanpa mengurangi fungsi bawaannya.
Perhatikan !!! jangan lupa untuk mengganti
var BLOG_AUTHOR = 'http://www.blogger.com/profile/NOMOR ID SOBAT';. Lihat di address bar browsingan paling akhir!!! Nah itulah blog ID sobat.

SAVE dan lihat hasilnya.

Kalau mau menggunakan lebih dari satu author, sobat tinggal menghilangkan tanda "//" diawal kodenya.
// var BLOG_AUTHORS = ['http://www.blogger.com/profile/firstauthor', 'http://www.blogger.com/profile/secondauthor', 'http://www.blogger.com/profile/thirdauthor'];
ganti juga huruf yang dicetak tebal dengan ID author.

Kalau benar-benar mau menggunakan hack ini harap dibaca hal-hal yang perlu diketahui diatas tadi. Mengenai avatarnya sudah diadain ma BeBeN. Nah kalau soal smile buat komentarnya aku meneketehe...wekekekekKKK. Selamat berjumpa kembali di artikel bloglang selanjutnya.
Hack by : http://shamsmi.blogspot.com/

GODD LUCK, HAPPY BLOGGING DAN WASSALAM.

Trik Komputer

Minggu, 17 Januari 2010

THREADED COMMENTS IN BLOGGER

Tidak ada komentar:

Posting Komentar