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

0

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

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

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

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

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

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

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

</head>

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

<style type='text/css'>
/* Pop Up seo-blogger.info */
@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 seo-blogger.info */
@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. AcceptRead More