Show Hide Blogger Google+ And Facebook Comments On Blog

Show Hide Blogger Google+ And Facebook Comments On Blog

Bola Hero Gawai

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.

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

31 Comments Add Comment

Pertamax Kang =D
Wah yang ini Lebih Keren dari yang Kemarin Nihh .. :-bd 3 in 1 =)D

Balas

wah keren nih..

saya coba ya mas adi..

Balas

ijin nyimak kang krn koneksi internet yang kayak nenek nenek sehingga belum bisa otak atik tempe :)
terima kasih tutorialnya kang.... :)

Balas

ijin tes drive mas buat techsimo, ma kasih atas ide kreatifnya dan saya doa'in sehat selalu biar bisa share ide2nya dan banyak rezeki.

Mator sembah nuwon mas....!!!

Balas

Mantap nih tutorialnya. Kalo mo nambah icon atau simbol di depan 'Blogger Comment', 'Facebook Comment', gimana caranya? Thanks

Balas

sip, langsung dipelajari dlu :-d

Balas

Iya mas biar ga ditilang :)

Balas

Silahkan mas Cahya dicoba dulu :)

Balas

Sama-sama mas Ade :)

Balas

Amiin...
Terima kasih atas do'anya mas Andre.

Balas

Coba pakai font icon, ada di kang Ismet :)

Balas

Silahkan mas :)

Balas

Hehehe =)D Emangnya kalau dipasang 3 macam komentar nggak nambah berat loading blog ya Kang ?

Balas

ini responsive gk kang adhy :)

Balas

Dengan menggunakan asynchronous pada js fb dan js g+ maka tidak terlalu mempengaruhi loading blog.

Balas

untuk tombolnya responsive namun untuk komentar g+ nya belum responsive karena jika lebarnya dirubah 100% maka komentarnya tidak muncul.

Balas

ada2 saja idenya mas, kayaknya sangat membebani loading nih :)

Balas

Dengan asynchronous jadi tidak terlalu membebani loading blog sist :)

Balas

wah keren tipsnya Kang :) oh ya Kang ..kira-kira pengaruh gak sama loading blog??

Balas

perasaan itu mah trik nu tina postingan
http://www.kompiajaib.com/2014/05/membuat-tab-view-dengan-onclick-event.html
ngan kari diisian widget koment blogger, google+ jeung FB !!!
oalaaaaaaaaaaaaaaaah *tepok jidat* :P

Balas

kreatif eta teh Kang Beben :D

Balas

Penerapannya langsung pada HTMLnya, jadi lebih sederhana pemasangannya :-d

Balas

rajin teuing ente bro :P

Balas

cikan tambahan kode CSS ieu brai!!!
.comment_body p img{vertical-align:middle}
suganan rada hade posisi emot di bagian komentar.
jiga kang ismet wae, template hade tp posisi emot nyarengsol...:D
mun teu jalan berarti salah unik ID :))

Balas

Keren Mas, tapi belum ada blog yang bisa dibuat untuk percobaan :)

Balas

wkwkw kang beben cocok na damel jadi komentator handal ieu mah euy, buka konci wae aduh. :D #lanjutkan kang . wkwk

Balas

Cool tricks :-D Thanks!!!

Balas

Ini berarti saya harus ke posting kang Adhy sebelumnya, tentang "Show Hide Blogger And Facebook Comments On Blog". Tapi saya berkomentar dulu disini kang Adhy. Serta mohon ijin gunakan script-script diatas.
Terima kasih sudah berbagi.
Salam

Balas

wah tutorial ini hanya ada diblog ini ,,keren bnget kang

Balas

Salam mas Adhy,
Dulu pernah tersesat diblog kompi ajaib ini.masa mula2 belajar blogging..
kapan mau cari gak ketemu..hehee..kelupaan nama kompi nya..

Terimakasih wejangannya mas..bermanfaat sekali.-)

Balas
Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • 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 Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×