Beberapa gadget yang sudah pernah dilihat oleh Anda, hampir seluruhnya sama cara kerjanya dari gadet auto hide ini. Adapun dengan artikel tersebut saya akan memaparkan tentang gadget auto hide untuk komentar Facebook, yang mana komentar Face Book ini akan tersimpan di sisi kanan blog kita, kebetulan dalam artikel yang dimaksud terletak di sisi kanan. Untuk menghindari "gambar/image Facebook" tidak terbalik, sebaiknya ditempatka pada sisi kanan.
Sebelum Anda membuat nomor id Facebook Anda, ada baiknya lihat dulu code komentar FaceBook di bawah ini:
<style type="text/css"></style>
<script type="text/javascript"><br />function showHideGB(){<br />var gb = document.getElementById("gb");<br />var w = gb.offsetWidth;<br />gb.opened ? moveGB(0, 51-w) : moveGB(30-w, 0);<br />gb.opened = !gb.opened;<br />}function moveGB(x0, xf){<br /><br />var gb = document.getElementById("gb");<br />var dx = Math.abs(x0-xf) > 25 ? 25 : 1;<br />var dir = xf>x0 ? 1 : -1;<br />var x = x0 + dx * dir;<br />gb.style.right = x.toString() + "px";<br />if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 5);}<br />}</script>
<div id="gb">
<div onmouseover="showHideGB()" class="gbtab"></div>
<div class="gbcontent">
<center>
Berikan komentar Anda Disini
<div id="fb-root"></div>
<script>(function(d, s, id) {<br />var js, fjs = d.getElementsByTagName(s)[0];<br />if (d.getElementById(id)) return;<br />js = d.createElement(s); js.id = id;<br />js.src = "//connect.facebook.net/id_ID/all.js#xfbml=1&appId=1xxxxxxxxxxxxxxxx";<br />fjs.parentNode.insertBefore(js, fjs);<br />}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-comments" href="http://trikdotcom.blogspot.com/" posts="8" width="250" colorscheme="dark"></div>
<p>
</p><div style="text-align:center">
<span style="float:right; color:orange;" >Get this <a target="_blank" href="http://trikdotcom.blogspot.com/"> widget! </a></span>
</div>
<script type="text/javascript"><br />var gb = document.getElementById("gb");<br />gb.style.right = (50-gb.offsetWidth).toString() + "px";<br /></script><p></p></center></div></div>
<script type="text/javascript"><br />function showHideGB(){<br />var gb = document.getElementById("gb");<br />var w = gb.offsetWidth;<br />gb.opened ? moveGB(0, 51-w) : moveGB(30-w, 0);<br />gb.opened = !gb.opened;<br />}function moveGB(x0, xf){<br /><br />var gb = document.getElementById("gb");<br />var dx = Math.abs(x0-xf) > 25 ? 25 : 1;<br />var dir = xf>x0 ? 1 : -1;<br />var x = x0 + dx * dir;<br />gb.style.right = x.toString() + "px";<br />if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 5);}<br />}</script>
<div id="gb">
<div onmouseover="showHideGB()" class="gbtab"></div>
<div class="gbcontent">
<center>
Berikan komentar Anda Disini
<div id="fb-root"></div>
<script>(function(d, s, id) {<br />var js, fjs = d.getElementsByTagName(s)[0];<br />if (d.getElementById(id)) return;<br />js = d.createElement(s); js.id = id;<br />js.src = "//connect.facebook.net/id_ID/all.js#xfbml=1&appId=1xxxxxxxxxxxxxxxx";<br />fjs.parentNode.insertBefore(js, fjs);<br />}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-comments" href="http://trikdotcom.blogspot.com/" posts="8" width="250" colorscheme="dark"></div>
<p>
</p><div style="text-align:center">
<span style="float:right; color:orange;" >Get this <a target="_blank" href="http://trikdotcom.blogspot.com/"> widget! </a></span>
</div>
<script type="text/javascript"><br />var gb = document.getElementById("gb");<br />gb.style.right = (50-gb.offsetWidth).toString() + "px";<br /></script><p></p></center></div></div>
Keterangan:
js.src = "//connect.facebook.net/id_ID/all.js#xfbml=1&appId=1xxxxxxxxxxxxxxx"; yang berwarna merah (Ganti dengan nomor ID facebook Anda)
data-width="385" data-colorscheme="dark"></div> Ganti dan sesuaikan dengan warna yang Anda suka, Blue atau Black, sebagai "ukuran:" dan warna latar belakang kotak komen "Facebook"
