اضافة كود نافذة منبثقة عند محاولة الزائر الخروج من المدونة (بلوجر)

اضافة كود نافذة منبثقة عند محاولة الزائر الخروج من المدونة (بلوجر)


السلام و عليكم متابعي مدونة اكوا ويب اليوم جئتكم بإضافة جديدة و حصرية في العالم العربي . الإضافة الجميلة و المتناسقة التي سوف يحبها الجميع , فكما يعلم الكل , و خصوصا المدونين , فهم دائما يطمحون لتقديم الافضل لمدوناتهم و جعلها في ابهى حللها , و ذلك من اجل السهر على راحة الزائر و تقديم الافضل له من ناحية التصميم , و لذلك في هذا الموضوع الفريد من نوعه , سنقدم لكم اخواني الكرام كود لاضافة بلوجر جد رائعة ستعجب كل من يهتم بجمالية و ازدهار مدونته , حتى لا نطيل عليكم اكثر , ساترككم مع الكود و طريقة تركيبه .. و نتمنى ان تعجبكم الاضافة :


إضافة نافذة منبثقة تظهر للزائر عند محاولة الخروج من المدونة .

أولا نقوم بإضافة أكواد الخوط فقط إذا ما أعجبتك الخطوط المستعملة
نفتح محرر أكواد بلوجر و نبحث عن 
</head>
أو 
</body>
  و نضع قبلها هذا الكود الخاص بالخوط ( هذا الكود إختياري يمكنك تجنب إضافته )

<link href="http://fonts.hosni.netdna-cdn.com/fonts/cdn/file_font/?font=JF_Flat_Regular" rel="stylesheet">
<link href="http://fonts.hosni.netdna-cdn.com/fonts/cdn/file_font/?font=VIP_Rawy_Thin" rel="stylesheet">

بعد هذه الخطوة نقوم بإضافة كود الجافا سكريبت التالي الخاص بالإضافة :
<script type="text/javascript">
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('x b=["\\g\\h\\i\\g\\o\\j","\\p\\l\\c\\j\\e\\d\\L\\d\\o\\w\\w\\e\\m\\L\\i\\e\\h\\E","\\s\\c\\d\\1e\\i\\c\\u\\c\\h\\d\\1b\\R\\S\\j","\\n\\l\\c\\m","\\i\\g\\p\\o\\d\\e\\g\\h","\\n\\d\\d\\k\\W\\y\\y\\d\\o\\w\\e\\m\\m\\P\\z\\i\\g\\s\\q\\k\\g\\d\\P\\p\\g\\u\\y","\\q\\c\\d\\X\\d\\d\\l\\e\\z\\t\\d\\c","\\l\\c\\i","\\j\\g\\m\\g\\i\\i\\g\\F","\\e\\h\\h\\c\\l\\G\\1h\\1i\\1s","\\1t\\U\\V\\H\\T\\J\\Z\\1a\\K\\1c\\T\\J\\1d\\H\\1w\\K\\1f","\\i\\c\\m\\d","\\e\\h\\h\\c\\l\\1g\\e\\j\\d\\n","\\F\\e\\j\\d\\n","\\M\\c\\O\\e\\d\\k\\g\\k\\t\\k","\\p\\q\\q","\\d\\g\\k","\\e\\h\\h\\c\\l\\G\\c\\e\\s\\n\\d","\\n\\c\\e\\s\\n\\d","\\p\\i\\e\\c\\h\\d\\1k","\\m\\o\\j\\c\\S\\h","\\M\\c\\O\\e\\d\\k\\g\\k\\t\\k\\1l\\z\\s","\\u\\g\\t\\q\\c\\u\\g\\1m\\c","\\m\\o\\j\\c\\1q\\t\\d","\\q\\i\\e\\j\\c\\1r\\k","\\p\\i\\e\\p\\E","\\l\\c\\o\\j\\R"];x f=[b[0],b[1],b[2],b[3],b[4],b[5],b[6],b[7],b[8],b[9],b[10]];v[f[0]]=r(){x a=A[f[2]](f[1]);N(a==1j){v[f[4]][f[3]]=f[5]};a[f[6]](f[3],f[5]);a[f[6]](f[7],f[8]);a[f[9]]=f[10]};B=0;C=0;Q=10;$(A)[b[1n]](r(){1o(r(){C=1},Q);$(A)[b[1p]](r(a){$(b[14])[b[15]](b[11],(v[b[12]]/2-$(b[14])[b[13]]()/2));$(b[14])[b[15]](b[16],(v[b[17]]/2-$(b[14])[b[18]]()/2));N(a[b[19]]<=5&&B==0&&C==1){B=1;$(b[D])[b[I]]();$(b[14])[b[I]]()}});$(b[D])[b[1u]](r(){$(b[D])[b[1v]]();$(b[14])[b[Y]]()})});',62,95,'|||||||||||_0xe53e|x65|x74|x69|_0x8690|x6F|x6E|x6C|x64|x70|x72|x66|x68|x61|x63|x73|function|x67|x75|x6D|window|x71|var|x2F|x62|document|exitpopped|showpop|21|x6B|x77|x48|u062C|20|x20|u0627|x2D|x23|if|x78|x2E|delay|x79|x49|u0629|u0631|u0645|x3A|x41|24|u062B|||||||||||u0642|x42|u0641|u0623|x45|u0644|x57|x54|x4D|null|x59|x5F|x76|26|setTimeout|22|x4F|x55|x4C|u0628|25|23|u064A'.split('|'),0,{}))
</script>
و نضع أسفله كود ال CSS الخاص بالنافدة المنبثقة (يمكنك التغيير عليه كما تريد)
<style type="text/css">
#exitpopup{text-align:center}#exitpopup h1{margin-top:0;padding-top:0;font-family:"JF_Flat_Regular";font-size:34px}#exitpopup p{text-align:center;font-family:"VIP_Rawy_Thin";font-size:22px}input:required{border:1px solid red}.loginform ul{padding:0;margin:0}.loginform li{display:inline;float:right;margin-right:14px}label{display:block;color:#999}.cf:before,.cf:after{content:"";display:table}.cf:after{clear:both}.cf{*zoom:1}:focus{outline:0}.loginform input:not([type=submit]){padding:8px;margin-right:10px;border:1px solid rgba(0,0,0,0.3);border-radius:3px;box-shadow:inset 0 1px 3px 0 rgba(0,0,0,0.1),0 1px 0 0 rgba(250,250,250,0.5);font-family:"VIP_Rawy_Thin"}.loginform input[type=submit]{border:1px solid rgba(0,0,0,0.3);background:#64c8ef;background:-moz-linear-gradient(top,#64c8ef 0%,#00a2e2 100%);background:-webkit-gradient(linear,left top,left bottombottom,color-stop(0%,#64c8ef),color-stop(100%,#00a2e2));background:-webkit-linear-gradient(top,#64c8ef 0%,#00a2e2 100%);background:-o-linear-gradient(top,#64c8ef 0%,#00a2e2 100%);background:-ms-linear-gradient(top,#64c8ef 0%,#00a2e2 100%);background:linear-gradient(to bottombottom,#64c8ef 0%,#00a2e2 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#64c8ef',endColorstr='#00a2e2',GradientType=0);color:#fff;margin-top:0;padding:4px 15px;margin-right:0;margin-bottom:15px;border-radius:3px;text-shadow:1px 1px 0 rgba(0,0,0,0.3);font-family:"VIP_Rawy_Thin"}.presenattion{height:auto;width:100%}#credit-taqqif{position:absolute}#credit-taqqif a{background:url(https://lh4.googleusercontent.com/-THzB4L0VgIQ/UtYRH3aesAI/AAAAAAAAC_E/uGxweGx0vi0/s14/info2.png) no-repeat scroll 1px 1.4px #DDD;border:1px solid #BBB;border-radius:0 0 0 8px;color:rgba(0,0,0,0);display:block;font:bold 11px tahoma;height:16px;opacity:.9;overflow:hidden;padding:0 3px 1px 15px;text-align:right;text-decoration:none;transition:all .8s ease 0;width:0}#credit-taqqif a:hover{color:#000;transition:all .8s ease 0;width:100px}</style>



بعد هذه المرحة سوف نكون قد وصلنا للمرحلة قبل الأخيرة للإنتهاء من تثبيت الإضافة
بعد إضافة الأكواد السابقة نقوم بإضافة الكود التالي أسفل
<body>
الكود الذي يلزمنا إضافته أسفل ال body
<div style="display: none; width:100%; height:100%; position:fixed; background:#000000; opacity: .8; filter:alpha(opacity=0.8); z-index:999998;" id="exitpopup_bg"></div>

و الأن سوف أترككم مع كود النافذة ب ال HTML 
 مع طريقة تغير أزرار الفيسبوك و كود الفيدبيرنر
<div style="width:670px; height:450px; margin:0px auto; display:none; position:fixed; color:#ffffff; padding:20px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; z-index:999999; background:rgb(20, 20, 20); background:rgba(0, 0, 0, 0.8);" id="exitpopup">
    <div class="presenattion">       
        <-- لا تقم بحذف حقل الحقوق قد يؤدي الى عدم إشتغال الإضافة في موقعك -->
        <div id="credit-taqqif"><a id="credit-taqqif-link" href="" rel="" target="_blank"></a></div>
       
        <-- الحقول في الأسفل يمكنك التغيير عليها بدزن قيود -->   
        <h1>إنتضر قبل أن تغادر</h1>
        <p>إذا أعجبتك المواضع اللتي نقدمها في مدونتنا لا تنسى متابعتنا على شبكاتنا الإجتماعية و على البريد  ولا تنسى متابعتنا كذلك على البريد الإلكتروني للتوصل بجديد المواضيع فور كتابتها .</p>
    </div>
<section class="loginform cf" style="float: right;margin-right: 30%;"> 
<form name="login" action="http://feedburner.google.com/fb/a/mailverify?uri=aqua-weeb" method="post" onsubmit="window.open(&quot;http://feedburner.google.com/fb/a/mailverify?uri=aqua-weeb&quot;, &quot;popupwindow&quot;, &quot;scrollbars=yes,width=550,height=520&quot;); return true" target="popupwindow" accept-charset="utf-8">
    <ul><li><input type="email" name="usermail" onblur="if (this.value == '') {this.value = 'ضع اميلك هنا';}" onfocus="if (this.value == 'ضع اميلك هنا') {this.value = '';}" required placeholder="أكتب بريدك الإلكتروني" /></li>  <li><input type="submit" value="Login"/></li></ul> 
</form>
    </br>
    <iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fsunanewahikam&amp;width=61&amp;layout=box_count&amp;action=like&amp;show_faces=true&amp;share=false&amp;height=65" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:61px; height:65px;" allowTransparency="true"></iframe>       
    <iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Ftaqiff.blogspot.com%2F&amp;width=61&amp;layout=box_count&amp;action=like&amp;show_faces=true&amp;share=false&amp;height=65" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:61px; height:65px;" allowTransparency="true"></iframe>
</section> 
</div>

لإضافة هذا الكود نذهب الى تخطيط المدونة و نقوم بإضافة أداة
HTML/JavaScript
و نقوم بعمل لصق للكود السابق ثم حفظ.
لا تنسى تغيير  :
aqua-weeb : كود ال feedburner الخاص بك.
الكود باللون البرتقالي تغيره بروابط iframe الخاصة بأزرار الشبكات الإجتماعية كما يمكنك تغييرها و كتابة كود html خاص بك و إظهار رابط موضوع إفتراضي (على سبيل المثال)





شاركه على :