Senin, 31 Oktober 2016

Cara Membuat PopUp Widget Subscribe Box Responsive Di Blog Terbaru

  Tidak ada komentar

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..

Tidak ada komentar :

Posting Komentar