sliding ad unit on the phone

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

 أولا  تبحث عن هذا الوسم</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 وبعد ذلك تقوم بوضع كود الأعلان.