Masalah Threaded Comment dan Reply Comment yang error di blog sempat membuat heboh para blogger termasuk saya. Bukan tanpa alasan mengapa hal tersebut bisa membuat para blogger berkeluh kesah. Dampak dari rusaknya Threaded Comment dan Reply Comment adalah tidak berfungsinya tombol balas dan kolom balasan komentar menyatu atau sejajar dengan komentar biasa, sehingga kita tidak tahu mana komentar tunggal dan mana komentar balasan. Intinya, dengan rusaknya Threaded Comment dan Reply Comment ini buat kepala saya pusing dah.
Sudah capek saya mencari bagaimana caranya mengatasi masalah yang terjadi di blog ini karena Threaded Comment dan Reply Comment yang error. Awalnya saya ingin mengalihkan kolom komentar blog ini dengan komentar disqus, akan tetapi hal itu urung saya lakukan karena saya tidak bisa memantau komentar yang masuk.
Sebagaimana yang kita ketahui, jika kita menggunakan komentar bawaan blogger, maka secara otomatis setiap komentar yang masuk pasti akan kita ketahui melalui dasbor blogger, namun jika kita mengalihkannya pada sistem komentar pihak ketiga seperti kolom komentar dari disqus, facebook dan kolom komentar yang sejenis dengan itu, maka kita tidak bisa mengetahui komentar yang masuk melalui dasbor, kita hanya bisa mengetahuinya dengan cara manual, dan itu pasti akan merepotkan, Atas dasar itulah saya tidak mengganti kolom komentar blog ini dengan yang lain.
Saya sempat mengajukan keluhan kepada empu-nya template ini yaitu mas adhy, namun karena mas adhy sibuk, keluhan saya tak kunjung dibalas. Akhirya, saya mencoba untuk mencari tahu cara mengatasi Threaded Comment dan Reply Comment yang bermasalah tersebut melalui master blogger yang mengulas masalah itu, namun apa boleh buat, usaha saya tidak berhasil.
Banyak mastah yang memberikan solusinya, akan tetapi tidak berhasil pada blog ini, sampai pada akhirnya saya menemukan sebuah artikel tentang cara memperbaiki Threaded Comment dan Reply Comment yang bermasalah .
Artikel tersebut berjudul “Cara Mengatasi Threaded Comment dan Reply Comment blogger error” yang ditulis oleh bung franki. Sayang rasanya ilmu dari bung frangki ini tidak saya simpan, sebab suatu saat saya lupa caranya, maka saya bisa membacanya kembali di tulisan yang senada dengan bung franki ini.
Oya, jika kamu mengalami hal yang sama, maka tidak ada salahnya melihat situs bung franki atau bisa juga mengikuti langkah-langkah yang akan saya jelaskan terkait dengan Cara Memperbaiki Threaded Comment dan Reply Comment yang Error di blog. Oke, langsung saja berikut penjelasannya.
Perhatikan Terlebih dahulu yang iniOke, setelah kamu rubah kode di atas, sekarang saatnya beraksi. Jadi, apa saja yang harus kamu lakukan adalah:
- kode ( <head> atau <!--<head>--><head> ) silahkan ganti menjadi <head>
- kode (</head> atau <!--</head>--></head> ) ganti menjadi </head>
- kode (<!--</body>--></body> ) ganti menjadi </body>
1. Simpan dulu kode template
Untuk berjaga-jaga jika terjadi kesalahan, sebaiknya kamu simpan dulu kode template kamu sebelumnya.2. Carilah dua kode berikut
Kode pertama: Temukan kode <b:includable id='main' var='top'>Setelah itu geser kebawah dan temukan kode seperti dibawah ini:
<b:if cond='data:blog.pageType == "static_page"'>
<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>
</b:if>
Jika sudah ketemu, silahkan kamu ganti dengan kode dibawah ini:<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == "static_page"'>
<b:include data='post' name='comment_picker'/>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='comment_picker'/>
</b:if>
<b:include data='post' name='comment_picker'/>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='comment_picker'/>
</b:if>
Kode kedua: silahkan temukan kode dibawah ini
<b:includable id='mobile-post' var='post'>Kemudian geser ke bawah dan lanjutkan dengan mencari kode:
<b:if cond='data:blog.pageType == "static_page"'>
<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>
</b:if>
Silahkan ganti dengan kode di bawah ini:<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == "static_page"'>
<b:include data='post' name='comment_picker'/>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='comment_picker'/>
</b:if>
<b:include data='post' name='comment_picker'/>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='comment_picker'/>
</b:if>
Baca juga:
- Cara Membuat Daftar isi Blog Keren dan Cantik
- Cara membuat SiteMap Blog Terbaru dan Responsive
- Mengatasi mixed content Setelah Setting HTTPS Blog
- Cara membuat Related Post Responsive dan Valid HTML
3. Mencari kode comment
Setelah langkah diatas kamu lakukan, maka silahkan cari kode<b:includable id='comment_picker' var='post'>...</b:includable>setelah itu, silahkan ganti keseluruhan kode tersebut dengan kode dibawah ini:
<b:includable id='comment_picker' var='post'>
<b:if cond='data:post.commentSource == 1'>
<b:include data='post' name='iframe_comments'/>
<b:else/>
<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>
</b:if>
</b:includable>
<b:if cond='data:post.commentSource == 1'>
<b:include data='post' name='iframe_comments'/>
<b:else/>
<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>
</b:if>
</b:includable>
4. Memperbaiki tampilan yang rusak
Tampilan pada blog kamu akan rusak dan bahkan tulisan bisa tidak terlihat. Maka dari itu, untuk mengatasinya, silahkan simpan kode CSS di bawah ini. Kamu bisa meletakkan kodenya berdekatan dengan kode komentar bawaan blog kamu sebelumnya./* CSS Tambahan untuk komentar */
.comment-thread .user a{font-weight:700;color:#000;padding:0;font-size: 13px;text-decoration: none;}
.comment-thread .user a:hover{color:inherit}
.comment-thread .user{font-weight: bold;padding:0;font-size: 13px;text-decoration: none;}
.comment-thread .datetime {font-weight: normal;font-size:11px;}
.comment-thread .user {padding:0;font-size:13px;font-weight:bold;position:relative;}
.comment-thread .datetime {color: #a9a9a9;font-size:12px!important;margin-top:-3px;}
.comment-thread .datetime a{text-decoration:none;color: #a9a9a9;font-size:12px!important;font-weight:normal;}
.comment-thread .datetime a:hover{color: #000;}
.comment-content {line-height: 1.5em;margin:4px 0 5px;color: #444;font-weight:normal;font-size: 13px;word-wrap:break-word;padding:0;}
a.comment-reply, .item-control a{color: #aaa !important;font-size:12px!important;font-weight:normal!important;}
a:hover.comment-reply, .item-control a:hover{color:#000 !important;}
.item-control{margin-left:0px} /* tombol delete comment */
.thread-chrome a.comment-reply{margin-top:20px!important;border:1px solid #eee;text-align:center;border-radius:5px}
.thread-chrome a:hover.comment-reply{border-color:#bbb}
.comment-block{margin-left:65px;padding:10px;text-align:left;border:1px solid #f5f5f5;border-radius:5px;position:relative;display:block}
#comments .comments-content .icon.blog-author{
width: 16px;height: 16px;margin-left: 5px;vertical-align: 2px;display: inline-block;background: url("data:image/svg+xml,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M10,17L6,13L7.41,11.59L10,14.17L16.59,7.58L18,9M12,1L3,5V11C3,16.55 6.84,21.74 12,23C17.16,21.74 21,16.55 21,11V5L12,1Z' fill='%23118ff9'/></svg>") center center no-repeat;}
.comment-thread .user a{font-weight:700;color:#000;padding:0;font-size: 13px;text-decoration: none;}
.comment-thread .user a:hover{color:inherit}
.comment-thread .user{font-weight: bold;padding:0;font-size: 13px;text-decoration: none;}
.comment-thread .datetime {font-weight: normal;font-size:11px;}
.comment-thread .user {padding:0;font-size:13px;font-weight:bold;position:relative;}
.comment-thread .datetime {color: #a9a9a9;font-size:12px!important;margin-top:-3px;}
.comment-thread .datetime a{text-decoration:none;color: #a9a9a9;font-size:12px!important;font-weight:normal;}
.comment-thread .datetime a:hover{color: #000;}
.comment-content {line-height: 1.5em;margin:4px 0 5px;color: #444;font-weight:normal;font-size: 13px;word-wrap:break-word;padding:0;}
a.comment-reply, .item-control a{color: #aaa !important;font-size:12px!important;font-weight:normal!important;}
a:hover.comment-reply, .item-control a:hover{color:#000 !important;}
.item-control{margin-left:0px} /* tombol delete comment */
.thread-chrome a.comment-reply{margin-top:20px!important;border:1px solid #eee;text-align:center;border-radius:5px}
.thread-chrome a:hover.comment-reply{border-color:#bbb}
.comment-block{margin-left:65px;padding:10px;text-align:left;border:1px solid #f5f5f5;border-radius:5px;position:relative;display:block}
#comments .comments-content .icon.blog-author{
width: 16px;height: 16px;margin-left: 5px;vertical-align: 2px;display: inline-block;background: url("data:image/svg+xml,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M10,17L6,13L7.41,11.59L10,14.17L16.59,7.58L18,9M12,1L3,5V11C3,16.55 6.84,21.74 12,23C17.16,21.74 21,16.55 21,11V5L12,1Z' fill='%23118ff9'/></svg>") center center no-repeat;}
5. Memperbaiki judul dan pesan komentar yang berantakan
Karena pergantian kode dilakukan, maka judul dan pesan komentar dapat dipastikan berantakan, maka dari itu sebaiknya perbaiki dengan cara ini. Silahkan temukan kode:<b:includable id='threaded_comments' var='post'>...</b:includable>Kemudian ganti seluruh kode tersebut dengan kode dibawah ini.
<b:includable id='threaded_comments' var='post'>
<div class='comments' id='comments'>
<a name='comments'/>
<h3>
<b:if cond='data:post.numComments == 1'>1 <data:commentLabel/>:
<b:else/>
<span class='embel'>This post have</span> <data:post.numComments/> <data:commentLabelPlural/>
</b:if>
</h3>
<p class='comment-footer'>
<b:if cond='data:post.allowNewComments'>
<b:include data='post' name='threaded-comment-form'/>
<b:else/>
<data:post.noNewCommentsText/>
</b:if>
</p>
<div class='comments-content'>
<b:include cond='data:post.embedCommentForm' data='post' name='threaded_comment_js'/>
<div id='comment-holder'>
<data:post.commentHtml/>
</div>
</div>
<b:if cond='data:showCmtPopup'>
<div id='comment-popup'>
<iframe allowtransparency='true' frameborder='0' id='comment-actions' name='comment-actions' scrolling='no'>
</iframe>
</div>
</b:if>
<div id='backlinks-container'>
<div expr:id='data:widget.instanceId + "_backlinks-container"'>
<b:include cond='data:post.showBacklinks' data='post' name='backlinks'/>
</div>
</div>
</div>
</b:includable>
<div class='comments' id='comments'>
<a name='comments'/>
<h3>
<b:if cond='data:post.numComments == 1'>1 <data:commentLabel/>:
<b:else/>
<span class='embel'>This post have</span> <data:post.numComments/> <data:commentLabelPlural/>
</b:if>
</h3>
<p class='comment-footer'>
<b:if cond='data:post.allowNewComments'>
<b:include data='post' name='threaded-comment-form'/>
<b:else/>
<data:post.noNewCommentsText/>
</b:if>
</p>
<div class='comments-content'>
<b:include cond='data:post.embedCommentForm' data='post' name='threaded_comment_js'/>
<div id='comment-holder'>
<data:post.commentHtml/>
</div>
</div>
<b:if cond='data:showCmtPopup'>
<div id='comment-popup'>
<iframe allowtransparency='true' frameborder='0' id='comment-actions' name='comment-actions' scrolling='no'>
</iframe>
</div>
</b:if>
<div id='backlinks-container'>
<div expr:id='data:widget.instanceId + "_backlinks-container"'>
<b:include cond='data:post.showBacklinks' data='post' name='backlinks'/>
</div>
</div>
</div>
</b:includable>
6. Save template
Setelah cara di atas kamu lakukan dengan benar, maka silahkan save template atau klik simpan template dan silahkan dilihat hasilnya.Masukan dan saran Blogger
Oya, ada saran dari kolom komentar melalui mbak adelina bahwa tidak semua jenis template itu sama, jadi jika cara ini tidak berhasil, maka silahkan periksa atau diganti dengan kode di bawah ini. Sebelumnya, silahkan temukan kode:<b:if cond='data:post.showThreadedComments'>Kemudian, silahkan ganti dengan kode dibawah ini.
<b:include data='post' name='comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:post.showThreadedComments'>
<b:if cond='data:post.showThreadedComments'> <b:include data='post' name='threaded_comments'/> <b:else/> <b:include data='post' name='comments'/> </b:if>
<b:else/>
<b:if cond='data:post.showThreadedComments'> <b:include data='post' name='threaded_comments'/> <b:else/> <b:include data='post' name='comments'/> </b:if>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:post.showThreadedComments'>
<b:if cond='data:post.showThreadedComments'> <b:include data='post' name='threaded_comments'/> <b:else/> <b:include data='post' name='comments'/> </b:if>
<b:else/>
<b:if cond='data:post.showThreadedComments'> <b:include data='post' name='threaded_comments'/> <b:else/> <b:include data='post' name='comments'/> </b:if>
Cara ini sudah saya praktekkan pada blog terwujud.com dan blog saya lainnya, dan semuanya 100% berhasil. Jika ada keluhan, silahkan kamu ajukan melalui kolom komentar. Semoga bermanfaat !.
Ini adalah percobaan mengenai kolom dan tombol balas komentar
ReplyDeleteWah, ternyata berhasil di blog ini
DeleteMakin caem kak webnya.. alhamdulilah berhasil yaa.. tar deh aku coba juga pasang d blog
ReplyDeleteNice info
ReplyDeleteboleh juga mencuba ni thanks 4 sharing
ReplyDeletekemaren saya sempat kebingungan juga pengen ngasih bluetic di admin komenan saya....ini bisa jadi referensi saya..tks mas
ReplyDeleteInfo yang bagus..tapi sekrang kebanyakan blogger suka komentar dari Disqus..jarang yg masih pakai ini
ReplyDeletebetul mas, tapi saya lebih suka komentar ini karena mudah untuk cek siapa aja yang komen
DeleteTidak semua root kerusakan sama, dan versi template sekarang secara struktural terbagi dua: versi 2 dan versi 3. CSS hanya aba aba bagaimana HTML di tampilkan sedangkan HTML dengan parsing untuk mempercepat render kecepatan blog memang dapat membuat prilaku HTML jadi menyimpang. Persis yang kakak tulis diatas. Ini manjur untuk beberapa kasus yang terjadi pada template versi ke 2.
ReplyDeleteContoh lain dari kerusakan threat komentar adalah pada mark up:
<b:if cond='data:post.showThreadedComments'>
Biasanya dapat diatasi dengan menggantikannya dengan:
<b:include data='post' name='comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:post.showThreadedComments'>
<b:if cond='data:post.showThreadedComments'> <b:include data='post' name='threaded_comments'/> <b:else/> <b:include data='post' name='comments'/> </b:if>
<b:else/>
<b:if cond='data:post.showThreadedComments'> <b:include data='post' name='threaded_comments'/> <b:else/> <b:include data='post' name='comments'/> </b:if>
Begitu sih menurut tutorial di W3School dan CodePen...memang terbukti manjur.
bagus sarannya mbak, saya masukkan aja ke artikel ya mbak
Deletesalut sama pak Ibrahim setia dengan template ini sejak saya pertama ke blog ini 4 tahun lalu waktu masih jaman bengkel blogger
ReplyDeletehehehe, makasih mas. capek kalau ganti template lagi
DeleteWah, kapan itu terjadi?
ReplyDeleteSaya belum sempat ketemu.
Thanks for sharing, Mas...
Aduh pusing deh
ReplyDeleteKalo aku palingan nyerah terus ganti template aja cari di www.btemplates.com
kwkwkwkw
wkwkwkw, tapi setiap pergantian template ada resikonya lo mas
DeleteIya sih, makanya mesti sabar eksperimen yah mas wkwkwk
DeleteTerus delete2 widget bawaan yang ngga dipake, itu lamaaaaa~
Gw juga pernah mas, tapi seperti biasa, gw serahin ke adek gw. Gw tinggal duduk anteng, hahaha
ReplyDeleteAku memang cupu...
Cupu dari lahir. uhuk
DeleteNice info Mas... dulu pernah coba dan berhasil... eh ternyata ada komplikasinya karena post baru tidak bisa di publish. Akhirnya memutuskan ganti template saja...
ReplyDeleteSaya belum pernah sih, tapi kalau kejadian tinggal buka blog ini aja lagi :D
ReplyDeleteWah.. ribet juga ya sob, tapi sangat bermanfaat... saya save dulu sob, siapa tau ada waktu buat ganti juga nanti nya....
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteYes, great and helpful info here...thank you so much.😊
ReplyDeleteThese things can be so complicated sometimes!
Have a great day!
Sempat ngalamin juga, udah utak atik ngikut hasil gugling tetap gak bisa. Akhirnya nanya ke pembuat templatenya. Butuh waktu juga kemudian update template
ReplyDeletePernah utak-atik komentar ditemplatenya (untungnya gratisan) malah blognya gak bisa diakses. Akhirnya beli template premium dan komentar dengan Disqus
ReplyDeletesaya memang sengaja ngak pake disqus mas, soalnya untuk mengetahui komentar masuk itu tidak semudah komentar bawaan blogspot
Delete