السلام عليكم متابعين المدونة الكرام معكم ابراهيم مجدي في درس جديد وهو من قسم اضافات بلوجر تكلمنا سابقا عن سكربت مانع للاد بلوك وهو اسكربت ...
السلام عليكم متابعين المدونة الكرام معكم ابراهيم مجدي في درس جديد وهو من قسم اضافات بلوجر
تكلمنا سابقا عن سكربت مانع للاد بلوك وهو اسكربت جيد جدا جدا لاكن مشكلتة الوحيده انه يمنع الزوار من دخول المدونة
الا عند اغلاق الاد بلوك وان كان محتواك غير حصري ف اغلب الزوار سيخرجون من المدونة .
وستتسب ب ارتفاع معدل الارتداد لهاذا اقدم لكم درس اليوم وهو عن سكربت جميل جدا استعمله في مدونتي يقوم فقط بتنبيه الزائر لاكن يجعل الزائر يكمل التصفح بشكل عادي .
صورة من الأضافة يمكنك معاينتها من مدونتي بتشغيل الاد بلوك
والان كما تري ف الاسكربت بة زر لاغلاق الرسالة واكمال التصفح بكل سهولة وهاذا ما يريد اغلب المدونين في المجال التقني واغلب المجالات الاخري .
والان نتجهة مباشرة الي شرح تركيب الاضافة والتركيز لكي نتجنب جميع المشاكل الممكنة .
شرح التركيب
- اولا يمكنك تحميل ملف الشرح كامل من هنا
او يمكنك اتباع الشرح ونسخ الاكواد من المدونة مباشرة ..
- اولا اذهب الي بلوجر
- ثم اذهب الي القالب او المظهر
- ثم اضغط علي تحرير Html
- ثم ركب الاكواد كما يلي
ابحث عن ]]></b:skin> وضع الكود التالي فوقها مباشرة
/* ADBlock
------------------------------ */
/* Adblocker Adsense */
#keep-ads{padding:0;position:fixed;bottom:0;opacity:0;height:auto;transition:all .6s cubic-bezier(.25,.8,.25,1);-webkit-transform:translateZ(0);transform:translateZ(0);backface-visibility:hidden;transition:all .2s ease-in-out,visibility 0s;transform-origin:bottom center;}
.keep-adsme{background:#e74c3c;color:#fff;position:absolute;text-align:center;padding:0 30px 30px 30px;margin:auto;top:30%;left:0;right:0;font-size:1.5rem;line-height:1.5;font-family:monospace;max-width:930px;box-shadow:0 20px 10px -10px rgba(0,0,0,0.15);transition:all .6s cubic-bezier(.25,.8,.25,1);border:15px solid rgba(0,0,0,.07);overflow:hidden;}
.keep-adsme:hover{box-shadow:0 20px 10px -10px rgba(0,0,0,0.2);}
.keep-adsme h4{display:inline-block;background:rgba(0,0,0,.07);padding:5px 25px 15px 25px;font-size:2.2rem;margin:0 auto}
#keep-ads p{margin:0}
#keep-ads a{color:#ffe88b;}#keep-ads a:hover{color:#ffe88b;text-decoration:underline}
#keep-ads.show{left:0;top:0;right:0;z-index:1000;pointer-events:auto;opacity:1;visibility:visible;transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1);animation:wobble .7s;opacity:1;}
.close-keep-ads{visibility:hidden;opacity:0;color:#ffe88b;text-align:center;position:absolute;bottom:10px;right:10px;font-size:42px;cursor:pointer;width:30px;height:30px;line-height:30px;border-radius:100%;transition:all .6s cubic-bezier(.25,.8,.25,1);transform:translate(0,50px);}
.close-keep-ads:hover{color:#fff;transform:scale(1.0);}
.keep-adsme:hover .close-keep-ads{visibility:visible;opacity:1;color:#ffe88b;transform:translate(0,0);}
#keep-ads p span {font-family:fontawesome;font-size:5rem;}
@keyframes wobble{0%{transform:scale(0) rotate(-54deg) translatey(40px)}45%{transform:scale(1.1) rotate(20deg) translatey(0px)}60%{transform:scale(1) rotate(-15deg) translatey(0px)}77%{transform:scale(1) rotate(10deg) translatey(0px)}100%{transform:translatey(0)}}
ثم ابحث عن <head/> او </head> وضع الكود التالي فوقها مباشرة
<b:if cond='data:blog.isMobileRequest == "true"'>
<style type='text/css'>
.keep-adsme{top:0;padding:15px;border:0;font-size:1.1rem;opacity:.99;bottom:0;font-family:arial;}
.keep-adsme h4{background:transparent;font-size:1.5rem;margin:40px auto 0 auto;}
.close-keep-ads{text-align:center;visibility:visible;opacity:1;color:#fff;bottom:20px;right:20px;padding:0;font-size:32px;width:38px;height:38px;line-height:32px;border-radius:100%;border:2px solid #fff;transform:translate(0,0);}
.close-keep-ads:hover,.keep-adsme:hover .close-keep-ads{background:#fff;color:#e74c3c;}
</style>
</b:if>
ثم ابحث عن </body> في نهاية القالب وضع الكود التالي فوقها مباشرة
<script type='text/javascript'>
//<![CDATA[
// Adblocker Adsense
function hidekeep(){document.getElementById("keep-ads").style.display="none"}setTimeout(function(){var e=document.getElementById("keep-ads"),t=document.querySelectorAll("ins.adsbygoogle");0===$(t).height()&&(e.className="show")},2e3);
//]]>
</script>
ثم احفظ القالب
واذهب الي التخطيط واضف اداة في اي مكان واختار Html/javascript وضع الكود التالي بها مع تغير ما ب الللون الاحمر
<div id='keep-ads'>
<div class='keep-adsme'>
<p><h4>Adblock Detected</h4></p>
<p><span><i aria-hidden='true' class='fa fa-exclamation-triangle'/></i></span></p>
<p> هل يعجبك المحتوي الخاص بنا !! </p>
<p> رجائا عزيزي الزائر اغلاق اضافة مانع الاعلانات لانها السبيل الوحيد لدعم المدون
واستمرار المدونة في العمل </p>
<div class='close-keep-ads' onclick='hidekeep()'>×</div>
</div>
</div>
يمكنك تغير مهو ملون ب اللون الاحمر ك مثال
والان مبروك لقد تم تركيب الأضافة بنجاح ويمكنك تجربتها بتشغيل الاد بلوك والمعاينه
- هل يعجبك المحتوي الخاص بنا !!
- رجائا عزيزي الزائر اغلاق اضافة مانع الاعلانات لانها السبيل الوحيد لدعم المدون واستمرار المدونة في العمل
والان مبروك لقد تم تركيب الأضافة بنجاح ويمكنك تجربتها بتشغيل الاد بلوك والمعاينه
- ملحوظة : الاسكربت لا يعمل الا عند وجود اعلانات جوجل ادسنس في مدونتك ولا يعمل علي اي نوع اعلانات اخر
تعليقات