مرحبا اصدقائي محورنا اليوم عن أضافة مهمة جدا في المواقع الاكترونية وهي "اداة الاشتراك عبر البريد" وبوظيفتها تعتبر احد الادوات الخاصة ببناء زوار أو جماهير للموقع ومن وجهة نضري انا ككاتب أو مدون يجب ان تتوفر هذي الاضافة في كل موقع حتى تصل مواضيع موقعك لزوارك فور نشرها
مميزات الاداة
منبثقة وقابلة للأغلاق وتفتح مباشر عند دخول الموقع و بتصميم فلات ديزاين ولاننسى التأثير الاستعراضي الحركي والاجمل انها خارج نطاق الازعاج :) بمعنى لاتظهر للزائر الا مره واحده جربها الان احترافية جدا قد تكن الافضل بين جميع الاداوت التي تعمل بنفس الوظيفة التي طرحت خلال هذي فتره
طريقة التركيب
بلوجر / التخطيط / اضافة اداة جافا سكربت واضف الكود التالي مع مراعاة تغير معرفات ونصوص
غيره بمعرفك في Feedburner
تغير الرسالة التوجيهية للأداة
نصوص قابلة للتغير
<style>
#backgroundPopup {
display: none;
position: fixed;
_position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
background-color: transparent;
background: rgba(0, 0, 0, 0.5);
z-index: 999999999;
}
#popupContact {
position: absolute;
top: 18%;
left: 25%;
display: none;
position: fixed;
_position: absolute;
height: 64%;
width: 50%;
background: #FFFFFF;
box-shadow: 0px 5px 42px 2px #000;
z-index: 999;
padding: 8px;
font-size: 13px;
}
.pop-up-self {
background: #FFF;
}
.subscribe-title {
text-align: center;
font-size: 25px;
position: relative;
margin-top: 9px;
margin-bottom: 16px;
font-family: sans-serif;
}
.content-sub {
background: #00ACf5;
float: left;
padding: 25px;
margin-left: 15px;
margin-right: 15px;
}
.content-img img {
float: left;
width: 160px;
padding-top: 25px;
}
.content-text {
color: #FFF;
text-align: center;
font-family: sans-serif;
font-size: 18px;
line-height: 25px;
padding-left: 183px;
padding-top: 17px;
}
.content-form {
margin-top: 32px;
}
.content-form form input.email-address-subscribe:hover {
box-shadow: 0 0 7px -1px #004E6F;
background: #F7F7F7;
}
.content-form form input.email-address-subscribe {
font-size: 16px;
transition: .2s;
padding: 18px;
border-radius: 5px;
width: 90%;
border: 0;
}
.content-form form input.buttom-subscribe {
padding: 18px;
cursor: pointer;
color: #FFF;
font-weight: 700;
font-family: sans-serif;
border: 0;
border-bottom: 3px solid #74A700;
font-size: 16px;
background: linear-gradient(#a9d249, #8dc437);
}
#prdh {display:none}
#popupContactClose:active {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFoAAABaCAMAAAAPdrEwAAAAY1BMVEUAAAD///+SkpI9PT339/eenp4zMzP8/Pzw8PC7u7vFxcXs7Oz09PRsbGxKSkqOjo7l5eWIiIitra0qKioPDw/T09NWVlZ3d3fNzc0aGhpPT0+AgIBFRUVeXl5jY2Pe3t4iIiLbYsqoAAADUklEQVRYhe3Z25qiMAwA4FRAQFCxHnAUdd7/KQcVsG0OLbC7315MLgf8J9bSpgHUXwv4pf9Huiyqqij/LF0edd3AEE2tjyH/wUsX+nIAFIeLLubRsY4w20ek48l0uSPytXLfSQPD0/FOdt+x4zNnae3JeMhcj6Srxo/20VRj6DwcfkYeTtfjZIA6kE5PY2WAUxpCx1/jZYAvPFMQXS6nyABLNMVdOp2U8ytvd0xc+jJVBrjI9Hq6DLCWaD1HBtA8/ZgnAzxYeuLk+MSSo5O5MkBC0xlx601a/27E3zKSJmZHu+6w20z75Vf4r2uKLkhZxYz9evoIuyBonHS3VpJLd/S+hu0a0zjpfhVON4Tcr0bYLhC9cG+5fkYN2dHn2ta9tkA0+u/GD+LmvTFWULxtuPQRf+nF5/PK2h02xgXiWTg69BXfwtmbVJSHkexp8hkn7ZOc8+dp7+iKugdgazA3LKOf/h2VRXPVwc61A+R+1nY0W4Q5trlzc3L/mY7miyXLNnNGE3qIxqLZ26xHJzVylopNk46F+0w7TIbYoJkJwttygVwZ9Fm8E9vUA2bE2aCJddeKepQMK4P2Fr3rMXI3sQPppbHWpd6y3qR9AxIpK4i9wYpVOB05FS6173C0XDY5Ofvzfhg0VYKwOT+D2+ffkRm09KATOT9DspVJfwflvDXWbyHvvUWzZ66lvYqa+w5r1xbNVZLmCeW1Phs2m3di0cSGTuTs2FzeD4suydMRyjko7/6c1+/o97CcQ/K+K5smVhEy54C8c4dO0R3fipHtvPfog8qhcQ28YGX52hrReI4MZwdiZg42XiKOiMb1wj5j5cHO0Hg0CtN4YT1krNzZGT5FrQia+EGeebMnvgWVc79+ODSxrR9yoSq45sTJ70zS5GMzMu6Kpsv5dMnQcxsLTmvBblrMaoe4DRGn1RLYkqTjoCRaris9UYk0tyeExFHJtLeQYmPlSriFONFGMtX4nDQm7mjQ9JTfkuozk53glGr9CHEjmrVsa3xUhyuhDa6hXwR3QC/cWxT+NURg553uuMt0u1rhld6JPfsOwkO3mYsl+obP2E+3Y54wh6Im8b2pCni9VuRXp0aKrrn3DVj4S8HinOukDZ2fA9RR9IT4pf8d/QPBoSMrFGvocgAAAABJRU5ErkJggg==) no-repeat;
background-size: 20px;
width: 18px;
height: 19px;
}
#popupContactClose {
background:url(data:image/png;base64,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) no-repeat;
width: 20px;
background-size: 20px;
height: 20px;
display: inline;
z-index: 3200;
border-radius: 100%;
overflow: hidden;
position: absolute;
top: -10px;
right: -10px;
cursor: pointer;
text-indent: -99999px;
}
</style>
<div id="backgroundPopup">
<div id="popupContact">
<a href="javascript:void(0);" id="popupContactClose">x</a>
<div class="pop-up-self">
<div class="subscribe-title">
اشترك الان ليصلك كل جديد </div><div class="content-sub">
<div class="content-img">
<img src="http://s1.postimg.org/o61eqmvtn/set_37_icon.png" />
</div>
<div class="content-text">
مرحبا ايها الزائر ما رأيك ان تشترك في خدمة رسائل البريد ليصلك كل ما يطرح جديد في عالم التقنية
</div>
<div class="content-form">
<a href="http://www.bloggerguider.com" id="prdh">Blogger Guider</a><form action="https://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open("https://feedburner.google.com/fb/a/mailverify?uri=Feedblogger", "popupwindow", "scrollbars=yes,width=550,height=520"); return true" target="popupwindow">
<table width="100%">
<tbody><tr>
<td>
<input class="email-address-subscribe" name="email" placeholder="Email" type="text" />
</td>
<td width="64px">
<input class="buttom-subscribe" type="submit" value="Subscribe Now!" />
</td>
</tr>
</tbody></table>
<input name="uri" type="hidden" value="اشترك الان" />
<input name="loc" type="hidden" value="en_US" />
</form>
</div></div>
</div>
</div>
<script type="text/javascript">
jQuery.cookie=function(key,value,options){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():'',options.path?'; path='+ options.path:'',options.domain?'; domain='+ options.domain:'',options.secure?'; secure':''].join(''));}
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;};
var popupStatus = 0;
//this code will load popup with jQuery magic!
function loadPopup(){
//loads popup only if it is disabled
if(popupStatus==0){
$("#backgroundPopup").fadeIn("slow");
$("#popupContact").fadeIn("slow");
popupStatus = 1;
}
}
//This code will disable popup when click on x!
function disablePopup(){
//disables popup only if it is enabled
if(popupStatus==1){
$("#backgroundPopup").fadeOut("slow");
$("#popupContact").fadeOut("slow");
popupStatus = 0;
}
}
//this code will center popup
function centerPopup(){
//request data for centering
var windowWidth = document.documentElement.clientWidth;
var windowHeight = document.documentElement.clientHeight;
var popupHeight = $("#popupContact").height();
var popupWidth = $("#popupContact").width();
//centering
$("#popupContact").css({
"position": "absolute",
});
}
//CONTROLLING EVENTS IN jQuery
$(document).ready(function(){
if ($.cookie("anewsletter") != 1) {
//centering with css
centerPopup();
//load popup
loadPopup();
}
//CLOSING POPUP
//Click the x event!
$("#popupContactClose").click(function(){
disablePopup();
$.cookie("anewsletter", "1", { expires: 7 });
});
});
</script></div>
