شرح تركيب كود اعلان منبثق مع زر الاغلاق فى بلوجر

0

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

شرح تركيب كود اعلان منبثق مع زر الاغلاق فى بلوجر
شرح تركيب كود اعلان منبثق مع زر الاغلاق فى بلوجر

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

الطريقة الأولى :تركيب كود اعلان منبثق مع زر الاغلاق فى مدونة بلوجر

من خلال قالب مدونتك ابحث عن هذا الوسم

</body>

واعلاه ضع الكود التالى :

<style>
.hide{display:none;visibility:hidden;}
.popbox{position:fixed;top:0;left:0;bottom:0;width:100%;z-index:1000000;}
.pop-content{width:800px;height:400px;display:block;position:absolute;top:50%;left:50%;margin:-200px 0 0 -400px;z-index:2;box-shadow:0 3px 20px 0 rgba(0,0,0,.5);}
.popcontent{width:100%;height:100%;display:block;background:#fff;border-radius:5px;overflow:hidden}
.pop-overlay{position:absolute;top:0;left:0;bottom:0;width:100%;z-index:1;background:rgba(0,0,0,.7)}
.popbox-close-button{position:absolute;width:28px;height:28px;line-height:28px;text-align:center;top:-14px;right:-14px;background-color:#fff;box-shadow:0 -1px 1px 0 rgba(0,0,0,.2);border:none;border-radius:50%;cursor:pointer;font-size:34px;font-weight:lighter;padding:0}
.popcontent img{width:100%;height:100%;display:block}
.flowbox{position:relative;overflow:hidden}
@media screen and (max-width:840px){.pop-content{width:90%;height:auto;top:20%;margin:0 0 0 -45%}
.popcontent img{height:auto}
}
</style>
<div class="popbox hide" id="popbox">
<div aria-label='Close' class="pop-overlay" onclick='document.getElementById("popbox").style.display="none";removeClassonBody();' role="button" tabindex="0"/>
<div class="pop-content">
<a href="https://www.facebook.com/learnseoblogger2020" target="_blank" rel="noopener" title="تعلم سيو بلوجر بإحترافية">
<div class="popcontent">
<img  data-src="https://i.imgur.com/UFtOgRH.png" alt="banner" width="800" height="400"/>
</div>
</a>
<button aria-label='Close' class='popbox-close-button' onclick='document.getElementById("popbox").style.display="none";removeClassonBody();'>&amp;times;</button>
</div>
</div>
<script>
//<![CDATA[
setTimeout(function(){
 document.getElementById('popbox').classList.remove('hide');
 document.body.className+=" flowbox"
 }, 5000);
function removeClassonBody(){var element=document.body;element.className=element.className.replace(/bflowboxb/g,"")}
//]]>
</script>

وقم بتغيير الاتى حسب رغبتك :-

  1. – المظلل باللون الأصفر وهو مقاسات البنر الاعلانى تستطيع تغييرها الى اى مقاس تراه مناسب ولاحظ ان الـــ margin للصوره لابد ان يكون نصف المقاس أى 50% من قيمته ،فهنا اخترنا 800 و 400 بكسل والــ margin لهم 400 و 200 على التوالى.
  2. -المظلل باللون الأخضر وهو رابط تحميل البنر تستطيع ان تغيره لأى مركز تحميل تم رفع البنر عليه ولو حتى على المدونة والمقاسات هى نفس مقاسات الصوره المحمله وهى نفس المقاسات فى البند 1.
  3. – المظلل باللون الوردى وهو رابط ماتود توجيه الزائر اليه مثلا كصفجه على الفيسبوك أو موقع تجارى آخر أو منتج معروض من قبلك للبيع وكذلك اسم الصفحه او المنتج كما هو ظاهر بالكود.
  4. – الإعلان يظهر فى كامل صفحات المدونة.

للمعاينة

عيوب الكود:- 

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

<b:if cond='data:view.isHomepage'>
<style>
.hide{display:none;visibility:hidden;}
.popbox{position:fixed;top:0;left:0;bottom:0;width:100%;z-index:1000000;}
.pop-content{width:800px;height:400px;display:block;position:absolute;top:50%;left:50%;margin:-200px 0 0 -400px;z-index:2;box-shadow:0 3px 20px 0 rgba(0,0,0,.5);}
.popcontent{width:100%;height:100%;display:block;background:#fff;border-radius:5px;overflow:hidden}
.pop-overlay{position:absolute;top:0;left:0;bottom:0;width:100%;z-index:1;background:rgba(0,0,0,.7)}
.popbox-close-button{position:absolute;width:28px;height:28px;line-height:28px;text-align:center;top:-14px;right:-14px;background-color:#fff;box-shadow:0 -1px 1px 0 rgba(0,0,0,.2);border:none;border-radius:50%;cursor:pointer;font-size:34px;font-weight:lighter;padding:0}
.popcontent img{width:100%;height:100%;display:block}
.flowbox{position:relative;overflow:hidden}
@media screen and (max-width:840px){.pop-content{width:90%;height:auto;top:20%;margin:0 0 0 -45%}
.popcontent img{height:auto}
}
</style>
<div class="popbox hide" id="popbox">
<div aria-label='Close' class="pop-overlay" onclick='document.getElementById("popbox").style.display="none";removeClassonBody();' role="button" tabindex="0"/>
<div class="pop-content">
<a href="https://www.facebook.com/learnseoblogger2020" target="_blank" rel="noopener" title="تعلم سيو بلوجر بإحترافية">
<div class="popcontent">
<img src="https://i.imgur.com/UFtOgRH.png" alt="banner" width="800" height="400"/>
</div>
</a>
<button aria-label='Close' class='popbox-close-button' onclick='document.getElementById("popbox").style.display="none";removeClassonBody();'>&times;</button>
</div>
</div>
<script>
//<![CDATA[
setTimeout(function(){
 document.getElementById('popbox').classList.remove('hide');
 document.body.className+=" flowbox"
 }, 5000);
function removeClassonBody(){var element=document.body;element.className=element.className.replace(/bflowboxb/g,"")}
//]]>
</script>
</b:if>

الطريقة الثانية:كيفية تركيب كود اعلان مكتوب مع زر الاغلاق فى بلوجر

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

كيفية تركيب كود اعلان مكتوب منبثق مع زر الاغلاق فى بلوجر
كيفية تركيب كود اعلان مكتوب منبثق مع زر الاغلاق فى بلوجر

وسبق وان قمت بشرح طريقة مشابهه ولكن بوضع الاعلان كصوره وتؤدى الى رابط موقع اوصفحة اخرى أو الصوره تحمل الكلام الدعائى والمطلوب ان يطلع علية الزائر عبر المشاركة التاليه :
شرح تركيب كود اعلان منبثق مع زر الاغلاق فى بلوجر
واليوم سأشرح لكم كود اعلان مكتوب منبثق مع زر الاغلاق فى بلوجر تستطيع من خلاله كتابة المحتوى الدعائى لك وارفقاقه برابط ويتميز بالتالى :-

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

كيفية تركيب كود اعلان مكتوب مع زر الاغلاق فى بلوجر

1- لكى يظهر الكود فى كافة صفحات مواضيع المدونة .
– من خلال قالب مدونتك افتحه وابحث عن الوسم التالى

</head>

ثم اعلاة ضع الكود التالى :-

<style type='text/css'>
/* Pop Up learnwebseo.com */
@keyframes zoomIn{from{opacity:0}50%{opacity:1}}@keyframes slideDown{0%{opacity:0;transform:translateY(-10%)}100%{opacity:1;transform:translateY(0%)}}
#myModal{display:none}#arlinapuasa2019ku{line-height:1.55;display:block;background:#fff;position:fixed;top:25%;right:0;left:0;margin:auto;text-align:center;max-width:600px;box-shadow:0 0 2.5rem -1.5rem rgba(0,0,0,0.5);z-index:1001;min-height:325px;padding:20px;border-radius:10px;animation:slideDown 1s}#arlinapuasa2019ku .puasa19{position:absolute;color:#222;font-size:1.5rem;font-weight:400;z-index:99999;text-align:center;margin:auto;padding:10px;left:0;right:0;top:17%;border-bottom:1px solid rgba(0,0,0,0.05);border-top:1px solid rgba(0,0,0,0.05)}#arlinapuasa2019ku .puasa19 p{margin:10px auto;font-style:italic;font-family:Georgia}#arlinapuasa2019ku .puasa19 .ramadhan2019{font-size:2.5rem;font-style:normal}#arlinapuasa2019ku a.close-popup{background:#428bca;position:absolute;bottom:20px;right:20px;color:#fff;text-align:center;cursor:pointer;z-index:99;border-radius:3px;display:inline-block;font-size:13px;padding:4px 14px;min-width:60px;transition:all 0.3s}#arlinapuasa2019ku a.close-popup:hover{background:#336d9e;color:#fff}#arlinapuasa2019ku a.close-popup:active{opacity:.9}
.ketupat{position:absolute;left:0;right:0;top:-12px;margin:auto;width:10px;height:10px;background:#B9E937;box-shadow:10px 0 0 #57D131,10px 10px 0 #B9E937,0px 10px 0 #57D131,5px 5px 0 10px #fff;display:inline-block;text-align:center;transform:rotate(45deg);z-index:2}.ketupat.duaa{top:initial;bottom:3px}#hiding{background:#3979b0;position:absolute;bottom:20px;right:78px;color:#fff;text-align:center;cursor:pointer;z-index:99;border-radius:3px;display:inline-block;font-size:20px;padding:0 10px;line-height:28px;min-width:28px;transition:all 0.3s}#hiding:hover{background:#336d9e;color:#fff}.matilampuku{position:fixed;top:0;background:rgba(0,0,0,0.35);left:0;right:0;bottom:0;margin:0;z-index:1000;animation:zoomIn 1s}
@media screen and (max-width:768px){#arlinapuasa2019ku .puasa19{font-size:1rem}#arlinapuasa2019ku .puasa19 .ramadhan2019{font-size:1.5rem}#arlinapuasa2019ku{min-height:260px;left:20px;right:20px}}
</style>

– ابحث عن الوسم التالى

</body>

ثم اعلاة ضع الكود التالى :

<div id='arlinapuasa2019ku'>
<div class='ketupat'/>
<a class='close-popup' href='#' title='Close this message'>إغلاق</a>
<div class='puasa19'>
   <a href="https://www.facebook.com/learnseoblogger2020/">تابعنا على الفيسبوك</a>
   <p>أكتب هنا</p>
   <p><span class='seo-blogger.com'>أكتب هنا</span></p>
   <p>أكتب هنا</p>
</div>
<div class='ketupat duaa'/>
</div>
<script type='text/javascript'>
//<![CDATA[
$(window).bind("load",function(){$("#arlinapuasa2019ku").animate({top:"25%"},1e3),$("a.close-popup").click(function(){return $(this).parent().fadeOut(1e3),!1})});
//]]>
</script>

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

</head>

ضع الكود التالى :

<style type='text/css'>
/* Pop Up learnwebseo.com */
@keyframes zoomIn{from{opacity:0}50%{opacity:1}}@keyframes slideDown{0%{opacity:0;transform:translateY(-10%)}100%{opacity:1;transform:translateY(0%)}}
#myModal{display:none}#arlinapuasa2019ku{line-height:1.55;display:block;background:#fff;position:fixed;top:25%;right:0;left:0;margin:auto;text-align:center;max-width:600px;box-shadow:0 0 2.5rem -1.5rem rgba(0,0,0,0.5);z-index:1001;min-height:325px;padding:20px;border-radius:10px;animation:slideDown 1s}#arlinapuasa2019ku .puasa19{position:absolute;color:#222;font-size:1.5rem;font-weight:400;z-index:99999;text-align:center;margin:auto;padding:10px;left:0;right:0;top:17%;border-bottom:1px solid rgba(0,0,0,0.05);border-top:1px solid rgba(0,0,0,0.05)}#arlinapuasa2019ku .puasa19 p{margin:10px auto;font-style:italic;font-family:Georgia}#arlinapuasa2019ku .puasa19 .ramadhan2019{font-size:2.5rem;font-style:normal}#arlinapuasa2019ku a.close-popup{background:#428bca;position:absolute;bottom:20px;right:20px;color:#fff;text-align:center;cursor:pointer;z-index:99;border-radius:3px;display:inline-block;font-size:13px;padding:4px 14px;min-width:60px;transition:all 0.3s}#arlinapuasa2019ku a.close-popup:hover{background:#336d9e;color:#fff}#arlinapuasa2019ku a.close-popup:active{opacity:.9}
.ketupat{position:absolute;left:0;right:0;top:-12px;margin:auto;width:10px;height:10px;background:#B9E937;box-shadow:10px 0 0 #57D131,10px 10px 0 #B9E937,0px 10px 0 #57D131,5px 5px 0 10px #fff;display:inline-block;text-align:center;transform:rotate(45deg);z-index:2}.ketupat.duaa{top:initial;bottom:3px}#hiding{background:#3979b0;position:absolute;bottom:20px;right:78px;color:#fff;text-align:center;cursor:pointer;z-index:99;border-radius:3px;display:inline-block;font-size:20px;padding:0 10px;line-height:28px;min-width:28px;transition:all 0.3s}#hiding:hover{background:#336d9e;color:#fff}.matilampuku{position:fixed;top:0;background:rgba(0,0,0,0.35);left:0;right:0;bottom:0;margin:0;z-index:1000;animation:zoomIn 1s}
@media screen and (max-width:768px){#arlinapuasa2019ku .puasa19{font-size:1rem}#arlinapuasa2019ku .puasa19 .ramadhan2019{font-size:1.5rem}#arlinapuasa2019ku{min-height:260px;left:20px;right:20px}}
</style>

ثم ابحث عن الوسم

</body>

واعلاه ضع الكود التالى

<div id='myModal'>
<div id='arlinapuasa2019ku'>
<div class='ketupat'/>
<div class='hidemodal' id='hiding'><span title='لاتظهر لى هذه الرسالة مرة أخرى'>إغلاق الرسالة</span></div>
<div class='puasa19'>
<a href="https://www.facebook.com/learnseoblogger2020/">تابعنا على الفيسبوك</a>
   <p>أكتب هنا</p>
   <p><span class='seo-blogger.com'>أكتب هنا</span></p>
   <p>أكتب هنا</p>
</div>
<div class='ketupat duaa'/>
</div>
<div class='matilampuku'/>
</div>
<script type='text/javascript'>
//<![CDATA[
function setCookie(e,i,o){var n=new Date;n.setDate(n.getDate()+o);var a=escape(i)+(null==o?"":"; expires="+n.toUTCString());document.cookie=e+"="+a}function getCookie(e){var i,o,n,a=document.cookie.split(";");for(i=0;i<a.length;i++)if(o=a[i].substr(0,a[i].indexOf("=")),n=a[i].substr(a[i].indexOf("=")+1),(o=o.replace(/^s+|s+$/g,""))==e)return unescape(n)}var Arlina_COOKIE="cookiearlina",hideMe=document.getElementById("myModal"),cookie=getCookie(Arlina_COOKIE),cookiearlina=cookie||hideMe.style.display,hiding=document.getElementById("hiding");hiding.onclick=function(){setCookie(Arlina_COOKIE,cookiearlina,100),hideMe.style.display="block"===cookiearlina?"none":"block",cookiearlina=hideMe.style.display},hiding.onclick();
//]]>
</script>

ثم أحفظ العمل .
للمعاينة

تركيب كود اعلان مكتوب منبثق مع زر الاغلاق فى بلوجر،ماهى التغييرات اللازمه بالكود لأستطيع التعديل عليه بمايناسب طلبى .

لاحظ عزيزى القارىء أنه يوجد أشياء بالكود تستطيع انت ان تقوم بالتعديل عليها بمايناسب طلبك يالكتابه وكذلك بتعديل الرابط الموجة اذا رغبت فى ذلك وهى كالتالى :-
– الملون باللون الأصفر تستطيع التعديل عليه بمايناسبك .
– الملون باللون الأخضر وهو الرابط الموجه تستطيع تعديله بمايناسبك .
ملاحظة :
اذا اردت أن يظهر الكود فى الصفحة الرئيسة فقط كل ماعليك فعله هو وضع كل الاكواد قبل التركيب بين العلامتين الشرطيتين كالتالى :
<b:if cond=’data:view.isHomepage’> هنا الكود</b:if>

وأخيرا…
هو كود مناسب لكل من يبحث عن الاعلان عن منتجات عبر التسوق عبر الانترنت أو لتوجيه الزائر لموقع آخر.
أتمنى ان اكون وفقت فى الشرح
مع كل تقديرى ومودتى لك

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

اترك تعليق

يرجي التسجيل لترك تعليقك

شكرا للتعليق

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More