Show Hide Blogger And Facebook Comments On Blog
Mumpung di blog ini tengah ekspresi dominan onclick event hehehee... kali ini aku akan memposting cara menciptakan show hide Blogger dan Facebook comments di blog yang tentunya show hide-nya memakai onclick event pada tombolnya biar instruksi yang dibentuk tidak rumit ibarat jquery dan biar gampang dipahami tentunya.
Seperti telah kita ketahui bahwa dengan memakai onclick event untuk menampilkan dan menyembunyikan suatu elemen akan lebih ringan ketimbang memakai jquery. Begitu pun dengan komentar Facebook-nya kita akan memakai asynchronous pada javascript SDK Facebook-nya sehingga tidak mengganggu loading blog ibarat pada gambar animasi gif di bawah ini.
Jika Anda tertarik untuk mencobanya silahkan ikuti langkah-langkahnya di bawah ini.
Langkah Pertama
Silahkan pastikan bahwa template Anda sudah mempunyai javascript SDK Facebook ibarat di bawah ini. Jika belum ada silahkan copy kodenya di bawah ini dan simpan di bawah instruksi <body>
Bagi Anda yang templatenya sudah terdapat instruksi ibarat di atas, pastikan juga telah ditambahkan asynchronous. Perhatikan kode js.async=true; kalau belum ada silahkan tambahkan instruksi tadi ibarat pada instruksi di atas.
Langkah Kedua
Silahkan tambahkan instruksi display:none pada CSS pada id comments ibarat di bawah ini
Langkah Ketiga
Jika template Anda memakai Threaded Comments Hack, silahkan cari instruksi di bawah ini
Kemudian geser ke bawah dan temukan epilog instruksi di atas </b:includable> kemudian silahkan simpan instruksi di atas tadi sempurna di atas instruksi penutupnya tadi.
Sumber https://www.kompiajaib.com/
Jika Anda tertarik untuk mencobanya silahkan ikuti langkah-langkahnya di bawah ini.
Langkah Pertama
Silahkan pastikan bahwa template Anda sudah mempunyai javascript SDK Facebook ibarat di bawah ini. Jika belum ada silahkan copy kodenya di bawah ini dan simpan di bawah instruksi <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 instruksi ibarat di atas, pastikan juga telah ditambahkan asynchronous. Perhatikan kode js.async=true; kalau belum ada silahkan tambahkan instruksi tadi ibarat pada instruksi di atas.
Langkah Kedua
Silahkan tambahkan instruksi display:none pada CSS pada id comments ibarat di bawah ini
#comments{.....;display:none}Langkah Ketiga
Jika template Anda memakai Threaded Comments Hack, silahkan cari instruksi di bawah ini
<b:includable id='comments' var='post'> Kemudian geser ke bawah dan temukan epilog instruksi di atas </b:includable> lalu silahkan simpan instruksi di bawah ini sempurna di atas instruksi epilog 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 memakai Threaded Comments Blogger, silahkan temukan instruksi ibarat di bawah ini
<b:includable id='threaded_comments' var='post'> Langkah Keempat
Silahkan cari instruksi di bawah ini
<b:includable id='post' var='post'> Kemudian geser ke bawah dan temukan epilog instruksi di atas </b:includable> kemudian silahkan simpan instruksi di bawah ini sempurna di atas instruksi epilog tadi.
<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> Setelah itu silahkan SAVE template blog Anda dan silahkan coba masuk ke sebuah postingan untuk melihat dan mencoba penampakannya.
0 Response to "Show Hide Blogger And Facebook Comments On Blog"
Posting Komentar