تحقق كل الصفحات أو المدونات تقريبًا عائدًا من خلال الإعلانات ، ولكن هناك عددا لا يحصى من أدوات منع الإعلانات ، من أجل جعل تجربة من يتصفح الشبكة أكثر إمتاعًا ، ولكن تسبب خسائر في المواقع التي مازالت تعمل بفضل الإعلان.
أحد الحلول المتاحه لدينا لتقليل عدد أدوات منع الإعلانات النشطة على صفحتنا هو تحذير نطلب فيه المستخدمين بإيقاف تشغيل AdBlock ، وفي هذا السياق سنركز عليه موضوعنا اليوم.
طريقة التثبيت
دعنا نذهب إلى لوحة تحكم بلوجر المظهر تخصيص الخيارات المتقدمة إضافة CSS. هنا سنقوم بلصق الكود التالي:
/*! * Mint Anti-adblock v1.1.5 * Copyright 2019 Mint Web * Husein farg . (fb.com/s7s199) * Licensed under MIT (github.com/Mint199/temb/blob/master/LICENSE) */ @font-face { font-family: 'Markazi Text'; src: url(data:application/font-woff;charset=utf-8;base64,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) format("woff"); font-weight: normal; font-style: normal;} [class^="Mintantiab-"]:before, [class*=" Mintantiab-"]:before { font-family: "Markazi Text" !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; } .Mintantiab-times:before { content: "\64"; } @keyframes square { 0% { transform: translateY(0) scale(1.5) rotate(0); opacity: 1 } 100% { transform: translateY(-600px) scale(1) rotate(-200deg); opacity: 0 } } body.ab-is-detected { overflow: hidden !important; } #MintantiAb { display: none; } #MintantiAb.is-detected { display: block; } @keyframes Mintantiabfade { from { opacity: 0; } to { opacity: 1; } } #MintantiAb { position: fixed; top: 0; left: 0; right: 0; bottom: 0; font-size: 14px; animation: Mintantiabfade .3s; z-index: 99999; } .MintantiAb-position { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 900; } .MintantiAb-title { margin: 0; margin-bottom: .5em; } .MintantiAb-text { margin: 0; font-weight: 400; } .MintantiAb-reload { text-decoration: none; display: inline-block; margin-top: 2em; font-weight: 500; transition: transform .3s; } .MintantiAb-reload:hover { transform: scale(1.05); } .MintantiAb-close { position: absolute; top: 0; right: 0; text-decoration: none; font-size: 20px; color: #999; padding: 1rem; line-height: 1; display: block; } .MintantiAb-container img { max-width: 100%; margin-bottom: 1em; object-fit: cover; } /* => التخصيص */ /* القاعدة الأساسية -----------------------------------------*/ #MintantiAb { font-family: 'Markazi Text', sans-serif; /*المصدر*/ background: #FF416C; /*الخلفية الافتراضية */ background-image: linear-gradient( 135deg, #81FBB8 10%, #28C76F 100%);/*التدرج*/ } .MintantiAb-particles i { color: rgba(0, 0, 0, 0.2); /*الوان الأيقوانت المتحركه في الخلفيه*/ } /* التحريك -----------------------------------------*/ .MintantiAb-container { animation: bounceIn 1s; /*المدة*/ } /* الجسم -----------------------------------------*/ .MintantiAb-container { padding: 3.2em; /*الحشو*/ max-width: 450px; /*أقصى عرض*/ background-color: #fff; /*خلفية*/ 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; } .MintantiAb-title { font-size: 1.6em; /*حجم العنوان*/ } .MintantiAb-text { font-size: 1.2em; /*حجم النص*/ } /* زر التحديث -----------------------------------------*/ .MintantiAb-reload { box-shadow: rgba(0, 0, 0, .12) 0 3px 13px 1px; /*الظل*/ color: #fff; padding: 1em 1.5em; /*الحشو*/ background: #28C76F; /*خلفية*/ border-radius: 3px; /*الحواف المنحنيه*/ } /* الصوره -----------------------------------------*/ .MintantiAb-container img { max-height: 200px; /*أقصى ارتفاع*/ } /*Demo*/ .demo { padding: 3rem; background: #fff; color: #757575; margin: auto; max-width: 400px; position: absolute; top: 50%;left: 50%; transform: translate(-50%,-50%); } body { background: #f1f1f1; line-height: 1.5; }
الأن أذهب إلي المظهر تعديل HTML وابحث عن
</body>
فوقه مباشرة اصف الكود التالي<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css"/> <div id="MintantiAb"> <div class='MintantiAb-position'> <div class='MintantiAb-container'> <a class='MintantiAb-close' href="#" onclick="adBlockClose()"><i class="Mintantiab-times"></i></a> <h3 class='MintantiAb-title'>تم الكشف عن أدبلوك </h3> <p class='MintantiAb-text'>الإعلانات تساعدنا في تمويل موقعنا، فالمرجو <strong>تعطيل مانع الإعلانات</strong> وساعدنا في تقديم محتوى حصري لك. شكرًا لك على <svg width="20" height="20" viewBox="0 0 200 200"> <g transform="translate(100 100)"> <path transform="translate(-50 -50)" fill="tomato" d="M92.71,7.27L92.71,7.27c-9.71-9.69-25.46-9.69-35.18,0L50,14.79l-7.54-7.52C32.75-2.42,17-2.42,7.29,7.27v0 c-9.71,9.69-9.71,25.41,0,35.1L50,85l42.71-42.63C102.43,32.68,102.43,16.96,92.71,7.27z"></path> <animateTransform attributeName="transform" type="scale" values="1; 1.5; 1.25; 1.5; 1.5; 1;" dur="1s" repeatCount="indefinite" additive="sum"> </animateTransform> </g> </svg>الدعم</p> <a class='MintantiAb-reload' href="#url">لقد قمت بتعطيل مانع الأعلانات</a> </div> </div> </div> <!-- Adblock --> <div class='demo'>إذا كنت تستطيع قراءة هذا النص فهذا يعني ان Adblock معطل ، قم بتنشيط adblock لرؤية الأداة.</div>
احفظ التغييرات وهكذا نكون انتهينا ، إذا كان لديك أداة Adblock مفعله على موقع الويب الخاص بك ، ستلاحظ أنه سيظهر تحذير وسيخفي كل محتوى الموقع.
التخصيص
زر الاغلاق
تحتوي الأداة بشكل إفتراضي على زر "إغلاق" في الركن الأيمن العلوي ، إذا كنت لا تريد أن يكون المستخدم قادرًا على إغلاق التحذير ، في هذه الحالة قم بالبحث عن الكود التالي:<a class="MintantiAb-close" href="#" onclick="adBlockClose()"><i class="Mintantiab-times"></i></a>
فقط قم بمسحه.
خلفية التدرج
لقد قمت بأنشاء تدرج بأستخدام UI Gradients . إذا كنت تريد استبدال التدرج اللوني بآخر ، ما عليك سوى تحديد واحدة جديدة في UI Gradients واستبدالها كما في الكود التالي:#MintantiAb { font-family: 'Markazi Text', sans-serif; /*المصدر*/ background: #FF416C; /*الخلفية الافتراضية */ background-image: linear-gradient( 135deg, #81FBB8 10%, #28C76F 100%);/*التدرج*/ }
أضافة صورة
لقد قمت بوضع ما إذا كان في الحسبان ان هناك احتمال أنك تريد إضافة صورة ، أذا كنت تريد جعل الشكل أكثر إحترافيه وبهذه الطريقة يمكنك إعطاء لمسة شخصية. للقيام بهذا قم بالبحث عن الكود التالي:<h3 class='MintantiAb-title'>تم الكشف عن أدبلوك </h3>
فوقه مباشرة قم بوضع وسم الصوره التي تريد مثل الكود التالي.
<img src="رابط الصوره">
أحفظ التغييرات وهذا كل شيء. إذا قمت بتخصيص الإشعار بشكل صحيح ، يمكنك إعطائه نمطًا أكثر اتساقًا مع مدونتك ولن تشعر بالأختلاف عن تصميم مدونتك .
الخلاصه
إذا كانت هذه الموضوع قد ساعدتك ، لا تنسى مشاركته ، ستساعد المزيد من الأشخاص وستساعدني كثيرًا ، بالطبع سأكون ممتنًا أيضًا. أي مشكلة واجعتك أتركها في التعليقات.