Cara Membuat PopUp Widget Subscribe Box Responsive Di Blog Terbaru

Cara Membuat PopUp Widget Subscribe Box Responsive Di Blog Terbaru - Selamat malam sobat BacaLagi yang mungkin lagi duduk manis didepan TV ...


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.

Langkah-Langkah :

1. Login Blog dan menuju Dashboard Blogger kamu.
2. Kemudian pilih Tab Template.
3. Pilih Edit HTML.
4. Cari kode ]]></b:skin> atau </style>, agar cepet menemukannya gunakan CTRL+F dan Letakkan kode CSS dibawah ini tepat diatas diatas kode tersebut. 
#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>

Ganti semua ID Feedburner yang saya blok warna biru muda dengan ID Feedburner Kamu yang kamu bikin di Google Feedburner.
Jika Kamu belum mendaftarkan Blog kamu di Google Feedburner Silahkan baca Artikel saya mengenai Daftarkan Blog Di Google Feedburner : Cara Mendaftarkan Blogger Di Google Feedburner Terbaru

9. Kemudian setelah menaruh Script Diatas lalu Simpan Widget.
10. Selesai.

Coba sekarang kamu buka Homepage Blog kamu dan liat hasilnya. Untuk Live Demo, saya mohon maaf belum bisa memasang diartikel ini atau artikel-artikel lainnya yang membahas mengenai Widget atau Tips Blogging lainnya dikarenakan saya belum mendapat server terbaik untuk sarana Demo.

Butuh Niche Template Full Fitur SEO Friendly Untuk Memaksimalkan Google AdSense Kamu? Niche Templates Full Fitur AdSense 2016

Nah itulah Langkah-langkah Membuat PopUp Widget Subscribe Box Responsive yang telah Valid HTML5, CSS3 dan Jquery serta saya berani menjamin bahwa PopUp Widget Subscribe Box ini tidak akan membuat Loading Blog menjadi berat atau lama. Sekian dari saya dan Semoga Bermanfaat..

COMMENTS

BLOGGER: 1
Loading...
Destinasi Wisata di Singapura
Nama

AdSense,2,AdWords,1,Android,5,aplikasi kasir online omegasoft,2,bersama untan membangun negeri,1,Bisnis,1,Bisnis Online,1,Blogger,20,Blogging,20,Blogging Competition,1,Bussiness,1,CSS,1,Depok News,3,Gadget,5,Hiburan,2,HTML,1,Investement,1,iphone,1,Komunitas,2,Kontes SEO,1,Lifestyle,5,Pikko Group,1,RSMRM,1,SEO,7,Signature Park Grande,1,Smart City Indonesia,1,Software,2,Software Kasir,1,Software POS,1,Tech News,16,teknologi,16,Tips and Trik,11,Traveling,2,Unik,1,Widget,6,Windows,4,
ltr
item
Bacalagers Design: Cara Membuat PopUp Widget Subscribe Box Responsive Di Blog Terbaru
Cara Membuat PopUp Widget Subscribe Box Responsive Di Blog Terbaru
https://4.bp.blogspot.com/-LrMoTGEWVug/WBc7QQKMxKI/AAAAAAAAA7Y/D0AfOfrhJOsXc_qBt3KYAl3OXE9ht-nlgCLcB/s1600/PopUp%2BSubscribe%2BBox%2BCover.jpg
https://4.bp.blogspot.com/-LrMoTGEWVug/WBc7QQKMxKI/AAAAAAAAA7Y/D0AfOfrhJOsXc_qBt3KYAl3OXE9ht-nlgCLcB/s72-c/PopUp%2BSubscribe%2BBox%2BCover.jpg
Bacalagers Design
https://designmbc.blogspot.com/2016/10/cara-membuat-popup-widget-subscribe-box.html
https://designmbc.blogspot.com/
https://designmbc.blogspot.com/
https://designmbc.blogspot.com/2016/10/cara-membuat-popup-widget-subscribe-box.html
true
6049018267264755231
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy