Di kesempatan kali ini, Forgini bakal ngebahas tutorial tentang membuat komentar Blogger dan komentar Google+ secara bersamaan. Setelah googling sana sini, nyasar disitu dimari akhirnya nemu juga yang pas! dan ini udah melewati hasil uji coba sendiri gan, tentu saja hasilnya berhasil!. Yuukk, langsung aja follow step-step dibawah:
1. Buka blog sobat
2. Buka daftar entri, lalu pilih template
3. Pilih Edit HTML
4. Cari kode dibawah
<b:includable id='comment_picker' var='post'>...</b:includable>
Ganti semua kode diatas menjadi berikut:
<b:includable id='comment_picker' var='post'>
<b:if cond='data:post.forceIframeComments'>
<b:include data='post' name='iframe_comments'/>
<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.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='threaded_comments'/>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:if cond='data:post.forceIframeComments'>
<b:include data='post' name='iframe_comments'/>
<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.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='threaded_comments'/>
</b:if>
</b:if>
</b:if>
</b:includable>
5. Cari kode dibawah
<b:includable id='threaded_comments' var='post'>...</b:includable>
Ganti semua kode diatas menjadi berikut:
<b:includable id='threaded_comments' var='post'>
<div id='com-header'>
<h6>Tinggalkan jejak Anda menggunakan: </h6> <br/> <br/><br/><img class='com-on' id='com-norm' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWwlPpnup8b4Yo9EsiLZ4pNgSVEKlbxYLK0v9O1tvuyy2TglUmDVPIlZ4PooyH8lCvAxmT0cNYQb7tmOut0hlJPBU0UYTMVqwHXeKHbUjI24UPqvU_nAyyyW0SW6-bSrfkHVzTdXLTTtsm/s356/blogger-comments-on.png' title='Komentar Blogger' width='120'/><h6>atau</h6> <image id='com-gplus' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrrS57zuR7GU5M2_F3g2J0qjTobSDzHNtOcYG06e_h2M0zhwAWOHdO6zqFWUir735lu0f-qHvxRNhl220eB5e1xaigoE6tWOesBwn0OkR7ZSREiPfAMvQWXJ_qh3u_wx-wLNwC8eG4c5Hh/s356/google-plus-comments-off.png' title='Komentar Google+' width='120'/>
</div>
<div id='comment-zone'>
<div class='comments' id='comments'>
<a name='comments'/>
<h4><data:post.commentLabelFull/>:</h4>
<div class='comments-content'>
<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='threaded_comment_js'/>
</b:if>
<div id='comment-holder'>
<data:post.commentHtml/>
</div>
</div>
<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>
<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:if cond='data:post.showBacklinks'>
<b:include data='post' name='backlinks'/>
</b:if>
</div>
</div>
</div>
<div id='gcontainer'><div id='gcomments'/></div>
<script src='http://apis.google.com/js/plusone.js'/>
<script>
var _0x4c2d=["gcomments","location","620","BLOGGER","FILTERED_POSTMOD",
"render","comments","display","none","css",
"#gcontainer","block",
"#comments","com-on","addClass",
"#com-norm","removeClass",
"#com-gplus",
"src","https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWwlPpnup8b4Yo9EsiLZ4pNgSVEKlbxYLK0v9O1tvuyy2TglUmDVPIlZ4PooyH8lCvAxmT0cNYQb7tmOut0hlJPBU0UYTMVqwHXeKHbUjI24UPqvU_nAyyyW0SW6-bSrfkHVzTdXLTTtsm/s356/blogger-comments-on.png",
"attr","https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrrS57zuR7GU5M2_F3g2J0qjTobSDzHNtOcYG06e_h2M0zhwAWOHdO6zqFWUir735lu0f-qHvxRNhl220eB5e1xaigoE6tWOesBwn0OkR7ZSREiPfAMvQWXJ_qh3u_wx-wLNwC8eG4c5Hh/s356/google-plus-comments-off.png",
"click","https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiioUSbnYN1KIUw0UEG7WDYPf4wvGaCU_TYrefUY1p5YqwC44be7r1dEanXcWnNGv8H0aT1rSjte7Wrz6lrzyDXb7PI0VaUsQX4EwVHm3KnGGyv5xYvTKxrVs1sfQMdMPhxfOs-eQRGSvya/s356/blogger-comments-off.png",
"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIKZ24U3fAcxtVKbBmiiuOXoaLqoEOLABc5kYhdHyiQCMybPPn-NIF0rEGDbWlJpwKwUPvjn9ibP0I9KguqUKgXHmRqwrt3JdtSuRVhUs8zaOOjm1_0siqjHaepva4wOIfDfURjxyx55GB/s356/google-plus-comments-on.png",
"hasClass","hover","href","http://www.komputekno.com"];
</script>
<script src='http://rasitorasta.googlecode.com/files/blogger-comment.js'/>
<style>
#gcontainer {
display:none;
}
#com-norm,#com-gplus {
cursor:pointer;
padding:0 5px;
float:left
}
#com-header {
border: 1px solid #d2d2d2;
padding-bottom: 10px;
float: left;
width: 618px;
margin: 5px 0 5px 0;
background: #f5f5f5;
}
#com-header h6{
font-size: 16px;
text-transform: none;
font-weight: bold;
text-align: center;
float: left;
padding-top: 15px;
margin: 0px;
margin-right: 7px;
margin-left: 7px;
}
</style>
</div>
</b:includable>
<div id='com-header'>
<h6>Tinggalkan jejak Anda menggunakan: </h6> <br/> <br/><br/><img class='com-on' id='com-norm' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWwlPpnup8b4Yo9EsiLZ4pNgSVEKlbxYLK0v9O1tvuyy2TglUmDVPIlZ4PooyH8lCvAxmT0cNYQb7tmOut0hlJPBU0UYTMVqwHXeKHbUjI24UPqvU_nAyyyW0SW6-bSrfkHVzTdXLTTtsm/s356/blogger-comments-on.png' title='Komentar Blogger' width='120'/><h6>atau</h6> <image id='com-gplus' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrrS57zuR7GU5M2_F3g2J0qjTobSDzHNtOcYG06e_h2M0zhwAWOHdO6zqFWUir735lu0f-qHvxRNhl220eB5e1xaigoE6tWOesBwn0OkR7ZSREiPfAMvQWXJ_qh3u_wx-wLNwC8eG4c5Hh/s356/google-plus-comments-off.png' title='Komentar Google+' width='120'/>
</div>
<div id='comment-zone'>
<div class='comments' id='comments'>
<a name='comments'/>
<h4><data:post.commentLabelFull/>:</h4>
<div class='comments-content'>
<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='threaded_comment_js'/>
</b:if>
<div id='comment-holder'>
<data:post.commentHtml/>
</div>
</div>
<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>
<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:if cond='data:post.showBacklinks'>
<b:include data='post' name='backlinks'/>
</b:if>
</div>
</div>
</div>
<div id='gcontainer'><div id='gcomments'/></div>
<script src='http://apis.google.com/js/plusone.js'/>
<script>
var _0x4c2d=["gcomments","location","620","BLOGGER","FILTERED_POSTMOD",
"render","comments","display","none","css",
"#gcontainer","block",
"#comments","com-on","addClass",
"#com-norm","removeClass",
"#com-gplus",
"src","https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWwlPpnup8b4Yo9EsiLZ4pNgSVEKlbxYLK0v9O1tvuyy2TglUmDVPIlZ4PooyH8lCvAxmT0cNYQb7tmOut0hlJPBU0UYTMVqwHXeKHbUjI24UPqvU_nAyyyW0SW6-bSrfkHVzTdXLTTtsm/s356/blogger-comments-on.png",
"attr","https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrrS57zuR7GU5M2_F3g2J0qjTobSDzHNtOcYG06e_h2M0zhwAWOHdO6zqFWUir735lu0f-qHvxRNhl220eB5e1xaigoE6tWOesBwn0OkR7ZSREiPfAMvQWXJ_qh3u_wx-wLNwC8eG4c5Hh/s356/google-plus-comments-off.png",
"click","https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiioUSbnYN1KIUw0UEG7WDYPf4wvGaCU_TYrefUY1p5YqwC44be7r1dEanXcWnNGv8H0aT1rSjte7Wrz6lrzyDXb7PI0VaUsQX4EwVHm3KnGGyv5xYvTKxrVs1sfQMdMPhxfOs-eQRGSvya/s356/blogger-comments-off.png",
"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIKZ24U3fAcxtVKbBmiiuOXoaLqoEOLABc5kYhdHyiQCMybPPn-NIF0rEGDbWlJpwKwUPvjn9ibP0I9KguqUKgXHmRqwrt3JdtSuRVhUs8zaOOjm1_0siqjHaepva4wOIfDfURjxyx55GB/s356/google-plus-comments-on.png",
"hasClass","hover","href","http://www.komputekno.com"];
</script>
<script src='http://rasitorasta.googlecode.com/files/blogger-comment.js'/>
<style>
#gcontainer {
display:none;
}
#com-norm,#com-gplus {
cursor:pointer;
padding:0 5px;
float:left
}
#com-header {
border: 1px solid #d2d2d2;
padding-bottom: 10px;
float: left;
width: 618px;
margin: 5px 0 5px 0;
background: #f5f5f5;
}
#com-header h6{
font-size: 16px;
text-transform: none;
font-weight: bold;
text-align: center;
float: left;
padding-top: 15px;
margin: 0px;
margin-right: 7px;
margin-left: 7px;
}
</style>
</div>
</b:includable>
6. Langkah berikut ini adalah pilihan optional (tidak semua template terdapat kode yang sama) namun jika ada, cari kode dibawah
<div class='post-outer'>
<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == "static_page"'>
<div class='cmt_iframe_holder' expr:data-href='data:post.canonicalUrl' expr:data-viewtype='data:post.viewType'/>
<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:if cond='data:blog.pageType == "item"'>
<div class='cmt_iframe_holder' expr:data-href='data:post.canonicalUrl' expr:data-viewtype='data:post.viewType'/>
<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>
</div>
<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == "static_page"'>
<div class='cmt_iframe_holder' expr:data-href='data:post.canonicalUrl' expr:data-viewtype='data:post.viewType'/>
<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:if cond='data:blog.pageType == "item"'>
<div class='cmt_iframe_holder' expr:data-href='data:post.canonicalUrl' expr:data-viewtype='data:post.viewType'/>
<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>
</div>
Ganti semua kode diatas menjadi berikut:
<div class='post-outer'>
<b:include data='post' name='post'/>
<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>
</div>
<b:include data='post' name='post'/>
<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>
</div>
7. Langkah terakhir yaitu klik simpan template.
*Tambahan:
- Jika sobat kebingungan mencari kode-kode tersebut, yang perlu sobat lakukan adalah tekan ctrl+f lalu masukkan kata kunci kode tersebut
- Untuk dapat mengaktifkan kode diatas, matikan perintah yang terdapat pada entri Google+
Nah, jika semua langkah yang sobat lakukan benar, maka tampilan komentar sobat akan menjadi seperti gambar dibawah
