ilmu computer: Ilmu Blog

Sebelumnya saya sudah pernah mengetengahkan cara menambahkan reply button pada komentar blogger. Fungsinya dengan tutorial yang akan saya paparkan kali ini kurang lebih sama, yaitu untuk memudahkan menjawab komentar pengunjung dan pembaca blog.
Perbedaannya: Tutorial sebelumnya kita hanya menambahkan sedikit kode dan hasilnya kita tidak perlu menuliskan secara manual ID (nama komentator) dari komentator yang ingin kita tanggapi (reply) komentarnya seperti: @ Amatullah:.... Adapun letak komentar balasan masih tetap berada pada daftar akhir komentar walau komentar yang ingin ditanggapi berada pada bagia awal daftar komentar.
Sedangkan tutorial kali ini, kita akan dihadapkan pada kode CSS dan HTML serta Script yang lumayan panjang. Dan mungkin tidak bisa diterapkan pada semua blogger template. Tapi hasil dari tutorial ini mungkin lebih memuaskan bagi sobat yang ingin sedikit meniru fungsi reply comment wordpress. Letak komentar tanggapan tepat berada dibawah kolom komentar yang ditanggapi. Selain itu kita bisa memodifikasi lagi tampilan daftar komentar agar sesuai dengan template kita.
Untuk lebih jelas silahkan lihat demo tutorial sebelumnya disini dan tutorial saat ini disini
Oke, bagi yang ingin menambahkan fungsi reply comment part 2 ini silahkan ikuti tutorial berikut:

Menambahkan Fungsi Reply Comment Untuk Blogger #2

1. Setelah sig in pada account blogger sobat>>> pada dasbor>>> Klik Tata Letak>>> Edit HTML>>> centang kotak kecil bertuliskan Expand Template Widget
2. Kemudian lettakkan CSS berikut diatas kode ]]></b:skin>

.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: #e2eef2;
border: 1px solid #7296e2;
padding: 5px;
}
.blog-nonauthor-comment {
background-color: #f8f8f8;
border: 1px solid #dddddd;
padding: 5px;
}
.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: 5px;
}

Catatan: Sobat dapat mengedit lagi CSS diatas misalnya untuk menyesuaikan tampilan backgroun komentar admin dan pengunjung atau mengganti jenis tulisan dll. Untuk kode warna bisa lihat disini.
3. Tambahkan Script berikut diatas kode </head>

4. Sekarang cari kode berikut <b:includable id='comments' var='post'> untuk memudahkan tekan Ctrl+F dan paste kode tadi pada kolom find dan tekan enter Kalau sudah menemukannya langkah selanjutnya:
5. Highlight semua kode mulai dari <b:includable id='comments' var='post'> scroll kebawah sampai kode penutupnya </b:includable> kemudian hapus ganti dengan kode 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 == 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' >
<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/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 = 'Letakkan URL profil anda disini';
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' +
' My <b>first line</b> is one of the values <br />' + '\n' +
' shown on the left :) ' + '\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"> </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>

Catatan: Silahkan ganti tulisan berwarna merah pada kode diatas dengan URL profil sobat
6. Sebelum menyimpan hasil pekerjaan saran saya klik pratinjau lebih dahulu, jika tidak terdapat pesan error dan template tetap dengan tampilan yang baik, silahkan simpan template.
Selesai. Lihat hasilnya diblog sobat
Nah untuk menjawab atau reply comment awali dengan mengklik reply dan mulailah menulis komentar baris pertama dengan ID atau kode angka komentator yang ingin kita tanggapi. Lihat demo disini.
Semoga bermanfaat!

Kali ini saya ingin mengetengahkan sebuah trik sederhana hasil pengembangan seorang blogger luar Chen asal china, yaitu bagaimana cara menambahkan reply comment atau tombol reply pada form comment blogger. Karena opsi komentar blogger memang masih nampak kaku dibanding blog dengan platfrom lainnya seperti wordpress yang diantaranya telah tersedianya opsi reply comment hanya dengan sekali klik.
Bagi yang ingin mengetahui cara memasang tombol reply comment silahkan ikuti tutorial berikut:

1. Setelah sig in pada account blogger sobat>>> pada dasbor>>> Klik Tata Letak>>> Edit HTML>>> centang kotak kecil bertuliskan Expand Template Widget
2. Kemudian cari kode berikut jika ingin memasang reply comment seperti contoh gambar pertama:

<data:commentPostedByMsg/>

Jika ingin memasang hanya reply comment seperti gambar kedua, cari kode berikut:

<b:includable id='commentDeleteIcon' var='comment'>

3. Selanjutnya letakkan kode berikut setelah kode pada point nomor 2
Jika hanya menggunakan tulisan reply comment seperti gambar pertama:

<span class='comment-reply'><a expr:href='"https://www.blogger.com/comment.g?blogID=Letakkan blog ID sobat disini&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=400,height=450"); return false;'>[Reply to comment]</a></span>

Jika ingin menggunakan image tombol reply comment seperti gambar kedua:

<span><a expr:href='"https://www.blogger.com/comment.g?blogID=Letakkan blog ID sobat disini&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;'><img alt='Reply To This Comment' src='URL image sobat disini'/></a></span>

Catatan: Tulisan yang berwarna merah (Letakkan blog ID sobat disini) ganti dengan ID blog sobat. Cara mengetahui ID blog, pada saat log in pada account sobat dan hendak menulis postingan baru, perhatikan tampilan kotak atas tempat URL pada browser:

Tulisan warna merah URL image sobat disini: Bisa sobat isi dengan URL berikut atau URL image sendiri, ingat URL image harus diawali dan ditutup dengan tanda " atau '

http://sites.google.com/site/amatullah83/background/reply-blue_thumb%5B1%5D.png

http://sites.google.com/site/amatullah83/background/reply-gray_thumb%5B1%5D.png

http://sites.google.com/site/amatullah83/background/reply-green_thumb%5B1%5D.png

http://sites.google.com/site/amatullah83/background/reply-pink_thumb%5B1%5D.png

http://sites.google.com/site/amatullah83/background/reply-red_thumb%5B1%5D.png

4. Simpan template, lihat hasilnya diblog sobat.
Semoga bermanfaat. Ingin melihat live demo reply comment disini, untuk live demo reply comment dengan menggunakan image lihat disini

Daftar Isi

Menambahkan Fungsi Reply Comment Untuk Blogger

Menambahkan Reply Button Pada Komentar Blogger

Mengaktifkan Threaded Comments Pada Custom Templates Blogger

Membuat Daftar Isi Di blogspot jilid 2

LINK TEMAN

Grafir

GajiGratis

Komisi Gratis

FWS

GajihGratis