Langsung saja ini menjawab pertanyaan yang masuk melalui email, bagi sahabat yang ingin menggabungkan Facebook Like dengan Subscribe Box secara PopUp, setelah aku coba utak atik dan tanya sana-sini berikut cara ini mampu digunakan, terima kasih untuk Kang Adhy Suryadi atas inspirasinya.
Langsung saja berikut Cara Menggabungkan Facebook Like dan Subscribe Box silahkan simak dan mampu ikuti caranya.
Cara Pertama
Facebook Like Box menggunakan Mailchimp di Subscribe Box
Silahkan salin instruksi CSS ini dan letakkan sempurna diatas instruksi </head> perhatikan kode-kodenya
<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>Setelah langkah diatas lanjut sahabat silahkan simpan instruksi Javascript berikut letakkan sempurna diatas 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="fb:page Facebook Social Plugin" src="https://www.facebook.com/v2.7/plugins/page.php?adapt_container_width=true&app_id=1190181487715105&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%2Fdbalikcom&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" 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> Perhatikan yang ditandai silahkan ganti dbalikcom dengan user facebook sobat, kemudian ganti URL EMBEDDED SIGNUP FORM MAILCHIMP dengan url mailchimp sobat(embedded form), lalu ganti juga KODE UNIK dengan instruksi unik yang didapat dari form tersebut.
Cara Ke Dua
Facebook Like Box menggunakan Subscribe Box Feedburner
Ini cara ke dua silahkan sahabat salin instruksi CSS ini kemudian simpan sempurna diatas 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>Setelah instruksi diatas terpasang lanjut sahabat salin instruksi Javascript berikut ini simpan diatas 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="fb:page Facebook Social Plugin" src="https://www.facebook.com/v2.7/plugins/page.php?adapt_container_width=true&app_id=1190181487715105&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%2Fdbalikcom&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=dibalikseo', '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="dibalikseo"/>\ <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> Perhatikan instruksi dibalikcom yang ditandai silahkan ganti dengan username fans page facebook sahabat lalu silahkan ganti user dibalikseo dengan feedburner sobat. Kemudian untuk instruksi fontawesome yang di blok paling bawah ini untuk sahabat yang belum menggunakan font awesome di blognya, namun jikalau sudah terpasang silahkan dihapus saja.
Baiklah sahabat ini saja yang mampu aku bagikan di postingan ini agar dapat menjawab pertanyaan dari mas hendragit, regzait jikalau ada yang ingin ditambahkan atau dikoreksi silahkan dikolom komentar ini.
Comments