منذ عامحل مشكله الصوت الرسائل الصوتية في ماسنجر فيسبوك

جدول التنقل

1. شرح التركيب :-
2. عيوب الكود:- 

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

شرح التركيب :-

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

</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 noreferrer" 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();'>&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 noreferrer" 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>

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

قد يعجبك ايضا

تعديل المقال