Show Hide Blogger And Facebook Comments On Blog

Show Hide Blogger And Facebook Comments On Blog

Bola Hero Gawai

Show Hide Blogger And Facebook Comments On Blog

Mumpung di blog ini tengah musim onclick event hehehee... kali ini saya akan memposting cara membuat show hide Blogger dan Facebook comments di blog yang tentunya show hide-nya menggunakan onclick event pada tombolnya agar kode yang dibuat tidak rumit seperti jquery dan agar mudah dipahami tentunya.

Seperti telah kita ketahui bahwa dengan menggunakan onclick event untuk menampilkan dan menyembunyikan suatu elemen akan lebih ringan ketimbang menggunakan jquery. Begitu pun dengan komentar Facebook-nya kita akan menggunakan asynchronous pada javascript SDK Facebook-nya sehingga tidak mengganggu loading blog seperti pada gambar animasi gif di bawah ini.

Show Hide Blogger And Facebook Comments On Blog


Jika Anda tertarik untuk mencobanya silahkan ikuti langkah-langkahnya di bawah ini.

Langkah Pertama
Silahkan pastikan bahwa template Anda sudah memiliki javascript SDK Facebook seperti di bawah ini. Jika belum ada silahkan copy kodenya di bawah ini dan simpan di bawah kode <body>


<div id='fb-root'></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;js.async=true;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Bagi Anda yang templatenya sudah terdapat kode seperti di atas, pastikan juga telah ditambahkan asynchronous. Perhatikan kode js.async=true; jika belum ada silahkan tambahkan kode tadi seperti pada kode di atas.

Langkah Kedua
Silahkan tambahkan kode display:none pada CSS pada id comments seperti di bawah ini

#comments{.....;display:none}


Langkah Ketiga
Jika template Anda menggunakan Threaded Comments Hack, silahkan cari kode di bawah ini

<b:includable id='comments' var='post'>

Kemudian geser ke bawah dan temukan penutup kode di atas </b:includable> kemudian silahkan simpan kode di bawah ini tepat di atas kode penutup tadi.


<div id="fb_comments" style="height:0;">
<div class="fb-comments" expr:data-href='data:post.url' data-width="100%" data-numposts="5" data-colorscheme="light"></div>
</div>

Jika template Anda menggunakan Threaded Comments Blogger, silahkan temukan kode seperti di bawah ini


<b:includable id='threaded_comments' var='post'>

Kemudian geser ke bawah dan temukan penutup kode di atas </b:includable> kemudian silahkan simpan kode di atas tadi tepat di atas kode penutupnya tadi.

Langkah Keempat
Silahkan cari kode di bawah ini


<b:includable id='post' var='post'>

Kemudian geser ke bawah dan temukan penutup kode di atas </b:includable> kemudian silahkan simpan kode di bawah ini tepat di atas kode penutup tadi.


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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>

Setelah itu silahkan SAVE template blog Anda dan silahkan coba masuk ke sebuah postingan untuk melihat dan mencoba penampakannya.

Share this:

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

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

30 Comments Add Comment

Pertamax Kang .. :-bd
Seumur hidup cari tutor kayak beginian baru pertama ini nemuin yang JOSS dan Berbeda dari yang lainnya .. :-d
Thanks Kang Adhy =D

Balas

Keduax kang =)D komen dulu baru baca =)D

Balas

heheheeh sama-sama mas Aldhi :) silahkan dicoba :D

Balas

Silahkan mas :) mudah-mudahan bisa dipahami :D

Balas
This comment has been removed by the author.

He.. he... Mbalik lagi ada kode yang belum di konversi,
Pertanyaanya begini Kang, Jika ingin menampilkan jumlah komentar faceboknya ditambah apa ya Kang?
Kalau komentar blogger setahu saya kodenya <data:post.numComments/>
Trimakasih, saya tunngu balasanya...

Balas

besok ah lanjutin mraktekin show hide nya

Balas

Gunakan kode ini untuk jumlah komentar FB <span class="fb-comments-count" expr:data-href='data:post.url'></span> sudah saya gunakan di demonya. Untuk jumlah komentar blogger iya pakai kode yang itu <data:post.numComments/>

Balas

Hehehehe silahkan kang Lembu :)

Balas

Saran saya gimana kalau CARA INI langsung dimasukin pada TEMPLATE bikinan Bang Adhy biar makin maknyuzzzzzzzzzzzzz...hahahahyyyyy

Balas

Berhasil mas... dan ternyat valid HTML5 =)D
Terimakasih

Balas

Ini tutorial yang dicari-cari, thanks for sharing ya

Balas

Kang kalau mau update smz dulu donk,, biar saya dapet pertamaxnya.

Balas

Uda bisa dipasang, untuk blogger coment nggak masalah. Problemnya di facebook comment ada yang di artikel tertentu bisa tampil ada yang nggak muncul. Problemnya di mana ya? Thanks

Balas

Untuk kedepannya mungkin akan saya coba mas :)

Balas

Sama-sama mas silahkan dicoba :)

Balas

Begitu ya...ada yang dirubah ga kodenya? Karena jika ada yang dirubah dan tidak tepat bisa menyebabkan komen fb nya ga muncul. Ketika percobaan yang saya lakukan juga begitu dan akhirnya dengan kode di atas baru bisa muncul.

Balas

banyak fariasinya :) berkunjung Kang :) maknyussss....

Balas

Nggak dirubah sih. Sekarang udah bisa muncul di setiap postingan. TTapi problemnya, di tab Blogger Comment, form facebook comment juga muncul di bawahnya, jadi muncul di bawah form komentar Blogger gitu. Kalo yang di tab Facebook Comment nggak masalah. Thanks buat responnya

Balas

Saya menggunakan system komentar ini, tapi gak bagus, tidak puas saya. Mohon ijin copy, dan langsung mau diterapkan.
Terima kasih sudah berbagi, Kang Adhy.
Salam

Balas

klo komen fbx sj yg pengen sy pasang, itu gmn kang kompi? makasih..

Balas

bagus sih tutornya.. :-bd
tapi kenapa dipersulit? kenapa coba fungsi CTRL+C dan klik kanan di disable? Itu kode panjang, kalo yg gak ngerti caranya view-source pasti udah males tuh mau nyoba ..
-_-

Balas

Hehehehe lagi ada sedikit percobaan mas :) lagi menghilangkan klik kanan dan CTRL+U malah Ctrl+C nya disable juga hehehe, hanya block text selain text di pre tag saya disable dulu :)

Balas

Di komentar juga saya disable block text-nya kecuali kode yang diconvert untuk mengatasi yang suka simpen link mati :) untuk kode-kode yang saya bagikan bisa di-copy :)

Balas

nah, kalo gini kan enak :)
wahh, fast respon nih.. =D
:-bd

Balas

saya juga dapet masalah seperti ini, tapi agak beda.
punya saya udah muncul dari awal. cuman agak kebawah dan tersembunyi .. pusing dah @@,

Balas

comment fb saya gak nampil kenapa ya mas?
http://muhammadidulakbar.blogspot.com/2014/05/darat-dan-laut.html

Balas
This comment has been removed by the author.

https://s13.postimg.org/w9brb8hwn/Untitled.png

Mau tanya dong gan, agan tahu ga html atau java scripsi untuk memunculkan comment counter di kolom Disqus ? biar selaran sama Comment Blogger ataupun Comment Facebook

Balas

Simpan js ini
<script id="dsq-count-scr" src="//usernamedisqusanda.disqus.com/count.js" async='async'></script>

Kemudian untuk menampilkannya pakai kode ini
<a expr:href='data:post.url + &quot;#disqus_thread&quot;' title='Comments Count'/>

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!

×
×
×