Postingan ini adalah 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 kode scripts agar Google Plus Comment dapat terpasang.
Masih dengan cara yang sama disini kita masih menggunakan Onclick Event dalam membuat tampilan Comment tersebut dan bisa 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 sobat yang mau mencobanya mari kita bahas bersama caranya.
Langkah untuk membuat Show Hide Blogger Facebook Comments And Google+ sama seperti sebelumnya yang sudah saya bahas jadi disini saya 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 bisa 100% jadi tidak bisa mengikuti masing-masing device yang dipakai oleh pengunjung. Lain halnya dengan Facebook Comments yang dapat dibuat ukurannya 100% dan Responsive.
Anggap saja sobat sudah pernah mempraktekkan langkah pembahasan sebelumnya, silahkan sobat salin kode dibawah ini.
lalu silahkan ganti kode yang ada pada Langkah Keempat pada pembahasan sebelumnya penampakkan kodenya seperti ini
Perhatikan penerapan kodenya, jika di templated blog nya menggunakan kode <!--</body>--></body> silahkan sobat periksa apakah sudah terpasang kode JS Google Plus, jika belum silahkan gunakan kode dibawah ini.
Setelah selesai 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 kode yang ada pada Langkah Keempat pada pembahasan sebelumnya penampakkan kodenya seperti 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, jika di templated blog nya menggunakan kode <!--</body>--></body> silahkan sobat periksa apakah sudah terpasang kode JS Google Plus, jika belum silahkan gunakan kode 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 selesai silahkan SAVE templatednya dan selesai, Selamat Mencoba.
EmoticonEmoticon