Menggabungkan Popup Facebook Like Box Onscroll Dengan Subscribe Box Onscroll
Setelah kemarin kita menciptakan subscribe box dengan show onscroll dengan dilengkapi dengan cookie baik untuk FeedBurner maupun Mailchimp dan juga menciptakan popup facebook like box onscroll yang juga dilengkapi dengan cookie, sekarang kita akan menciptakan adonan popup facebook like box dengan subscribe box dengan show onscroll.Ini dibuat/digabungkan semoga kedua widget dapat berjalan, sebab kalau disimpan di blog secara sendiri-sendiri maka salah satu widget tidak akan berjalan sebab ada instruksi javascript yang bentrok.
Nah kalau 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
Silahkan simpan instruksi CSS di bawah ini di atas instruksi
</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 instruksi javascript di bawah ini di atas instruksi
</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="Menggabungkan Popup Facebook Like Box Onscroll Dengan Subscribe Box Onscroll" src="https://www.facebook.com/v2.7/plugins/page.php?adapt_container_width=true&app_id=113869198637480&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&container_width=613&hide_cover=false&href=https%3A%2F%2Fwww.facebook.com%2Fkompiajaib&locale=en_US&sdk=joey&show_facepile=true&small_header=false" style="border: none; visibility: visible; width: 340px; height: 214px;" class=""></iframe>\
<div class="close-fbcookie" onclick="hidefbbox()"><span>×</span> Don\'t Show Again</div>\
<div class="close-fbbox" onclick="hidefb()">×</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()">×</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 instruksi
kompiajaib dengan username fans page facebook blog Anda. Ganti instruksi URL EMBEDED SIGNUP FORM MAILCHIMP dengan URL dari signup form Mailchimp (Embedded form) lalu ganti juga KODE UNIK DI SINI dengan instruksi unik dari signup form tersebut.2. Facebook Like Box dengan FeedBurner Subscribe Box
Silahkan simpan instruksi CSS di bawah ini di atas instruksi
</head> <style>
/*<![CDATA[*/
#subscribe-box2 .emailfield .submitbutton,.close-fbbox,.close-fbcookie{transition:all .4s ease-in-out;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;color:#555;height:25px;line-height:25px;text-align:center;background:#fff;border:1px solid #dedede;border-radius:100%}
.layer,.subscribe_box2{position:fixed;right:0;bottom:0}
.close-fbcookie{background:#fff;padding:1px 5px;border:1px solid #dedede;border-radius:2px;font:11px Arial;color:#555;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;-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:3s;animation-duration:3s;-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}
}
.subscribe_box2{width:400px;margin:0;padding:0}
#subscribe-box2{width:100%;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);margin:0;padding:10px 0;border:1px solid #dedede;border-right:0;border-bottom:0;border-radius:5px 0 0}
#subscribe-box2 p{font-size:18px;color:#666;font-weight:300;text-align:center;line-height:20px;padding:10px 20px 0;margin:0}
#subscribe-box2 .emailfield{padding:0 20px 10px}
#subscribe-box2 .emailfield input{color:#777;padding:10px 10px 10px 30px;margin-top:10px;font-size:15px;font-weight:300;width:100%;background:#ebebeb;border:1px solid #ccc;border-radius:4px;box-shadow:rgba(0,0,0,.247059) 0 1px 3px inset,#f5f5f5 0 1px 0;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
#subscribe-box2 .emailfield input:focus{outline:0;background:#f5f5f5}
#subscribe-box2 .emailfield .submitbutton{background:#F4836A;box-shadow:0 4px 0 0 #cb5940;color:#fff!important;border:none;font-weight:500;outline:0;width:100%}
#subscribe-box2 .emailfield .submitbutton:active,#subscribe-box2 .emailfield .submitbutton:hover{background:#fb6f50!important}
#subscribe-box2 .subs-title{font-family:Roboto,sans-serif;font-weight:900!important;color:#333!important;font-size:24px!important}
#subscribe-box2 .subs-title2{font-family:Georgia,sans-serif;font-style:italic;font-weight:400!important}
#subscribe-box2 .form-button:before,#subscribe-box2 .form-email:before,#subscribe-box2 .form-name:before{font-family:FontAwesome;font-style:normal;font-weight:400;text-decoration:inherit;padding-right:.5em;top:-2px}
#subscribe-box2 .form-button,#subscribe-box2 .form-email,#subscribe-box2 .form-name{position:relative!important}
#subscribe-box2 .form-name:before{content:'\f007';color:#777;font-size:16px;position:absolute;left:10px}
#subscribe-box2 .form-email:before{content:'\f0e0';color:#777;font-size:16px;position:absolute;left:10px}
#subscribe-box2 .form-button:before{content:'\f1d8';color:#fff;font-size:18px;position:absolute;left:50%;margin-left:-70px}
#subscribe-box2 input.submitbutton{background-color:#F4836A!important}
.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 instruksi javascript di bawah ini di atas instruksi
</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="Menggabungkan Popup Facebook Like Box Onscroll Dengan Subscribe Box Onscroll" src="https://www.facebook.com/v2.7/plugins/page.php?adapt_container_width=true&app_id=113869198637480&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&container_width=613&hide_cover=false&href=https%3A%2F%2Fwww.facebook.com%2Fkompiajaib&locale=en_US&sdk=joey&show_facepile=true&small_header=false" style="border: none; visibility: visible; width: 340px; height: 214px;" class=""></iframe>\
<div class="close-fbcookie" onclick="hidefbbox()"><span>×</span> Don\'t Show Again</div>\
<div class="close-fbbox" onclick="hidefb()">×</div>\
</div>\
<div class="layer fadeIn"></div></div>\
<div class="subscribe_box2 slideInUp" id="site-subs">\
<div id="subscribe-box2">\
<p class="subs-title">SUBSCRIBE <span class="subs-title2">to Our Newsletter</span></p>\
<p>Sign up here with your email address to receive updates from this blog in your inbox.</p>\
<div class="emailfield">\
<form action="//feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('//feedburner.google.com/fb/a/mailverify?uri=KompiAjaib', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">\
<span class="form-name">\
<input name="name" onblur="if (this.value == "") {this.value = "Your Name";}" onfocus="if (this.value == "Your Name") {this.value = "";}" type="text" value="Your Name"/></span>\
<span class="clear"></span>\
<span class="form-email">\
<input name="email" onblur="if (this.value == "") {this.value = "Your Email";}" onfocus="if (this.value == "Your Email") {this.value = "";}" type="text" value="Your Email"/></span>\
<input name="uri" type="hidden" value="KompiAjaib"/>\
<input name="loc" type="hidden" value="en_US"/>\
<span class="form-button">\
<input class="submitbutton" type="submit" onclick="hidesubscribebox()" value="Subscribe Now!"/></span>\
</form>\
</div>\
</div>\
<div class="close-subOnscroll" onclick="hidesubscribe()">×</div>\
</div>\
';
function hidefb(){document.getElementById("fbbox-wrapper").style.display="none"}function hidefbbox(){document.getElementById("fbbox-wrapper").style.display="none",createCookie("hideDialog","hide",7e3)}function hidesubscribe(){document.getElementById("site-subs").style.display="none"}function hidesubscribebox(){document.getElementById("site-subs").style.display="none",createCookie("hideDialog2","hide",7e3)}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"))};
function loadCSS(e,t,n){"use strict";var o=window.document.createElement("link"),s=t||window.document.getElementsByTagName("script")[0];o.rel="stylesheet",o.href=e,o.media="only x",s.parentNode.insertBefore(o,s),setTimeout(function(){o.media=n||"all"})}loadCSS("https://cdn.rawgit.com/KompiAjaib/font-awesome-4.6.3/master/css/font-awesome.min.css");
//]]>
</script>
Ganti instruksi
kompiajaib dengan username fans page facebook blog Anda. Silahkan ganti instruksi KompiAjaib dengan username FeedBurner blog Anda.Untuk instruksi javascript yang aku block paling bawah yaitu instruksi untuk Font Awesome, kalau blog Anda sudah mempunyai Font Awesome silahkan hapus instruksi tersebut.
Sumber https://www.kompiajaib.com/
0 Response to "Menggabungkan Popup Facebook Like Box Onscroll Dengan Subscribe Box Onscroll"
Posting Komentar