Postingan ini yaitu lanjutan dari sebelumnya Membuat Show Hide Blogger dan Facebook Comments yang sudah kita bahas dan praktekan di blog. Setelah sebelumnya sudah berhasil terpasang kolom Commentsnya Blogger dan Facebook Comment sekarang kita akan menambahkan Google Plus Comments nya hanya dengan menambahkan instruksi scripts semoga Google Plus Comment dapat terpasang.
Masih dengan cara yang sama disini kita masih menggunakan Onclick Event dalam membuat tampilan Comment tersebut dan mampu Show Hide sehingga lebih rapih tampilannya. Disini akan kita buat Komentar Google Plusnya berjejer dengan Comments sebelumnya yaitu Blogger Comment, Google Comments dan Facebook Comment. Nah buat teman yang mau mencobanya mari kita bahas bersama caranya.
Langkah untuk membuat Show Hide Blogger Facebook Comments And Google+ sama ibarat sebelumnya yang sudah aku bahas jadi disini aku akan bahas kelanjutannya saja yaitu hanya menambahkan Comments Google Plus bagi yang belum membaca dapat dilihat DISINI pembahasan sebelumnya.
Untuk tampilan Google Plus Comment disini ukurannya lebarnya sedikit berbeda tidak mampu 100% jadi tidak mampu mengikuti masing-masing device yang dipakai oleh pengunjung. Lain halnya dengan Facebook Comments yang dapat dibuat ukurannya 100% dan Responsive.
Anggap saja teman sudah pernah mempraktekkan langkah pembahasan sebelumnya, silahkan teman salin instruksi dibawah ini.
lalu silahkan ganti instruksi yang ada pada Langkah Keempat pada pembahasan sebelumnya penampakkan kodenya ibarat ini
Perhatikan penerapan kodenya, bila di templated blog nya menggunakan instruksi <!--</body>--></body> silahkan teman periksa apakah sudah terpasang instruksi JS Google Plus, bila belum silahkan gunakan instruksi dibawah ini.
Setelah final silahkan SAVE templatednya dan selesai, Selamat Mencoba.
<b:if cond='data:blog.pageType == "item"'> <div style='width:100%;height:auto;postion:relative;margin:70px 0 30px;padding:0'> <div id='Button1' onclick='document.getElementById('comments').style.display='block';g_comments.style.display='none';fb_comments.style.height='0';Button1.style.display='none';Button2.style.display='block';' 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('comments').style.display='block';g_comments.style.display='none';fb_comments.style.height='0';Button1.style.display='block';Button2.style.display='none';' 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('comments').style.display='none';g_comments.style.display='none';fb_comments.style.height='100%';Button3.style.display='none';Button4.style.display='block';' 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('comments').style.display='none';g_comments.style.display='none';fb_comments.style.height='100%';Button3.style.display='block';Button4.style.display='none';' 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('comments').style.display='none';g_comments.style.display='block';fb_comments.style.height='0';Button5.style.display='none';Button6.style.display='block';' 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('comments').style.display='none';g_comments.style.display='block';fb_comments.style.height='0';Button5.style.display='block';Button6.style.display='none';' 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> lalu silahkan ganti instruksi yang ada pada Langkah Keempat pada pembahasan sebelumnya penampakkan kodenya ibarat ini
<b:if cond='data:blog.pageType == "item"'> <div id="Button1" style="margin:70px 0 30px;padding:0;text-align:center;float:left;background:#FC9543;color:#fff;font-weight:700;cursor:pointer;width:50%;height:35px;line-height:35px" onclick="document.getElementById('comments').style.display='block';fb_comments.style.height='0';Button1.style.display='none';Button2.style.display='block';">Blogger Comments</div> <div id="Button2" style="display:none;margin:70px 0 30px;padding:0;text-align:center;float:left;background:#FC9543;color:#fff;font-weight:700;cursor:pointer;width:50%;height:35px;line-height:35px" onclick="document.getElementById('comments').style.display='block';fb_comments.style.height='0';Button1.style.display='block';Button2.style.display='none';">Blogger Comments</div> <div id="Button3" style="margin:70px 0 30px;padding:0;text-align:center;float:right;background:#3E5B99;color:#fff;font-weight:700;cursor:pointer;width:50%;height:35px;line-height:35px" onclick="document.getElementById('comments').style.display='none';fb_comments.style.height='100%';Button3.style.display='none';Button4.style.display='block';">Facebook Comments</div> <div id="Button4" style="display:none;margin:70px 0 30px;padding:0;text-align:center;float:right;background:#3E5B99;color:#fff;font-weight:700;cursor:pointer;width:50%;height:35px;line-height:35px" onclick="document.getElementById('comments').style.display='none';fb_comments.style.height='100%';Button3.style.display='block';Button4.style.display='none';">Facebook Comments</div> </b:if>Perhatikan penerapan kodenya, bila di templated blog nya menggunakan instruksi <!--</body>--></body> silahkan teman periksa apakah sudah terpasang instruksi JS Google Plus, bila belum silahkan gunakan instruksi dibawah ini.
<script type='text/javascript'> (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })(); </script>Setelah final silahkan SAVE templatednya dan selesai, Selamat Mencoba.
Comments