Setelah beberapa waktu yang lalu Web Developer Blogger telah memperbarui
tampilan Editor HTML Template, satu lagi fitur menarik ditawarkan oleh blogger yaitu mengaktifkan Google Plus Comment sebagai Form Komentar di bawah blog post.
Selain menarik fitur ini sangat berpotensi
mendatangkan trafik serta meningkatkan page views yang datang dari situs jejaring sosial Google Plus. Karena komentar yang ditempelkan oleh pembaca di bawah blog post secara otomatis akan dishare pula pada account google plus milik mereka. Demikian pula sebaliknya, komentar yang diberikan oleh pembaca melalui Google plus akan tampil pada
elemen komentar di bawah blog post. Klik
Preview Demo untuk melihat contohnya.
Silahkan tengok beberapa fitur dari
Google Plus Comments, sebelum memutuskan untuk mengaktifkan layanan ini. Untuk memulai instalasi, ikuti petunjuk berikut ini.
- Login ke blogger dengan ID Anda.
- Masuk ke halaman dashboard blogger dan pastikan blog Anda telah terkoneksi dengan google plus, klik icon gear di sebelah kanan atas halaman dashboard seperti gambar disebelah kanan ini.
- Selanjutnya klik menu Google Plus beri tanda centang pada opsi Use Google+ Comments on this blog.
- Jika template yang Anda gunakan adalah template default bawaan blogger maka Google Plus Comments ini otomatis akan ditambahkan di bagian bawah blog post.
- Jika Anda menggunakan custome template maka untuk menampilkan Google Plus Comments ini memerlukan sedikit perlakuan khusus. Sebelumnya backup template Anda terlebih dahulu. Pilih menu Template dan cari kode seperti di bawah ini.
- <div class='comments' id='comments'>
- Kemungkinan kode akan terlihat seperti berikut ini, karena template blogger sangat beragam, ada kemungkinan tampilan ini akan berbeda, hapus kode yang berwarna merah.
- <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>
<b:if cond='data:post.commentPagingRequired'>
<span class='paging-control-container'>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a>
 
<a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>
 
<data:post.commentRangeText/>
 
<a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>
 
<a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a>
</span>
</b:if>
<div expr:id='data:widget.instanceId + "_comments-block-wrapper"'>
<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>
<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>
<dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p>
<data:comment.body/>
</p>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>
</div>
<b:if cond='data:post.commentPagingRequired'>
<span class='paging-control-container'>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'>
<data:post.oldestLinkText/>
</a>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'>
<data:post.olderLinkText/>
</a>
 
<data:post.commentRangeText/>
 
<a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'>
<data:post.newerLinkText/>
</a>
<a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'>
<data:post.newestLinkText/>
</a>
</span>
</b:if>
<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
<b:if cond='data:post.allowNewComments'>
<b:include data='post' name='comment-form'/>
<b:else/>
<data:post.noNewCommentsText/>
</b:if>
<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:if>
<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>
</b:includable>
- Ganti dengan kode di bawah ini.
- <div class='cmt_iframe_holder' expr:data-href='data:post.canonicalUrl' expr:data-viewtype='data:post.viewType'/>
- Sehingga kode akan terlihat seperti berikut ini
- <b:includable id='comments' var='post'>
<div class='cmt_iframe_holder' expr:data-href='data:post.canonicalUrl' expr:data-viewtype='data:post.viewType'/>
</b:includable>
- Simpan perubahan pada template dan periksa blog Anda, jika berhasil ucapkan Alhamdulillah. KlikPreview Demo untuk melihat contohnya.
Berkomentarlah :
1.Dengan kata-kata yang sopan
2.Tidak menaruh link aktif ataupun non aktif
3.No spam, no sara, and no porn
4.Tidak promosi blog
5.Komentar yang tidak sesuai dengan isi konten akan langsung saya hapus
6.Komentar yang bagus akan saya publish dan saya beri komentar balik