Cara Membuat Pop-Up Facebook Diblog

Cara Membuat Pop-Up Facebook Diblog, halo semua ketemu lagi sama saya santri atjeh kali ini saya akan membuat tutorial Cara Membuat Pop-Up Facebook Diblog, untuk apa sih Pop-Up Facebook Diblog itu, Fungsinya sangat banyak gan terutama untuk fanpage facebook sobat yaitu makin banyak yang ngelike dan yang mengunjunginya lanjut cerita berikut Cara Membuat Pop-Up Facebook Diblog.

Dua Cara Membuat Pop-Up Facebook Diblog
Cara pertama
1. login blogger => template => edit template
2. latakkan kode di bawah ini diatas kode </head>


<style><br />/*<![CDATA[*/<br />.close-fbbox,.close-fbcookie{background:#fff;transition:all .4s ease-in-out;color:#555;cursor:pointer}<br />.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}<br />.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%}<br />.close-fbcookie{padding:1px 5px;border:1px solid #dedede;border-radius:2px;font:11px Arial;display:inline;float:left;line-height:1}<br />.close-fbcookie span{font-size:18px;font-weight:700;vertical-align:middle}<br />.close-fbbox:hover,.close-fbcookie:hover{background:#ddd;border:1px solid #ccc}<br />#fbOnscroll .layer{position:fixed;top:0;left:0;bottom:0;right:0;background:rgba(0,0,0,.7);z-index:999999}<br />.zoomInUp{-webkit-animation-name:zoomInUp;animation-name:zoomInUp;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}<br />@-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)}<br />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)}<br />}<br />@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)}<br />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)}<br />}<br />.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}<br />@-webkit-keyframes fadeIn{0%{opacity:0}<br />100%{opacity:1}<br />}<br />@keyframes fadeIn{0%{opacity:0}<br />100%{opacity:1}<br />}<br />/*]]>*/<br /></style>

3. kemudian tambahkan kode di bawah ini di atas kode </body>


<script><br />//<![CDATA[<br />  var appended = false,<br />  bookmark = document.createElement("div");<br />  bookmark.id = "fbOnscroll";<br />  bookmark.innerHTML = '<div class="fbbox-wrapper zoomInUp">
<br />\<br />  <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%2FSANTRIATJEH&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>\<br /><div class="close-fbcookie" onclick="hidesubscribebox()">
<br /><span>&#215;</span> Don\'t Show Again</div>
<br />\<br /><div class="close-fbbox" onclick="hidesubscribe()">
<br />&#215;</div>
<br />\<br /></div>
<br />\<br /><div class="layer fadeIn">
<br /></div>
<br />\<br />';<br />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>500&&(appended||(document.body.appendChild(bookmark),appended=!0),readCookie("hideDialog")&&(document.getElementById("fbOnscroll").style.display="none"))};<br />//]]><br /></script>

Not: ubah SANTRIATJEH Menjadi nama halaman facebook fb sobat.
4. simpan setelan.

Cara Kedua
1. login ke blogger => tata letak => tambahkan gadget => Html dan javascript
2. masukkan kode di bawah ini di dalam nya


<style><br />/*<![CDATA[*/<br />.close-fbbox,.close-fbcookie{background:#fff;transition:all .4s ease-in-out;color:#555;cursor:pointer}<br />.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}<br />.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%}<br />.close-fbcookie{padding:1px 5px;border:1px solid #dedede;border-radius:2px;font:11px Arial;display:inline;float:left;line-height:1}<br />.close-fbcookie span{font-size:18px;font-weight:700;vertical-align:middle}<br />.close-fbbox:hover,.close-fbcookie:hover{background:#ddd;border:1px solid #ccc}<br />#fbOnscroll .layer{position:fixed;top:0;left:0;bottom:0;right:0;background:rgba(0,0,0,.7);z-index:999999}<br />.zoomInUp{-webkit-animation-name:zoomInUp;animation-name:zoomInUp;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}<br />@-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)}<br />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)}<br />}<br />@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)}<br />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)}<br />}<br />.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}<br />@-webkit-keyframes fadeIn{0%{opacity:0}<br />100%{opacity:1}<br />}<br />@keyframes fadeIn{0%{opacity:0}<br />100%{opacity:1}<br />}<br />/*]]>*/<br /></style>
<script><br />//<![CDATA[<br />  var appended = false,<br />  bookmark = document.createElement("div");<br />  bookmark.id = "fbOnscroll";<br />  bookmark.innerHTML = '<div class="fbbox-wrapper zoomInUp">
<br />\<br />  <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%2Fsantriatjeh&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>\<br /><div class="close-fbcookie" onclick="hidesubscribebox()">
<br /><span>&#215;</span> Don\'t Show Again</div>
<br />\<br /><div class="close-fbbox" onclick="hidesubscribe()">
<br />&#215;</div>
<br />\<br /></div>
<br />\<br /><div class="layer fadeIn">
<br /></div>
<br />\<br />';<br />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>500&&(appended||(document.body.appendChild(bookmark),appended=!0),readCookie("hideDialog")&&(document.getElementById("fbOnscroll").style.display="none"))};<br />//]]><br /></script>

Not: ubah SANTRIATJEH Menjadi nama halaman facebook fb sobat.
3. simpan setelan.

Sekian dulu Tutorial Cara Membuat Pop-Up Facebook Diblog dari saya semoga bermanfaat.