إعلان أعلي المقال

بلوجر

إضافة أداة الإشتراك عبر البريد منبثقة بشكل إحترافي

غير معرف 0
A+ A-


إضافة جميلة تستخدم كثيراً في المواقع المستخدمة لمنصة ووردبريس
واليوم نقدمها لمستخدمين بلوجر

ميزة الأداة:
الأداة منبثقة بشكل خفيف وقابلة للإغلاق، تفتح مباشر بمجرد دخول الزائر للموقع و بتصميم فلات ديزاين بالاضافة للتأثير الاستعراضي الحركي.
والاجمل أنها تظهر مرة واحدة للزائر باستخدام عنوان الـ IP، ما يجعلها غير مزعجة، الأداة احترافية جدا قد تكن الأفضل بين جميع الإضافات التي تؤدي نفس الوظيفة.




طريقة التركيب

من لوحة تحكم مدونتك => التخطيط => إضافة أداة جافا سكربت
 ثم تضيف الكود التالي مع تغير ما يجب تغييره:

- اللون الأحمر : 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(&quot;https://feedburner.google.com/fb/a/mailverify?uri=Feedblogger&quot;, &quot;popupwindow&quot;, &quot;scrollbars=yes,width=550,height=520&quot;); 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>

الوسوم:

مقالات ذات صلة

ليست هناك تعليقات:

إرسال تعليق

الاشتراك في: تعليقات الرسالة (Atom)

إعلان أسفل المقال

جميع الحقوق محفوظة© dzbit