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.
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>
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
Langkah Ketiga
Jika template Anda menggunakan Threaded Comments Hack, silahkan cari kode di bawah ini
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.
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'>
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 == "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.