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 ialah komentar Blogger, komentar Google+, dan komentar Facebook.

Baca juga: Show Hide Blogger And Facebook Comments On Blog

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

DEMO

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

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

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

Nah lalu silahkan ganti arahan pada langkah keempat pada postingan sebelumnya dengan arahan 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 memakai arahan &lt;!--</body>--&gt;&lt;/body&gt; silahkan pastikan di blognya sudah terdapat arahan js Google+ menyerupai 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.

Sumber https://www.kompiajaib.com/

Share this post