Cara Membuat PopUp Widget Subscribe Box Responsive Di Blog Terbaru
Cara Membuat PopUp Widget Subscribe Box Responsive Di Blog Terbaru

Cara Membuat PopUp Widget Subscribe Box Responsive Di Blog Terbaru

PopUp Widget Subscribe Box Responsive - Postingan saya kali ini berdasarkan request sohib dan beberapa orang lainnya yang membutuhkan PopUp Widget Subscribe Box.



Cara Membuat PopUp Widget Subscribe Box Responsive Di Blog Terbaru - Selamat malam sobat Bacalagers.com 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 Membuat Widget PopUp Kotak Berlangganan:

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.

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

Baca juga:






WAJIB DIKETAHUI!
Iklan yang tampil pada halaman Situs ini sepenuhnya diatur oleh pihak google, kami hanya menyediakan Slot Kosong. Jadi jika ada iklan yang kurang berkenan untuk Anda, harap informasikan kepada kami melalui Formulir Kontak Situs ini untuk selanjutnya akan Kami sampaikan ke pihak Google, Terima Kasih!

Jika Anda merasa bahwa artikel di blog ini bermanfaat, Anda bisa memberikan donasi melalui Paypal atau dengan Klik Donasi. Dengan Membaca Bismillah, Dana hasil dari Donasi yang Anda berikan akan digunakan untuk Bersodaqoh kepada Kaum Dhuafa dan Anak Yatim setiap Bulannya, Semoga Rezeki yang telah Anda berikan mendapat Balasan yang setimpal oleh Allah SWT, Amin. Terima kasih..
Admin
Adalah Tempatnya Panduan Blogger dan Belajar SEO untuk Pemula, Berita Teknologi Terbaru Seputar Smartphone Terbaru dan Tips Gaya Hidup Sehat.

Loading...

1. Silahkan berikan komentar dengan Tata Bahasa yang baik agar orang lain tahu sebijak apa karakter Anda melalui kata-kata.
2. Ketik komentar Anda untuk hal apapun yang masih berhubungan dengan artikel pada halaman ini.
3. Dimohon untuk tidak menyertakan Link Aktif pada kolom komentar.
4. Mohon maaf apabila tidak sempat membalas komentar satu persatu.
5. Komentar selalu di Moderasi.
6. Jangan lupa Ngopi.
EmoticonEmoticon