Membuat Widget Facebook Like Box dengan Popup - Hallo Pengunjung DROIDBREAK, Anda membaca artikel dengan judul Membuat Widget Facebook Like Box dengan Popup, artikel ini kami sediakan dengan baik untuk dibaca dan ambil informasi didalamnya. semoga isi postingan Artikel Blogger, yang kami tulis ini dapat menambah ilmu anda. selamat membaca.

Judul : Membuat Widget Facebook Like Box dengan Popup
link : Membuat Widget Facebook Like Box dengan Popup

Membuat Widget Facebook Like Box dengan Popup

Cara Membuat Widget Facebook Like Box dengan Popup - Hallo ! Di artikel kali ini saya akan membahas tentang tutorial membuat Widget Facebook Like Box Popup di Blogger. Sebelumnya saya mohon maaf, akhir-akhir ini saya sangat sibuk di dunia nyata sehingga saya jarang membuat artikel / postingan di blog ini, tetapi saya akan usahakan tetap membuat artikel walaupun jarangan karena kesibukan saya.

Kembali ke topik pembicaraan kita, Widget Facebook Like Box Popup ini saya dapatkan dari blog Kompi Ajaib saat saya sedang mencari refernsi atau tutorial seputar blogger yang dapat saya bagikan (share) kembali kepada kalian.

Jika kalian penasaran, silahkan kalian coba dan praktekan saja langsung. Caranya cukup mudah, kalian hanya cukup ikuti saja langkah-langkah dibawah ini :

Membuat Widget Facebook Like Box Popup di Blog

---

1. Buka dan masuk ke Blogger.
2. Pada dashboard blogger, anda klik Template > Edit HTML.
3. Cari kode </body>.
4. Lalu Copy Paste kode dibawah ini, dan taruh sebelum kode </body>.

<script>
//<![CDATA[
  var appended = false,
  bookmark = document.createElement("div");
  bookmark.id = "fbOnscroll";
  bookmark.innerHTML = '<div class="fbbox-wrapper zoomInUp">
  <iframe name="f13bea94f064144" width="1000px" height="1000px" frameborder="0" allowtransparency="true" allowfullscreen="true" scrolling="no" title="fb:page Facebook Social Plugin" src="https://www.facebook.com/v2.7/plugins/page.php?adapt_container_width=true&amp;app_id=113869198637480&amp;channel=https%3A%2F%2Fstaticxx.facebook.com%2Fconnect%2Fxd_arbiter%2Fr%2FuN4_cXtJDGb.js%3Fversion%3D42%23cb%3Df19b772d4d20444%26domain%3Ddevelopers.facebook.com%26origin%3Dhttps%253A%252F%252Fdevelopers.facebook.com%252Ff1ba7fe51c4d354%26relation%3Dparent.parent&amp;container_width=613&amp;hide_cover=false&amp;href=https%3A%2F%2Fwww.facebook.com%2FKangKudet&amp;locale=en_US&amp;sdk=joey&amp;show_facepile=true&amp;small_header=false" style="border: none; visibility: visible; width: 340px; height: 214px;" class=""></iframe>
<div class="close-fbcookie" onclick="hidesubscribebox()"><span>&#215;</span> Don't Show Again</div>
<div class="close-fbbox" onclick="hidesubscribe()">&#215;</div>
              </div>
              <div class="layer fadeIn"></div>
';
function hidesubscribe(){document.getElementById("fbOnscroll").style.display="none"}function hidesubscribebox(){document.getElementById("fbOnscroll").style.display="none",createCookie("hideDialog","hide",7000)}function createCookie(e,o,n){if(n){var t=new Date;t.setTime(t.getTime()+24*n*60*60*1e3);var i="; expires="+t.toGMTString()}else var i="";document.cookie=e+"="+o+i+"; path=/"}function readCookie(e){for(var o=e+"=",n=document.cookie.split(";"),t=0;t<n.length;t++){for(var i=n[t];" "==i.charAt(0);)i=i.substring(1,i.length);if(0==i.indexOf(o))return i.substring(o.length,i.length)}return null}function eraseCookie(e){createCookie(e,"",-1)}onscroll=function(){var e=document.documentElement.scrollTop||document.body.scrollTop;e>800&&(appended||(document.body.appendChild(bookmark),appended=!0),readCookie("hideDialog")&&(document.getElementById("fbOnscroll").style.display="none"))};
//]]>
</script>

5. Cari kembali kode </head>.
6. Lalu Copy Paste kode dibawah ini, dan taruh sebelum kode </head>.

<style>
/*<![CDATA[*/
.close-fbbox,.close-fbcookie{background:#fff;transition:all .4s ease-in-out;color:#555;cursor:pointer}
.fbbox-wrapper{width:360px;position:fixed;left:50%;margin-left:-180px;top:50%;margin-top:-131px;height:auto;background-color:#fff;-webkit-box-shadow:0 10px 50px 0 rgba(0,0,0,.25);-moz-box-shadow:0 10px 50px 0 rgba(0,0,0,.25);box-shadow:0 10px 50px 0 rgba(0,0,0,.25);padding:10px;border:1px solid #dedede;border-radius:5px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;z-index:1000000}
.close-fbbox{position:absolute;top:-15px;right:-15px;font-family:Arial;font-size:24px;font-weight:700;width:25px;height:25px;line-height:25px;text-align:center;border:1px solid #dedede;border-radius:100%}
.close-fbcookie{padding:1px 5px;border:1px solid #dedede;border-radius:2px;font:11px Arial;display:inline;float:left;line-height:1}
.close-fbcookie span{font-size:18px;font-weight:700;vertical-align:middle}
.close-fbbox:hover,.close-fbcookie:hover{background:#ddd;border:1px solid #ccc}
#fbOnscroll .layer{position:fixed;top:0;left:0;bottom:0;right:0;background:rgba(0,0,0,.7);z-index:999999}
.zoomInUp{-webkit-animation-name:zoomInUp;animation-name:zoomInUp;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}
@-webkit-keyframes zoomInUp{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}
60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}
}
@keyframes zoomInUp{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}
60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}
}
.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}
@-webkit-keyframes fadeIn{0%{opacity:0}
100%{opacity:1}
}
@keyframes fadeIn{0%{opacity:0}
100%{opacity:1}
}
/*]]>*/
</style>

7. Klik Simpan.
8. Selesai.

- Ganti KangKudet dengan username atau ID Facebook kalian.
- Ganti 340px dengan ukuran lebar yang kalian inginkan.
- Ganti 214px dengan ukuran tinggi yang kalian inginkan.

Demikianlah artikel pada kesempatan ini, yaitu Membuat Widget Facebook Like Box dengan Popup. Semoga dapat bermanfaat untuk kita semua.
sumber : www.kompiajaib.com

Author : Admin

Share this

Related Posts