Hai, pada kesempatan kali ini saya akan membuat sebuah tutorial Cara Membuat PopUp Widget Subscribe Box Responsive Di Blog.
Suatu saat ketika sedang BW ke blog tetangga, saya melihat ada popup yang berisi ajakan dari si pemilik blog untuk mensubscribe artikel terbaru blog mereka. Terlintas di benak untuk ikut memsang popup itu. Tanpa banyak cincong, langsung saya menuju ke TKP (baca: Google), namun hanya sedikit tutorial yang memuat mengenai Cara Membuat PopUp Widget Subscribe Box Responsive Di Blog. Mumpung masih sedikit yang membuat tutorial mengenai Cara Membuat PopUp Widget Subscribe Box Responsive Di Blog, maka langsung terpikir untuk membuat tutorial ini. Dan saya yakin bahwa kamu pun akan tertarik dengan tutorial yang satu ini. Jadi, tanpa berpanjang lebar lagi, mari kita simak saja tutorial mengenai Cara Membuat PopUp Widget Subscribe Box Responsive Di Blog.
1. Login ke Blogger. Langsung menuju Dashboard.
2. Kemudian pilih Template lalu Edit HTML.
3. Lalu cari kode ]]></b:skin> atau </style>
4. Letakkan kode CSS di bawah ini di atas kode yang tadi kamu cari.
Cara Membuat PopUp Widget Subscribe Box Responsive Di Blog
1. Login ke Blogger. Langsung menuju Dashboard.
2. Kemudian pilih Template lalu Edit HTML.
3. Lalu cari kode ]]></b:skin> atau </style>
Agar lebih cepat, kamu bisa mneggunakan kombinasi CTRL+F.
4. Letakkan kode CSS di bawah ini di atas kode yang tadi kamu cari.
#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;}
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=ID-FEEDBURNER' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=ID-FEEDBURNER, 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>
<input type='text' name='name' onblur='if (this.value == "") {this.value = "Your Name";}' onfocus='if (this.value == "Your Name") {this.value = "";}' value='Your Name'/>
<input type='text' name='email' onblur='if (this.value == "") {this.value = "Your Email";}' onfocus='if (this.value == "Your Email") {this.value = "";}' value='Your Email'/>
<input name='uri' type='hidden' value='ID-FEEDBURNER'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='submitbutton' type='submit' value='Subscribe Now!'/>
</form>
</div>
</div>
</div>
</div>
Ganti ID-FEEDBURNER dengan ID Feedburner Kamu yang kamu bikin di Google Feedburner. Kamu bisa membuatnya di sini
9. Kemudian setelah menaruh Script Diatas lalu Simpan Widget.
10. Selesai.
Sekian artikel dari saya mengenai Cara Membuat PopUp Widget Subscribe Box Responsive Di Blog 2017, jika masih bingung silakan komen di kolom komentar di bawah. Jangan lupan untuk share post ini agar orang lain tau. Sekian, terima kasih.
Referensi : https://designmbc.blogspot.co.id
0 komentar