Blogger için Pop up Eposta Aboneliği Eklentisi

Blogger için Pop up Eposta Aboneliği Eklentisi CSS3 ve jQuery kullanılarak ile yapışmıştır. Blogunuza çok kolaylıkla ekeyebileceğiniz bu eklentiyi umarım beğenirsiniz.

Blogunuza eklemeden önce eğer jQuery kütüphaneniz yok ise önce onu eklemeniz gerekmektir. Aşağıdaki kodu Blogger > Tema > HTML'yi Düzenle yolunu izleyip, </head> kodunun hemen üstüne eklemeniz gerekmektedir.

HTML
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js' type='text/javascript'/>

Daha sonra Blogger > Yerleşim > Gadget Ekle yolunu izleyip HTML/JavaScript eklentisi ekleyin. Eklediğiniz bu eklentinin içine aşağıdaki kodu yapıştırın.

NOT: 4moblog yazan yerlere kendi FeedBurner kullanıcı adınızı yazmayı unutmayın.

HTML
<style>
#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:200px;position:absolute;top:33%;left:28%;}
#closebox {float:right;cursor:pointer;position:absolute;right:-1px;top:-2px;}
#closebox:before {content:&quot;Close&quot;;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:200px;background-color:#286ab1;}
#subscribe-box p {font-family:&#39;Open Sans&#39;;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:&#39;Open Sans&#39;;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;}
</style>

<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>Yeni İçerikler için Abone Olun</p></center>
             <div class='emailfield'>
              <form action='http://feedburner.google.com/fb/a/mailverify?uri=4moblog' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=4moblog, &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;Adınız&quot;;}' onfocus='if (this.value == &quot;Adınız&quot;) {this.value = &quot;&quot;;}' value='Adınız'/>
               <input type='text' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Eposta Adresiniz&quot;;}' onfocus='if (this.value == &quot;Eposta Adresiniz&quot;) {this.value = &quot;&quot;;}' value='Eposta Adresiniz'/>
<input name='uri' type='hidden' value='4moblog'/>
<input name='loc' type='hidden' value='en_US'/>
                <input class='submitbutton' type='submit' value='Hemen Abone Ol!'/>

              </form>
             </div></div> 
</div>
</div>

Önizleme