أداة تعطيل مانع الأعلانات AdBlock لبلوجر
يوليو 10, 2019![]() |
| أداة تعطيل مانع الأعلانات AdBlock لبلوجر |
تحقق كل الصفحات أو المدونات تقريبًا عائدًا من خلال الإعلانات ، ولكن هناك عددا لا يحصى من أدوات منع الإعلانات ، من أجل جعل تجربة من يتصفح الشبكة أكثر إمتاعًا ، ولكن تسبب خسائر في المواقع التي مازالت تعمل بفضل الإعلان.
أحد الحلول المتاحه لدينا لتقليل عدد أدوات منع الإعلانات النشطة على صفحتنا هو تحذير نطلب فيه المستخدمين بإيقاف تشغيل 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="رابط الصوره">أحفظ التغييرات وهذا كل شيء. إذا قمت بتخصيص الإشعار بشكل صحيح ، يمكنك إعطائه نمطًا أكثر اتساقًا مع مدونتك ولن تشعر بالأختلاف عن تصميم مدونتك .
الخلاصه
إذا كانت هذه الموضوع قد ساعدتك ، لا تنسى مشاركته ، ستساعد المزيد من الأشخاص وستساعدني كثيرًا ، بالطبع سأكون ممتنًا أيضًا. أي مشكلة واجعتك أتركها في التعليقات.
