Popup email subscription box widget for blogger

Ένα widget πλαισίου συνδρομής ηλεκτρονικού ταχυδρομείου είναι ένα κομψό γραφικό στοιχείο. Ο χρήστης θα δει αυτό το πλαίσιο όταν θα επισκεφθεί το blog σας για πρώτη φορά.

Δημιουργείται με Jquery και CSS3. Για να μάθετε πώς μπορείτε να προσθέσετε ένα widget πλαισίου συνδρομής ηλεκτρονικού ταχυδρομείου στο ιστολόγιό σας στο blogger. Ακολουθήστε τα παρακάτω βήματα.

*  *  *

Για να το προσθέσετε στο blog σας θα πρέπει να κάνετε: Προσθήκη gadget. 

Και στην συνεχεια HTML/JavaScript Προσθήκη και αντιγραφή επικόλληση τον παρακάτω κώδικα.

Αφού πρώτα αλλάξετε τους συνδέσμους που είναι μαρκαρισμένη με πορτοκαλι.





<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script> <style type="text/css">
#box-background{display:none;background:rgba(0,0,0,0.8);width:100%;height:100%;position:fixed;top:0;left:0;z-index:99999}#box-close{width:100%;height:100%;}#box-display{background:#fff;border:2px solid #eee;width:400px;height:300px;position:absolute;top:32%;left:25%;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px}#box-button{float:right;cursor:pointer;position:absolute;right:0;top:0}#box-button:before{content:"X";padding:5px 8px;background:#000;color:#fff;font-weight:700;font-size:10px;font-family:Tahoma}#box-link,#box-link a.visited,#box-link a,#box-link a:hover{color:#aaa;font-size:9px;text-decoration:none;text-align:center;padding:5px}
.hob-title{text-align:center;}
.hob-email{text-align:center;}
.hob-email input[type='text']{height:
35px;width:290px}
.hob-email input[type='Submit']{height:40px;background:#000;color:#fff}
</style>
<script type='text/javascript'>
//<![CDATA[
jQuery.cookie=function(a,b,c){if(arguments.length>1&&"[object Object]"!==String(b)){if(c=jQuery.extend({},c),null!==b&&void 0!==b||(c.expires=-1),"number"==typeof c.expires){var d=c.expires,e=c.expires=new Date;e.setDate(e.getDate()+d)}return b=String(b),document.cookie=[encodeURIComponent(a),"=",c.raw?b:encodeURIComponent(b),c.expires?"; expires="+c.expires.toUTCString():"",c.path?"; path="+c.path:"",c.domain?"; domain="+c.domain:"",c.secure?"; secure":""].join("")}c=b||{};var f,g=c.raw?function(a){return a}:decodeURIComponent;return(f=new RegExp("(?:^|; )"+encodeURIComponent(a)+"=([^;]*)").exec(document.cookie))?g(f[1]):null};
//]]>
</script>
<script type='text/javascript'>
jQuery(document).ready(function($){
if($.cookie('popup_box') != 'yes'){
$('#box-background').delay(5000).fadeIn('medium');
$('#box-button, #box-close').click(function(){
$('#box-background').stop().fadeOut('medium');
});
}
$.cookie('popup_box', 'yes', { path: '/', expires: 7 });
});
</script>
<div id='box-background'>
<div id='box-close'>
</div>
<div id='box-display'>
<div id='box-button'>
</div>
<h4 class='-hob-title'>Subscribe to our newsletter</h4>
<div class='hob-email'>
<p>Receive the latest tutorials to your inbox by submitting your email address</p>
<form action='https://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open("https://feedburner.google.com/fb/a/mailverify?uri=Your blog feedburner address", "popupwindow", "scrollbars=yes,width=550,height=520"); return true' target='popupwindow'>
<input gtbfieldid='3' name='email' onblur='if (this.value == "") {this.value = "Enter your email address...";}' onfocus='if (this.value == "Enter your email address...") {this.value = "";}' type='text' value='Enter your email address...'/>
<input name='uri' type='hidden' value='Your blog feedburner address'/><input name='loc' type='hidden' value='en_US'/>
<input type='Submit' value='Subscribe'/>
</form>