بسم الله الرحمن الرحيم
والصلاة والسلام على اشرف المرسلين
تحية طيبة عطرة وبعد
اضافة اداة الاشتراك بالبريد منزلقة الى بلوجر
نلتقي اليوم وموضوع جديد وهو عبارة عن اضافة من اضافات بلوجر الخاصة بالاشتراك بالبريد منبثقة بشكل منسق وجميل ويوجد بها زر الاغلاق وهي تعتبر من الاضافات التي لابد من وجودها في المدونة لاهميتها......
صور الاضافة
طريقة التركيب على المدونة
ادهب الى لوحة تحكم المدونة / التخطيط / إضافة أداة / Html/javascript
ثم الصق الكود التالي :
<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: 'Droid Arabic Kufi', 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: 'Droid Arabic Kufi', 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: 'Droid Arabic Kufi', 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?uri=blogspot/UcbcU" method="post" onsubmit="window.open("https://feedburner.google.com/fb/a/mailverify?uri=blogspot/UcbcU", "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=" ادخل بريدك الالكتروني" type="text" />
</td>
<td width="64px">
<input class="buttom-subscribe" type="submit" value="إشترك الأن" />
</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>
ثم غير كل ما هو باللون الاخضر والاحمر
بما ينا سبك
تم احفظ العمل
ومبروك علي الاضافة
تحياتي للجميع