Show Hide Blogger Google+ And Facebook Comments On Blog

Postingan kali ini merupakan kelanjutan dari postingan kemarin sebagai alternatifnya dengan penambahan komentar Google+ sehingga menjadi 3 buah komentar. Dengan begitu di dalam blog terdapat pilihan untuk berkomentar bagi pengunjung yaitu komentar Blogger, komentar Google+, dan komentar Facebook.


Masih seperti pada postingan sebelumnya, kali ini masih tetap menggunakan tombol onclick event. Langkahnya masih sama seperti postingan sebelumnya hanya menambah 1 buah tombol untuk komentar Google+ dan menambahkan kode kustom untuk memunculkan komentar Google+ di blog sehingga kita bisa bebas menyimpan komentar Google+ di mana saja. Animasinya bisa dilihat pada gambar gif di bawah ini.

Show Hide Blogger Google+ And Facebook Comments On Blog


Namun berbeda dengan komentar Facebook yang lebarnya bisa dibuat 100% sehingga bisa responsive, lebar pada komentar Google+ tidak bisa dibuat 100% sehingga lebarnya tidak bisa mengikuti lebar masing-masing device. 

Namun bagi Anda yang penasaran ingin mencobanya, silahkan ikuti langkahnya di bawah ini.

Langkah untuk membuat show hide Blogger, Google+, dan Facebook comments sama dengan langkah membuat show hide Blogger and Facebook comments on blog yang kemarin saya posting. Jadi silahkan baca lagi postingannya pada link di atas.

Nah kemudian silahkan ganti kode pada langkah keempat pada postingan sebelumnya dengan kode di bawah ini.


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='width:100%;height:auto;postion:relative;margin:70px 0 30px;padding:0'>
<div id='Button1' onclick='document.getElementById(&apos;comments&apos;).style.display=&apos;block&apos;;g_comments.style.display=&apos;none&apos;;fb_comments.style.height=&apos;0&apos;;Button1.style.display=&apos;none&apos;;Button2.style.display=&apos;block&apos;;' style='margin-bottom:30px;padding:0;text-align:center;float:left;background:#FC9543;color:#fff;font-weight:700;cursor:pointer;width:33.3%;height:35px;line-height:35px;display:block'>Blogger Comments</div>

<div id='Button2' onclick='document.getElementById(&apos;comments&apos;).style.display=&apos;block&apos;;g_comments.style.display=&apos;none&apos;;fb_comments.style.height=&apos;0&apos;;Button1.style.display=&apos;block&apos;;Button2.style.display=&apos;none&apos;;' style='display:none;margin-bottom:30px;padding:0;text-align:center;float:left;background:#FC9543;color:#fff;font-weight:700;cursor:pointer;width:33.3%;height:35px;line-height:35px'>Blogger Comments</div>

<div id='Button3' onclick='document.getElementById(&apos;comments&apos;).style.display=&apos;none&apos;;g_comments.style.display=&apos;none&apos;;fb_comments.style.height=&apos;100%&apos;;Button3.style.display=&apos;none&apos;;Button4.style.display=&apos;block&apos;;' style='margin-bottom:30px;padding:0;text-align:center;float:right;background:#3E5B99;color:#fff;font-weight:700;cursor:pointer;width:33.3%;height:35px;line-height:35px'>Facebook Comments</div>

<div id='Button4' onclick='document.getElementById(&apos;comments&apos;).style.display=&apos;none&apos;;g_comments.style.display=&apos;none&apos;;fb_comments.style.height=&apos;100%&apos;;Button3.style.display=&apos;block&apos;;Button4.style.display=&apos;none&apos;;' style='display:none;margin-bottom:30px;padding:0;text-align:center;float:right;background:#3E5B99;color:#fff;font-weight:700;cursor:pointer;width:33.3%;height:35px;line-height:35px'>Facebook Comments</div>

<div id='Button5' onclick='document.getElementById(&apos;comments&apos;).style.display=&apos;none&apos;;g_comments.style.display=&apos;block&apos;;fb_comments.style.height=&apos;0&apos;;Button5.style.display=&apos;none&apos;;Button6.style.display=&apos;block&apos;;' style='float:right;margin-bottom:30px;margin-right:33.3%;margin-top:-65px;padding:0;text-align:center;background:#CB4437;color:#fff;font-weight:700;cursor:pointer;width:33.5%;height:35px;line-height:35px'>Google Comments</div>

<div id='Button6' onclick='document.getElementById(&apos;comments&apos;).style.display=&apos;none&apos;;g_comments.style.display=&apos;block&apos;;fb_comments.style.height=&apos;0&apos;;Button5.style.display=&apos;block&apos;;Button6.style.display=&apos;none&apos;;' style='display:none;float:right;margin-bottom:30px;margin-right:33.3%;margin-top:-65px;padding:0;text-align:center;background:#CB4437;color:#fff;font-weight:700;cursor:pointer;width:33.5%;height:35px;line-height:35px'>Google Comments</div>
</div>

<div id='g_comments' style='display:none;text-align:center'>
<div class='g-comments' data-first_party_property='BLOGGER' data-view_type='FILTERED_POSTMOD' data-width='620' expr:data-href='data:blog.canonicalUrl'>
</div>
</div>
</b:if>

Kemudian bagi templatenya yang menggunakan kode &lt;!--</body>--&gt;&lt;/body&gt; silahkan pastikan di blognya sudah terdapat kode js Google+ seperti di bawah ini


<script type='text/javascript'>
  (function() {
    var po = document.createElement(&#39;script&#39;); po.type = &#39;text/javascript&#39;; po.async = true;
    po.src = &#39;https://apis.google.com/js/plusone.js&#39;;
    var s = document.getElementsByTagName(&#39;script&#39;)[0]; s.parentNode.insertBefore(po, s);
  })();
</script>

Setelah itu silahkan save templatenya.

You Might Also Like:

How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Hide Parser
Disqus Comments