Modifikasi Kotak Komentar dengan Reply di Blogspot

Modifikasi Kotak Komentar dengan Reply di Blogspot

Sebenarnya ada banyak cara mudah untuk membuat kotak komentar di blogspot menjadi seperti wordpress. Triknya yakni mengganti komentar default dengan layanan lain. Untuk komentar pun menjadi lebih mudah dan dinamis. Di blog ini pernah dibahas Disquss dan IntenseDebate. Namun, banyak blogger beranggapan hal ini akan mengibatkan peluang SEO lewat komentar default jadi hilang. Nah, jika Anda beranggapan sama dan tetap ingin menggunakan default blogger, mari ktia modifikasi saja sehingga bisa menggunakan fasilitas reply. Postingan ini bersumber dari Shams Blog dan pernah di psoting di Beben-Koben.

Perhatikan Gambar di bawah ini:

Untuk membuat seperti itu silahkan ikuti tutorial berikut ini
1. Login blogger
2. Tata Letak
3. Edit HTML
4. Downlaod Template Lengkap dahulu untuk mengamnakan template Anda
5. Centang Expand Template Widget
6. Letakkan kode biru di bawah ini di atas <b:skin>

7. Letakkan kode berwarna biru berikut ini di atas ]]></b:skin>

.comment-segment {margin-top: 10px; margin-right: 10px;}

.comment-level-0 {margin-left: 10px; margin-top: 10px;}

.comment-level-1 {margin-left: 25px; margin-top: 10px;}

.comment-level-2 {margin-left: 40px; margin-top: 10px;}

.comment-level-3 {margin-left: 55px; margin-top: 10px;}

.comment-level-gt3 {margin-left: 70px; margin-top: 10px;}

.blog-author-comment {background-color: #DFE6EF;border: 1px solid #7296E2;}

.blog-nonauthor-comment {background-color: #ffffff;border: 1px solid #000000;}

.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;}

.trackback { padding:9px 0 0 26px; margin:10px 0 0 0; background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhM54hh5UQhgd2J9-87QaawKqMq6v_YgUwLOpK60C4Ay3CDHT7CYVTT1ToBT8_TaDb07wH8eiZ7FVq0K1lazVo4OUdKrFBK_hJxj8F1rQ83GpBYbu7PoaVAngoYVKrmZLyDcbmJxHQGjHU/?imgmax=800) no-repeat left; color:#000;}

8. Cari kode berikut ini

<b:includable id='comments' var='post'>

...

</div>

</b:includable>

Tanda titik-titik di tengah script di atas menunjukkan script yang panjang jadi tidak saya tulis. Gunakan yang berwarna merah untuk mempermudah menemukan lokasi.

Jika sudah ketemu, ganti keseluruhan kode di atas dengan kode di bawah ini

<b:includable id='comments' var='post'>

<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>

<b:if cond='data:post.numComments > 0'>

</b:if>

<b:loop values='data:post.comments' var='comment'>

<data:comment.body/>

</div>

</b:loop>

// Use this if you have just one author like this blog :)

var BLOG_AUTHOR = 'http://www.blogger.com/profile/17415677888745046033';

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' +

' mengatakan... ' + '\n' +

' <span class="comment-time">on ${COMMENT.TIMESTAMP}</span>' + '\n' +

' <div id="comment-${COMMENT.ID}-body" class="comment-body" ><p>${COMMENT.BODY}</p></div>' + '\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' +

' <p class="reply-guide-header">Id Komentar ini : ${COMMENT.ID}</p>' + '\n' +

' </div>' + '\n' +

' <div id="comment-${COMMENT.ID}-footer" class="comment-footer">' + '\n' +

' <span><a ' +

'href="#" onclick="showElement(\'reply-guide-${COMMENT.ID}\'); return false;" >Lihat Id Komentar</a></span> ' + '\n' +

' <span><a href="${COMMENT.DELETE.URL}" title="${COMMENT.DELETE.TEXT}" style="text-decoration: none;" >Hapus</span></a></span>' + '\n' +

' </div>' + '\n' +

'</div>' + '\n';

applyCommentTemplate(eCommentTemplate);

// ]]>

</script>

<b:if cond='data:post.embedCommentForm'>

<b:include data='post' name='comment-form'/>

<b:else/>

<b:if cond='data:post.allowComments'>

</b:if>

</p>

</b:if>

<b:if cond='data:post.showBacklinks'>

<b:include data='post' name='backlinks'/>

</b:if>

</div>

</b:includable>

Pada script panjang di atas, perhatikan yang berwarna merah. Ganti dengan alamat profil blogger Anda untuk membuat komentar Anda nantinya berbeda warna. Jika sudah Simpan Template.

Trik ini memang sedikit panjang namun dijamin hasilnya sangat bagus. Jika biasanya berurutan yang paling dahulu berkomentar akan berada di list paling atas daftar komentar dan yang terakhir paling bawah. Dengan model ini meski Anda berkomentar terakhir Anda bisa mengambil tempat di tengah-tengah dengabn menjawab komen seseorang.

Cobalah dahulu di blog ini. Saya berkomentar pertama dengan nama PERCOBAAN. Silahkan Anda reply dengan cara mengawali komentar Anda dengan @PERCOBAAN (yakni nama orang yang akan ditanggapi komentarnya) atau Anda bisa menggunakan id komentar. Klik Lihat Id Komentar di bagian bawah komentar yang akan Anda tanggapi. Untuk menanggapinya awali komentar Anda dengan @idkomentar.

Contoh:
@PERCOBAAN <---- ditulis pada baris pertama (PERCOBAAN bisa diganti dengan nama lain sesuai yang akan ditanggapi)
semangat blogging mas
jangan bosen untuk update setiap hari
Modifikasi Kotak Komentar dengan Reply di Blogspot
sumber : http://www.masdoyok.co.cc

Anda suka atau merasa artikel ini bermanfaat? Jika ya, mohon kesediaannya untuk meng-klik tombol Plus One yang ada di samping ya. Terima kasih

djaloe :: saya blm ngerti, udah saya follow di tunggu follbacknya di http://si-gembel.blogspot.com/; November 4, 2011 at 5:22 AM
Rahasia Cantik :: Belum jelas.. tak psang di blog nggak jalan..; May 2, 2013 at 4:57 AM
Anonymous :: RCA Sparepart Motor Berkualitas Terbaik dengan Harga Terjangkau di Indonesia toko mesin; September 23, 2015 at 2:22 AM

SILAHKAN KOMENTAR

Maturnuwun sampeyan sudah mampir di Blog Mas uwah, tinggalkan komentar untuk menjalin persahabatan ingat NO SPAM.

Mas uwah | Trik blogger | Optimasi seo

3 Modifikasi Kotak Komentar dengan Reply di Blogspot

3 Testimonial:

SILAHKAN KOMENTAR