هيلبرنت | Helpernt

هيلبرنت | Helpernt (https://www.helpernt.com/vb/index.php)
-   ركن تطوير المواقع (https://www.helpernt.com/vb/forumdisplay.php?f=88)
-   -   [blogger] شرح تركيب اضافة مانع الإعلانات بشكل جذاب سلس ومتجاوب (https://www.helpernt.com/vb/showthread.php?t=10697)

khairanynabil 06-06-2020 06:05 PM
شرح تركيب اضافة مانع الإعلانات بشكل جذاب سلس ومتجاوب
 
السلام عليكم ورحمة الله تعالى وبركاته
مرحبا بكم أعضاء و الزوار معهد هيلبرنت ,في هذا الموضوع سوف نطرح اضافة مانع الإعلانات بشكل جديد
بالنسبة لناشري adsense، يمثل مانع الإعلانات تحديًا. فهو يؤدي إلى انخفاض الدخل بشكل كبير وهو أمر محزن للغاية ولكن هذه حقيقة يمكننا التعايش معها الآن.

وظيفة مانع الإعلانات
Anti AdBlock هي سلسلة من البرامج النصية التي تجبر مظهر الموقع على عرض إشعارات معينة إذا قام مستخدم المتصفح بتنشيط AdBlock. عادة ما يغطي برنامج مكافحة adblock محتوى الموقع بالكامل (overlay)، والذي يحتوي على إشعار لمستخدمي المتصفح لتعطيل مانع الإعلانات الذي يستخدمونه. الغرض من إنشاء مانع الإعلانات هو أن تستمر الإعلانات في الظهور، من أجل دعم بقاء واستمرار موقع يعتمد على إيرادات الإعلانات

شرح طريقة التركيب
  • 1. سجل الدخول إلى مدونتك
  • 2. المظهر >> تعديل HTML
  • 3. ابحث عن ]]></b:skin> ثم ضع الكود فوقه

كود:
/*!
 * Anti-adblock v2.1.0
 * Copyright 2019 zkreations
 * Daniel Abel M. (fb.com/danieI.abel)
 * Licensed under MIT (github.com/zkreations/plugins/blob/master/LICENSE)
 * Blogger Version
 */
@font-face {
  font-family: &quot;wgd&quot;;
  src: url(https://cdn.jsdelivr.net/gh/da2l/host@1/dist/fonts/wgd.woff) format(&quot;woff&quot;);
  font-weight: normal;
  font-style: normal;
}
[class^=&quot;wgd-&quot;]:before,
[class*=&quot; wgd-&quot;]:before {
  font-family: &quot;wgd&quot; !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.wgd-usd:before {
  content: &quot;\61&quot;;
}
.wgd-eur:before {
  content: &quot;\62&quot;;
}
.wgd-btc:before {
  content: &quot;\63&quot;;
}
.wgd-times:before {
  content: &quot;\64&quot;;
}
@keyframes square {
  0% {
    transform: translateY(0) scale(1.5) rotate(0);
    opacity: 1
  }
  100% {
    transform: translateY(-600px) scale(1) rotate(-200deg);
    opacity: 0
  }
}
.WgD-particles i {
  font-size: 4em;
  font-weight: 400;
  position: absolute;
  bottom: -100px;
  animation: square 10s infinite;
}
.WgD-particles i:nth-child(6),
.WgD-particles i:nth-child(4),
.WgD-particles i:nth-child(11),
.WgD-particles i:nth-child(8) {
  font-size: 3em;
}
.WgD-particles i:nth-child(2),
.WgD-particles i:nth-child(3),
.WgD-particles i:nth-child(10) {
  font-size: 2em;
}
.WgD-particles i {
  animation-duration: 16s;
}
.WgD-particles i:nth-child(1) {
  left: 15%;
}
.WgD-particles i:nth-child(2) {
  left: 24%;
  animation-duration: 8s
}
.WgD-particles i:nth-child(3) {
  left: 50%;
  animation-delay: 5s
}
.WgD-particles i:nth-child(4) {
  left: 40%;
  animation-delay: 7s;
  animation-duration: 15s
}
.WgD-particles i:nth-child(5) {
  left: 36%;
  animation-delay: 6s
}
.WgD-particles i:nth-child(6) {
  left: 44%;
  animation-delay: 10s;
  animation-duration: 20s
}
.WgD-particles i:nth-child(7) {
  left: 58%;
  animation-delay: 2s;
  animation-duration: 18s
}
.WgD-particles i:nth-child(8) {
  left: 45%;
  animation-duration: 14s
}
.WgD-particles i:nth-child(9) {
  left: 66%;
  animation-delay: 3s;
  animation-duration: 12s
}
.WgD-particles i:nth-child(10) {
  left: 74%;
  animation-duration: 25s
}
.WgD-particles i:nth-child(11) {
  left: 80%;
  animation-delay: 4s
}
body.ab-is-detected {
  overflow: hidden !important;
}
[id=WgD] {
  display: none;
}
[id=WgD].is-detected {
  display: block;
}
@keyframes wgdfade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
#WgD {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  font-size: 14px;
  animation: wgdfade .3s;
  z-index: 99999;
}
.WgD-position {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 900;
}
.WgD-title {
  margin: 0;
  margin-bottom: .5em;
  font-size: 1.6em;
  font-weight: 800;
  font-family: &#39;bein-normal&#39;, sans-serif;
  color: #333;
}
.WgD-text {
  margin: 0;
  font-weight: 400;
  font-family: &#39;bein-normal&#39;, sans-serif;
  color:#6d707a;
}
.WgD-reload {
  text-decoration: none;
  display: inline-block;
  margin-top: 2em;
  font-weight: 500;
  transition: transform .3s;
  font-family: &#39;bein-normal&#39;, sans-serif;
}
.WgD-reload:hover {
  transform: scale(1.05);
}
.WgD-close {
  position: absolute;
  top: 0;
  right: 0;
  text-decoration: none;
  font-size: 20px;
  color: #999;
  padding: 1rem;
  line-height: 1;
  display: block;
}
.WgD-container img {
  max-width: 100%;
  margin-bottom: 1em;
  object-fit: cover;
}


/* Base
-----------------------------------------*/
[id=WgD] {
  font-family: &#39;Roboto&#39;, sans-serif; /*fuente*/
  background: #FF416C; /*fondo por defecto */
  background: linear-gradient(to right, #FF4B2B, #FF416C);
}
.WgD-particles i {
  color: rgba(0, 0, 0, 0.2); /*color particulas*/
}
/* Animacion (daneden.github.io/animate.css/)
-----------------------------------------*/
.WgD-container {
  animation: bounceIn 1s; /*nombre y duracion*/
}
/* Cuerpo
-----------------------------------------*/
.WgD-container {
  padding: 3.2em; /*naruto(relleno)*/
  max-width: 450px; /*ancho maximo*/
  background-color: #fff; /*color*/
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2), 0 10px 20px rgba(0, 0, 0, 0.1);
  text-align: center;
  line-height: 1.5;
  border-radius: 10px;
  color: #37474F;
}
.WgD-title {
  font-size: 1.6em;
}
.WgD-text {
  font-size: 1.2em;
}
/* Boton Recargar
-----------------------------------------*/
a.WgD-reload {
color: #fff !important;
}
.WgD-reload {
  box-shadow: rgba(0, 0, 0, .12) 0 3px 13px 1px;
  color: #fff;
  padding: 1em 1.5em;
  background: #F44336; /*color*/
  border-radius: 3px;
}
.WgD-reload:hover {
    color: #fff;
}
.WgD-close:hover {
    color: #464646;
}
/* Imagen
-----------------------------------------*/
.WgD-container img {
  max-height: 200px;
}
  • 4. ابحث عن </body> ثم ضع الكود التالي فوقه

كود:
<div id='WgD'>
  <div class='WgD-position'>
    <div class='WgD-container'>
      <h3 class='WgD-title'>تم الكشف عن مانع الإعلانات!</h3>
      <p class='WgD-text'>يرجى إيقاف <strong>Adblock</strong> للاستمرار في دعم الموقع من أجل التطوير</p>
      <a class='WgD-reload' href='#' onclick='adBlockReload()'>تعطيل Adblock &amp; إعادة تحميل</a>
    </div>
  </div>
  <div class='WgD-particles'>
    <i class='wgd-usd'/>
    <i class='wgd-eur'/>
    <i class='wgd-usd'/>
    <i class='wgd-eur'/>
    <i class='wgd-btc'/>
    <i class='wgd-usd'/>
    <i class='wgd-usd'/>
    <i class='wgd-eur'/>
    <i class='wgd-btc'/>
    <i class='wgd-usd'/>
    <i class='wgd-eur'/>
 </div></div>


<!-- Adblock -->
<script>
function adBlockClose() {
  document.getElementById(&quot;WgD&quot;).classList.remove(&quot;is-detected&quot;);
  document.body.classList.remove(&quot;ab-is-detected&quot;)
};
function adBlockReload() {
  window.location.reload();
  return !1
};
function adBlockDetected() {
  document.getElementById(&quot;WgD&quot;).classList.add(&quot;is-detected&quot;);
  document.body.classList.add(&quot;ab-is-detected&quot;)
};
if(typeof fuckAdBlock !== &#39;undefined&#39; || typeof FuckAdBlock !== &#39;undefined&#39;) {
 adBlockDetected();
} else {
 var importFAB = document.createElement(&#39;script&#39;);
 importFAB.onload = function() {
  fuckAdBlock.onDetected(adBlockDetected)
  fuckAdBlock.onNotDetected(adBlockNotDetected);
 };
 importFAB.onerror = function() {
  adBlockDetected();
 };
 importFAB.integrity = &#39;sha256-xjwKUY/NgkPjZZBOtOxRYtK20GaqTwUCf7WYCJ1z69w=&#39;;
 importFAB.crossOrigin = &#39;anonymous&#39;;
 importFAB.src = &#39;https://cdnjs.cloudflare.com/ajax/libs/fuckadblock/3.2.1/fuckadblock.min.js&#39;;
 document.head.appendChild(importFAB);
}
</script>

النوميدي 06-06-2020 11:02 PM
رد: شرح تركيب اضافة مانع الإعلانات بشكل جذاب سلس ومتجاوب
 
ي
سلموا ... صحيح أن مانع الأعلانات متعب للكثير
تقبل مروري ...يا طيب..،

abo-karim 06-07-2020 12:15 AM
رد: شرح تركيب اضافة مانع الإعلانات بشكل جذاب سلس ومتجاوب
 
عااااش

اضافة مهمه جدا

ولا اعرف اللى بيركب مانع الاعلانات بمتصفحه هبستفاد ايه غير انه بيقلل فرص مكسب صحب الموقع من الاعلانات

الله يهدى الجميع

تسلم ايدك

khairanynabil 06-07-2020 01:24 AM
رد: شرح تركيب اضافة مانع الإعلانات بشكل جذاب سلس ومتجاوب
 
اقتباس:
المشاركة الأصلية كتبت بواسطة النوميدي (المشاركة 36988)
ي
سلموا ... صحيح أن مانع الأعلانات متعب للكثير
تقبل مروري ...يا طيب..،
شكرا أخي على مرورك الجميل
اقتباس:
المشاركة الأصلية كتبت بواسطة abo-karim (المشاركة 36989)
عااااش

اضافة مهمه جدا

ولا اعرف اللى بيركب مانع الاعلانات بمتصفحه هبستفاد ايه غير انه بيقلل فرص مكسب صحب الموقع من الاعلانات

الله يهدى الجميع

تسلم ايدك
الله يهدي الجميع اخي الكريم

MesterPerfect 06-07-2020 01:50 AM
رد: شرح تركيب اضافة مانع الإعلانات بشكل جذاب سلس ومتجاوب
 
طرح مميز ورائع جدا

أعجبتني كثيرا

رايح أجربها للXenForo

جزيت خيرا أخي

MesterPerfect 06-07-2020 01:58 AM
رد: شرح تركيب اضافة مانع الإعلانات بشكل جذاب سلس ومتجاوب
 
مع أحترامي لكما أخي الحبيب @khairanynabil وأخي الحبيب @abo-karim
نحن ننظر للموضوع من وجهة نظرنا كأصحاب مواقع وليس مستخدمين عاديين جدا
فأنا كمستخدم عادي جدا جدا وجهة نظري أن من يقوم بعمل موقع لديه وقت ويريد مساعدة الآخرين ليس أكثر والإعلانات هذه شيء يضرني انا كا مستخدم ويُثقل التصفح, فلمذا أتركه لهذا الأفضل استخدام مانع إعلانات
ولا يهمني مقدار المجهود الذي يتعب فيه صاحب المحتوى ولا بالوقت والمجهود والاستضافة التي يدفع لها صاحب الموقع ولا أي شيء من هذا فهو شخص لديه وقت ويريد المساعدة فقط
وما يهمني أن آخذ ما أريده من معلومة وأطير دون شكر أو غيره
وإذا قيدني بمانع الإعلانات وغيره سأذهب إلى حبيبي فيسبوك وأبحث هناك
هذه وجهة نظر أي مستخدم عادي ليس له إلمام بالأمور التقنية وبالمجهود الذي نُبذله أخوتي في عمل المحتوى
لهذا لا تستغربو من مستخدمي مانع الإعلانات

khairanynabil 06-07-2020 02:29 AM
رد: شرح تركيب اضافة مانع الإعلانات بشكل جذاب سلس ومتجاوب
 
اقتباس:
المشاركة الأصلية كتبت بواسطة MesterPerfect (المشاركة 37005)
طرح مميز ورائع جدا

أعجبتني كثيرا

رايح أجربها للXenForo

جزيت خيرا أخي
شكرا أخي العزيز

اقتباس:
المشاركة الأصلية كتبت بواسطة MesterPerfect (المشاركة 37006)
مع أحترامي لكما أخي الحبيب @khairanynabil وأخي الحبيب @abo-karim
نحن ننظر للموضوع من وجهة نظرنا كأصحاب مواقع وليس مستخدمين عاديين جدا
فأنا كمستخدم عادي جدا جدا وجهة نظري أن من يقوم بعمل موقع لديه وقت ويريد مساعدة الآخرين ليس أكثر والإعلانات هذه شيء يضرني انا كا مستخدم ويُثقل التصفح, فلمذا أتركه لهذا الأفضل استخدام مانع إعلانات
ولا يهمني مقدار المجهود الذي يتعب فيه صاحب المحتوى ولا بالوقت والمجهود والاستضافة التي يدفع لها صاحب الموقع ولا أي شيء من هذا فهو شخص لديه وقت ويريد المساعدة فقط
وما يهمني أن آخذ ما أريده من معلومة وأطير دون شكر أو غيره
وإذا قيدني بمانع الإعلانات وغيره سأذهب إلى حبيبي فيسبوك وأبحث هناك
هذه وجهة نظر أي مستخدم عادي ليس له إلمام بالأمور التقنية وبالمجهود الذي نُبذله أخوتي في عمل المحتوى
لهذا لا تستغربو من مستخدمي مانع الإعلانات
نعم أخي لقد لاحظت العديد من المواقع تستعمل الإشهارات المنبثقة لهذا ينزعج المستخدم
أنا كذالك كمستخدم عادي سأستعمل مانع الإعلانات لمثل هذه المواقع

MesterPerfect 06-07-2020 02:34 AM
رد: شرح تركيب اضافة مانع الإعلانات بشكل جذاب سلس ومتجاوب
 
اقتباس:
المشاركة الأصلية كتبت بواسطة khairanynabil (المشاركة 37009)
نعم أخي لقد لاحظت العديد من المواقع تستعمل الإشهارات المنبثقة لهذا ينزعج المستخدم
أنا كذالك كمستخدم عادي سأستعمل مانع الإعلانات لمثل هذه المواقع
الفكرة هنا أن الإضافة لا تُفرق بين هذا وذاك

والمستخدم العادي لا يفكر في عمل استثناء لأي موقع

khairanynabil 06-07-2020 04:37 AM
رد: شرح تركيب اضافة مانع الإعلانات بشكل جذاب سلس ومتجاوب
 
اقتباس:
المشاركة الأصلية كتبت بواسطة MesterPerfect (المشاركة 37010)
الفكرة هنا أن الإضافة لا تُفرق بين هذا وذاك

والمستخدم العادي لا يفكر في عمل استثناء لأي موقع
بلفعل كلامك صح أخي


الساعة الآن 02:31 AM

Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd. TranZ By Almuhajir