اضافة وحدة اعلانية منزلقة تظهر على الهاتف لمدونات بلوجر

بالتاكيد الكل يبحث عن أفضل الأمكان لوضع اعلانات أدسنس فى مدونتك ، وبالتأكيد أنك تستخدم كود الأعلانات التقائية الجديده من أدسنس ، والتى تقوم بوضع بوضع لك وحدة اعلانية منزلقه فى اعلى الصفحة على الهواتف ، ولكنى فى بعض الأحياء قد يكون أمر ظهور اعلان أعلى الصفحة غير مناسب للبعض لذلك فى هذا الموضوع سوف أضع لكم كود يمكنكم من وضع وحدة اعلانية تظهر على الهاتف فقط مثل التى توفرها أدسنس ولكنى سوف تظهر اسفل الصفحة بدل من الأعلى وهكذا تكون مناسبه للجميع.

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

اضافة وحدة اعلانية منزلقة تظهر على الهاتف لمدونات بلوجر

معاينة للإضافة

كما قلت لكم اللإضافة لاظهر الوحدة الأعلانية سوف تعمل على الهاتف فقط لذلك يجب عليك مشاهدة المعاينة من الهاتف حتى تظهر لك.

معاينة 

صورة من الإضافة

اضافة وحدة اعلانية منزلقة تظهر على الهاتف لمدونات بلوجر

اضافة وحدة اعلانية منزلقة تظهر على الهاتف لمدونات بلوجر

التركيب للأضافة والأكواد سهل جدا سوف يكون عليك أولا أن تبحث عن هذا الوسم</head>وتقوم بوضع الكود التالى فوقه ، وفى بعض القوالب سوف تجد الوسم بهذا الشكل&lt;/head&gt;&lt;!--<head/>--&gt;ضع الكود التالى فوقه ايضا.

<b:if cond='data:blog.pageType not in {&quot;static_page&quot;,&quot;error_page&quot;,} and not data:blog.searchQuery and data:blog.isMobileRequest == &quot;true&quot;'>
<style>
/*<![CDATA[*/
.sticky-ads{display:-ms-flexbox;display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;position:fixed;overflow:visible;text-align:center;bottom:-104px;left:0;width:100%;z-index:9999;height:100px;background-image:none;background-color:#fff;margin-bottom:0;padding-top:4px;box-shadow:0 0 5px 0 rgba(0,0,0,0.2);transition:all .4s ease-in-out}
.sticky-ads-close{position:absolute;width:28px;height:28px;top:-28px;right:0;background-image:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMTMnIGhlaWdodD0nMTMnIHZpZXdCb3g9JzM0MSA4IDEzIDEzJyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHhtbG5zOnhsaW5rPSdodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rJz48Zz48cGF0aCBzdHlsZT0nZmlsbDojNEY0RjRGJyBkPSdNMzU0IDkuMzFMMzUyLjY5IDhsLTUuMTkgNS4xOUwzNDIuMzEgOCAzNDEgOS4zMWw1LjE5IDUuMTktNS4xOSA1LjE5IDEuMzEgMS4zMSA1LjE5LTUuMTkgNS4xOSA1LjE5IDEuMzEtMS4zMS01LjE5LTUuMTl6Jz48L3BhdGg+PC9nPjwvc3ZnPg==");background-size:13px 13px;background-position:9px;background-color:#fff;background-repeat:no-repeat;box-shadow:0 -1px 1px 0 rgba(0,0,0,0.2);border:none;border-radius:12px 0 0 0;cursor:pointer}
.sticky-ads-close:before{position:absolute;content:"";top:-20px;right:0;bottom:0;left:-20px}
*{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
:active,:focus{outline:0}
/*]]>*/
</style>
</b:if>

الأن الكود الأخير سوف تقوم بوضع فوقه الوسم</body>فى أسفل القالب.

<b:if cond='data:blog.pageType not in {&quot;static_page&quot;,&quot;error_page&quot;,} and not data:blog.searchQuery and data:blog.isMobileRequest == &quot;true&quot;'>
<div class='sticky-ads' id='sticky-ads'>

ضع الاعلان هنا

<button aria-label='Kapat' class='sticky-ads-close' onclick='document.getElementById(&apos;sticky-ads&apos;).style.display=&apos;none&apos;;'/>
</div>
<script>
//<![CDATA[
window.addEventListener("scroll",function(){
  var target = document.getElementById('sticky-ads');
  if(window.pageYOffset > 300){
   target.style.bottom = "0";
  }
},false);
//]]>
</script>
</b:if>

الان فى الكود سوف نجد عبارة ضع الإعلان هنا سوف تقوم بتغييرها بكود الأعلان الذى تريد أن ظهر ، وايضا يمكنك وضع ايضا اعلان تريده ليس بشرط الاعلان أدسنس.

ولجعل أعلان أدسنس يظهر بحجم متجاوب على الهاتف سوف تقوم بأنشاء وحده اعلانية  جديده مثلا 300x250 ، بعد ذلك سوف تقوم بتغيير العرض 300 الى 100% الأرتفاع 250 الى 100 وبعد ذلك تقوم بوضع كود الأعلان فى القالب ، او يمكنك أنشاء وحدة اعلانية جديد بهذا الحجم مرة واحده.

هذا كل شئ فى موضوع اليوم بالتوفيق للجميع وأنتظرونا بكل جديد بأذن الله على المدونة ، لا تنس مشاركة الموضوع حتى يتسفيد غيرك وأى مشكلة تجدها تضعها فى تعليق .