أخر الاخبار

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

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

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

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

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>

اتمنى أن أكون وفقت فى الشرح
مع خالص تحياتى لك
تعليقات



    حجم الخط
    +
    16
    -
    تباعد السطور
    +
    2
    -