Menggabungkan Popup Facebook Like Box Onscroll Dengan Subscribe Box Onscroll

Setelah kemarin kita membuat subscribe box dengan show onscroll dengan dilengkapi dengan cookie baik untuk FeedBurner maupun Mailchimp dan juga membuat popup facebook like box onscroll yang juga dilengkapi dengan cookie, kini kita akan membuat gabungan popup facebook like box dengan subscribe box dengan show onscroll.

Ini dibuat/digabungkan agar kedua widget bisa berjalan, karena jika disimpan di blog secara sendiri-sendiri maka salah satu widget tidak akan berjalan karena ada kode javascript yang bentrok.

Nah jika kemarin anda sudah memasang salah satunya dan ingin memasang dua-duanya atau telah memasang dua-duanya namun salah satu widgetnya tidak jalan, silahkan ganti semua kodenya dengan yang ada di tutorial ini.

1. Facebook Like Box dengan Mailchimp Subscribe Box

Demo

Silahkan simpan kode CSS di bawah ini di atas kode </head>


<style>

/*<![CDATA[*/

.close-fbbox,.close-fbcookie{background:#fff;transition:all .4s ease-in-out;color:#555;cursor:pointer}

.fadeIn,.zoomInUp{-webkit-animation-fill-mode:both}

.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%}

#site-subs,.layer{position:fixed;bottom:0;right:0}

.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}

.layer{top:0;left:0;background:rgba(0,0,0,.3);z-index:999999}

.zoomInUp{-webkit-animation-name:zoomInUp;animation-name:zoomInUp;-webkit-animation-duration:3s;animation-duration:3s;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:3s;animation-duration:3s;animation-fill-mode:both}

@-webkit-keyframes fadeIn{0%{opacity:0}

100%{opacity:1}

}

@keyframes fadeIn{0%{opacity:0}

100%{opacity:1}

}

#site-subs{display:block;padding:15px;background:#fff;border:1px solid #dedede;border-right:0;border-bottom:0;border-radius:5px 0 0;-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)}

#mc_embed_signup{clear:left;font:16px Helvetica,Arial,sans-serif;width:100%}

#mc_embed_signup .button,#mc_embed_signup input.email{box-sizing:border-box;height:42px;line-height:42px;width:100%}

#mc_embed_signup form{text-align:left;padding:0}

.mc-field-group{display:inline-block}

#mc_embed_signup input.email{font-family:"Open Sans","Helvetica Neue",Arial,Helvetica,Verdana,sans-serif;font-size:.9em;border:1px solid #ABB0B2;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;color:#343434;background-color:#fff;padding:0 .8em;display:inline-block;margin-bottom:10px;vertical-align:top}

#mc_embed_signup .button:active,#mc_embed_signup .button:focus,#mc_embed_signup input.email:active,#mc_embed_signup input.email:focus{outline:0}

#mc_embed_signup label{display:block;font-size:20px;padding-bottom:10px;font-weight:700;color:#666}

#mc_embed_signup .our,#mc_embed_signup .to{font-family:Georgia;font-weight:400;font-size:22px}

#mc_embed_signup .get{font-family:Georgia;font-weight:400;font-size:16px}

#mc_embed_signup .clear{display:block;width:100%}

#mc_embed_signup .to{font-style:italic}

#mc_embed_signup .button{font-size:.9em;font-weight:700;border:none;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;letter-spacing:.03em;color:#fff;background-color:#333;padding:0 18px;display:inline-block;margin:0;transition:all .23s ease-in-out 0s}

#mc_embed_signup .button:hover{background-color:#007acc;cursor:pointer}

#mc_embed_signup div#mce-responses{float:left;top:-1.4em;padding:0 .5em;overflow:hidden;width:90%;margin:0 5%;clear:both}

#mc_embed_signup div.response{margin:1em 0;padding:1em .5em .5em 0;font-weight:700;float:left;top:-1.5em;z-index:1;width:80%}

#mc_embed_signup #mce-error-response{display:none}

#mc_embed_signup #mce-success-response{color:#529214;display:none}

#mc_embed_signup label.error{display:block;float:none;width:auto;margin-left:1.05em;text-align:left;padding:.5em 0}

.slideInUp{-webkit-animation-name:slideInUp;animation-name:slideInUp;-webkit-animation-duration:.5s;animation-duration:.5s;-webkit-animation-fill-mode:both;animation-fill-mode:both}

@-webkit-keyframes slideInUp{0%{-webkit-transform:translateY(100%);transform:translateY(100%);visibility:visible}

100%{-webkit-transform:translateY(0);transform:translateY(0)}

}

@keyframes slideInUp{0%{-webkit-transform:translateY(100%);transform:translateY(100%);visibility:visible}

100%{-webkit-transform:translateY(0);transform:translateY(0)}

}

.close-subOnscroll{position:absolute;top:-20px;right:10px;font-family:Arial;font-size:24px;font-weight:700;cursor:pointer;width:25px;color:#555;height:25px;line-height:25px;text-align:center;background:#fff;border:1px solid #dedede;border-radius:100%}

/*]]>*/

</style>

Kemudian silahkan simpan kode javascript di bawah ini di atas kode </body>


<script>

//<![CDATA[

  var appended = false,

  bookmark = document.createElement("div");

  bookmark.id = "fbOnscroll";

  bookmark.innerHTML = '<div id="fbbox-wrapper"><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%2Fkompiajaib&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="hidefbbox()"><span>&#215;</span> Don\'t Show Again</div>\

<div class="close-fbbox" onclick="hidefb()">&#215;</div>\

              </div>\

              <div class="layer fadeIn"></div></div>\

              <div id="site-subs" class="slideInUp">\

  <div id="mc_embed_signup">\

    <form action="URL EMBEDDED SIGNUP FORM MAILCHIMP" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>\

      <div id="mc_embed_signup_scroll">\

        <label for="mce-EMAIL">SUBSCRIBE <span class="to">to</span> <span class="our">Our News Letters</span><br/>\

        <span class="get">Get hottest posts into your inbox</span></label>\

        <input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required>\

        <div style="position: absolute; left: -5000px;" aria-hidden="true">\

          <input type="text" name="KODE UNIK DI SINI" tabindex="-1" value="">\

        </div>\

        <div class="clear"></div>\

          <input type="submit" value="Subscribe" onclick="hidesubscribebox()" name="subscribe" id="mc-embedded-subscribe" class="button">\

      </div>\

    </form>\

  </div>\

  <div class="close-subOnscroll" onclick="hidesubscribe()">&#215;</div>\

</div>\

';

function hidefb(){document.getElementById("fbbox-wrapper").style.display="none"}function hidefbbox(){document.getElementById("fbbox-wrapper").style.display="none",createCookie("hideDialog","hide",7000)}function hidesubscribe(){document.getElementById("site-subs").style.display="none"}function hidesubscribebox(){document.getElementById("site-subs").style.display="none",createCookie("hideDialog2","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("fbbox-wrapper").style.display="none"),readCookie("hideDialog2")&&(document.getElementById("site-subs").style.display="none"))};

//]]>

</script>

Ganti kode kompiajaib dengan username fans page facebook blog Anda. Ganti kode URL EMBEDED SIGNUP FORM MAILCHIMP dengan URL dari signup form Mailchimp (Embedded form) kemudian ganti juga KODE UNIK DI SINI dengan kode unik dari signup form tersebut.

2. Facebook Like Box dengan FeedBurner Subscribe Box