Membuat PopUp Like Box Facebook Dan Subscribe Box Keren Blogger Terbaru

Masih Tentang Blogger dalam post ini akan dibahas Cara Membuat PopUp Like Box Facebook Dan Subscribe Box Keren di Blogger Terbaru. Tutorial ini biasanya banyak kalian jumpai di berbagai blog tetapi biasanya hanya membuat like box untuk facebook saja tidak beserta subscribe box, padahal untuk menarik traffic atau pengunjung ke blog, RSS subscription juga tidak kalah penting.

Ok langsung biar gak panjang lebar jika kamu tertarik untuk memasang PopUp Like Box Facebook Dan Subscribe Box di blog kamu silahkan ikuti langkah sederhana dibawah:

Untuk Widget ini kamu hanya perlu menambahkan kode dibawah ini pada Widget Blogger

Login blogger > Tata letak > Klik tambahkan gadget kemudian klik HTML/JavaScript > Salin dan terapkan semua kode di bawah ini 

<style scoped='' type='text/css'>
#hideme{
display:none;
}
#overlay {
    position: fixed;
    top: 0;
    left: 0;
    background: #000;
    width: 100%;
    height: 100%;
    opacity: 0.8;
    z-index: 100;
    cursor: pointer;
}  
#popup {
    position: fixed;
    font-family: arial;
    top: 25%;
    left: 25%;
    right: 25%;
    bottom: 25%;
    background: #fff;
    width: 400px;
    height: 380px;
    margin: auto;
    z-index: 200;
    box-shadow: 0 0 15px rgba(0,0,0,0.4);
    border: 10px solid #00A2CA;
}
#fb-closebox {float:right;cursor:pointer;position:absolute;right:-1px;top:-5px;z-index:2;}
#fb-closebox:before {content:"CLOSE";padding:5px 8px;background:#00A2CA;color:#fff;font-weight:normal;font-size:9px;font-family:inherit;}
#Fb-Rss-conatner{
    margin-top:1.6em;
}
.Fbinfo {
    margin: 0px auto 1em auto;
    font-size: 16px !important;
    font-weight: bold !important;
    color: #fff;
    padding: 10px 15px;
    border-radius: 10px;
    width: 85%;
    text-align: Center;
    background: #00A2CA;
    box-shadow: 0px 0px 10px 0.8px #000;
}
#fbox {
    margin: 1.2em auto;
    width: 350px;
    height: 156px;
    box-shadow: 0px 0px 8px 2px #666;
}
#Rssfeed {
    margin: 12px auto 1em auto;
    font-size: 16px !important;
    font-family: arial !important;
    color: #fff;
    font-weight: bold;
    padding: 15px;
    border-radius: 10px;
    width: 85%;
    text-align: Center;
    background: #00A2CA;
    box-shadow: 0px 0px 10px 0.8px #000;
}
#Rssfeed form {
    margin: 10px auto;
}
.enteryouremail{
background: #fff !important;
border: 1px solid #d2d2d2;
padding: 0px 8px 0px 8px;
color: #a19999; font-size: 12px;
height: 25px; width: 200px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
margin:0px;
}
.submitbutton{
background:#F66303;
border: 1px solid #F66303;
text-shadow: 1px 1px 1px #333;
box-shadow: 3px 3px 3px #666;
font:bold 12px Arial, sans-serif;
color: #fff;
height: 25px;
padding: 0 12px 0 12px;
margin-left:10px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
cursor:pointer;}
    </style>
<script type='text/javascript'>
//<![CDATA[
jQuery.cookie = function (key, value, options) {
// Pengaturan cookie
if (arguments.length > 1 && String(value) !== "[object Object]") {
options = jQuery.extend({}, options);
if (value === null || value === undefined) {
options.expires = -1;
}
if (typeof options.expires === 'number') {
var days = options.expires, t = options.expires = new Date();
t.setDate(t.getDate() + days);
}
value = String(value);
return (document.cookie = [
encodeURIComponent(key), '=',
options.raw ? value : encodeURIComponent(value),
options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
options.path ? '; path=' + options.path : '',
options.domain ? '; domain=' + options.domain : '',
options.secure ? '; secure' : ''
].join(''));
}
// Dapatkan cookie
options = value || {};
var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent;
return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null;
};
//]]>
</script>
<script type='text/javascript'>
jQuery(document).ready(function($){
if($.cookie('popup_facebook_box') != 'yes'){
$('#hideme').delay(3000).fadeIn('fast');
$('#overlay, #fb-closebox').click(function(){
$('#hideme').stop().fadeOut('fast');
});
}
$.cookie('popup_facebook_box', 'yes', { path: '/', expires: 7 });
});
</script>
<div id="hideme">
<div id="overlay"></div>
<div id="popup">
<div id='fb-closebox'>
</div>
<div id="Fb-Rss-conatner">
    <div class="Fbinfo">
        Receive all Free updates via Facebook
</div>
<div id="fbox">
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Ffornesiacom&amp;width=350&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23ffffff&amp;stream=false&amp;header=false&amp;height=155" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:350px; height:155px;" allowtransparency="true"></iframe>
</div>
<div id="Rssfeed">
You can also receive Free Email Updates
    <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Imadenews', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="10" class="enteryouremail" name="email" value="Enter your email here..." onblur="if (this.value == '') {this.value = 'Enter your email here...';}" onfocus="if (this.value == 'Enter your email here...') {this.value = '';}" type="text" /><input value="Imadenews" name="uri" type="hidden" /><input value="Submit" class="submitbutton" type="submit" /></form>
</div>
</div>

INFO : Ingat untuk mengganti url fanpage facebook  dan rss subscribe pada script diatas.

...facebook.com%2Ffornesiacom
...mailverify?uri=Imadenews
...input value="Imadenews

Gunakan ctrl+f agar mudah mencarinya.

Jika belum punya rss feedburner kalian bisa lihat artikel ini.

Jika ingin memunculkan pop up like box ini setiap kali halaman blog dibuka (Tidak disarankan bikin risih loh), silakan hapus kode $.cookie(‘popup_facebook_box’, ‘yes’, { path: ‘/’, expires: 7 });
pada kode di atas dan menonaktifkan cookie : false pada script ini (Jika terpasang pada template)

<div id='fb-root'/>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'KODE-APLIKASI',
status : true, // check login status
cookie : false, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
(function() {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>

Untuk mengatur jeda waktu munculnya pop up like box, silakan atur nilai dari kode .delay(3000)

atau kamu juga bisa mengubah menjadi .delay(3000).fadeIn(‘1000’) & .fadeOut(‘1000’)

Silahkan kamu kreasikan sendiri bagaimana bagusnya, Jika mengerti CSS kamu juga bisa ubah warna pada Info Box atau border box pada popup.

 

(script diatas saya gabung sendiri atas referensi dari script yang saya lihat di master arlinadzgn dan master tricola. Terimakasih)