Cara Membuat PopUp Widget Subscribe Box Responsive Di Blog Terbaru - Selamat malam sobat BacaLagi yang mungkin lagi duduk manis didepan TV atau PC atau Lepi dan sedang mencari Tutor ini hehe. Postingan saya kali ini berdasarkan request sohib dan beberapa orang lainnya yang membutuhkan PopUp Widget Subscribe Box. Enggak usah berlama-lama deh langsung masuk aja ke Langkah-langkahnya.


1. Login Blog dan menuju Dashboard Blogger kamu.

#sub-box
 
{display:none;background:rgba(0,0,0,0.9);width:100%;height:100%;position:fixed;top:0;left:0;z-index:99999;}
#boxclose {width:100%;height:100%;-webkit-transform:translateZ(0);}
#boxview {background:#fff;border:8px solid 
#fff;width:600px;height:250px;position:absolute;top:33%;left:28%;}
#closebox 
{float:right;cursor:pointer;position:absolute;right:-1px;top:-2px;}
#closebox:before {content:"Close";padding:5px 
8px;background:#fff;color:#48cb7a;font-weight:normal;font-size:12px;font-family:Open
 sans;}
#boxlink,#boxlink a.visited,#boxlink a,#boxlink a:hover 
{color:#aaaaaa;font-size:9px;text-decoration:none;text-align:center;padding:5px;}
#subscribe-box {width:600px;height:250px;background-color:#02BA74;}
#subscribe-box p {font-family:'Open 
Sans';font-size:18px;color:#fff;line-height:20px;padding:10px 20px 0 
20px;margin:0;}
#subscribe-box .emailfield {padding:0px 20px 10px;}
#subscribe-box .emailfield input 
{background:#f9f9f9;color:#bbb;padding:10px;margin-top:10px;font-size:13px;font-family:'Open
 Sans';width:96.3%;border:0;transition:all 0.4s ease-in-out;}
#subscribe-box .emailfield input:focus 
{background:#fff;outline:none;color:#888;}
#subscribe-box .emailfield .submitbutton 
{background:#444;color:#fff;text-transform:uppercase;font-weight:normal;font-size:
 
16px;border:none;outline:none;width:100%;cursor:pointer;border-radius:3px;transition:all
 0.4s ease-in-out;}
#subscribe-box .emailfield .submitbutton:active 
{outline:none;border:none;background:#fff;color:#e25734;}
#subscribe-box .emailfield 
.submitbutton:hover{background:#fff;color:#444;}

Jika kamu mau Custom PopUp Widget Subscribe nya, Silahkan kamu atur Kode CSS nya sesuai kebutuhan kamu.

5. Simpan Template.
6. Silahkan menuju atau pilih Tab Tata Letak atau Layout.
7. Kemudian Add New Gadget dan Terserah kamu mau meletakkan Widget ini di Sidebar, Footer, Bawah Posts Widget, atau lainnya karena ini tidak akan berpengaruh pada Tata Letak atau Layout Blog Kamu.
8. Taru Kode HTML/Javascript dibawah ini pada Mode HTML.

<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(''));
}
// 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'){
$('#sub-box').delay(3000).fadeIn('fast');
$('#closebox, #boxclose').click(function(){
$('#sub-box').stop().fadeOut('fast');
});
}
});
</script>
<div id='sub-box'>
<div id='boxclose'>
</div>
<div id='boxview'>
<div id='closebox'>
</div>
<div id='subscribe-box'>
<center><p>Subscribe for Latest 
Update</p></center>
<div class='emailfield'>
<form action='http://feedburner.google.com/fb/a/mailverify?uri=bacalagicom' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=bacalagicom,
 &apos;popupwindow&apos;, 
&apos;scrollbars=yes,width=550,height=520&apos;);return true' 
target='popupwindow'>
<input type='text' name='name' onblur='if (this.value == 
&quot;&quot;) {this.value = &quot;Your Name&quot;;}' 
onfocus='if (this.value == &quot;Your Name&quot;) {this.value = 
&quot;&quot;;}' value='Your Name'/>
<input type='text' name='email' onblur='if (this.value == 
&quot;&quot;) {this.value = &quot;Your Email&quot;;}' 
onfocus='if (this.value == &quot;Your Email&quot;) {this.value =
 &quot;&quot;;}' value='Your Email'/>
<input name='uri' type='hidden' value='bacalagicom'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='submitbutton' type='submit' value='Subscribe Now!'/>
</form>
</div>
</div> 
</div>
</div>