إظافات
0

طريقة إضافة زر تنزيل منبثق مع الإعلانات والعد التنازلي في منشور بلوجر

صورة
NT
اخر تحديث :

 

إضافة زر تنزيل منبثق مع الإعلانات والعد التنازلي في منشور بلوجر

السلام عليكم ورحمة الله تعالى وبراكاته

مرحبا أصدقاء وزوار شبكة نور التقنية ، إذا كنت مدونًا أو لديك موقع ويب على blogsport.com وقمت بتوفير رابط التنزيل في مقالتك. لذلك ستكون هذه المقالة أكثر فائدة بالنسبة لك.


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


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


كيفية إضافة زر تنزيل منبثق مع الإعلانات والعد التنازلي في منشور بلوجر



  • قم بتسجيل الدخول إلى لوحة معلومات مدونة بلوجر الخاصة بك.
  • ثم انتقل إلى الموضوع>> تحرير HTML.
  • انقر في أي مكان داخل منطقة الرمز واضغط على مفتاحي Ctrl + F لفتح مربع البحث.
  • الآن ، ابحث عن علامة </head> والصق الرمز أدناه قبل هذه العلامة مباشرةً.


<style>
.modal {display: none;position: fixed; top: 0; right: 0; bottom: 0; left: 0; text-align: left; background: rgba(0,0,0, .9); transition: opacity .25s ease;z-index:999; } 
.tg-pop__bg{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; cursor: pointer; } 
.tg-pop { display: none; } 
.tg-pop__inner { transition: top .25s ease; position: absolute; top: -20%; right: 0; bottom: 0; left: 0; width: 50%; margin: auto; overflow: auto; background: #fff; border-radius: 5px; padding: 1em 2em; height: 50%; } 
.tg-pop__close { position: absolute; right: 1em; top: 1em; width: 1.1em; height: 1.1em; cursor: pointer; } 
.tg-pop__close:after, .tg-pop__close:before { content: &#39;&#39;; position: absolute; width: 2px; height: 1.5em; background: #333; display: block; transform: rotate(45deg); left: 50%; margin: -3px 0 0 -1px; top: 0; } 
.tg-pop__close:hover:after, .tg-pop__close:hover:before { background: #aaa; } 
.tg-pop__close:before { transform: rotate(-45deg); } @media screen and (max-width: 768px) { .tg-pop__inner { width: 90%; box-sizing: border-box; } } 
.adpop-top{height: 40px; width: 100%; border-bottom: 1px #E5E5E5 solid;} 
.adhtml{margin: 14px 0 4px; min-height: 260px;}
.adpop-content{height: 330px;}
#tg-downloadx{display: inline-block; height: 30px; line-height: 30px; width: 140px; text-align: center; background-color: #005af0; color: #fff; font-size: 15px; border-radius: 8px; text-transform: capitalize; border: 1px solid #212121!important; margin-top: 1px;}
.download-pop{line-height: 16px; margin: 5px 0 5px;font-size: 14px;position: relative;} 
.btn-at{display: block; height: 50px; color: #fff; font-size: 24px;text-transform: uppercase; background: #005af0;text-align:center; line-height: 50px;width: 200px; margin: 150px auto; transition: all 0.4s ease-in;}
.adpop-top h2{margin:0}
</style>


  • الآن ، ابحث عن علامة </body> والصق الرمز أدناه قبل هذه العلامة مباشرةً.


<script>
//<![CDATA[
const modal = document.querySelector("#my-modal"); const btn = document.querySelectorAll(".btn-at"); const closeModal = document.getElementsByClassName("tg-btnclose")[0]; for (let i = 0; i < btn.length; i++) { btn[i].addEventListener("click", function () { modal.style.display = "block"; }); } btn.onclick = function () { modal.style.display = "block"; }; closeModal.onclick = function () { modal.style.display = "none"; }; window.onclick = function (event) { if (event.target == modal) { modal.style.display = "none"; } };
var downloadButton = document.getElementById("tg-downloadx"); var counter = 20; var newElement = document.createElement("span"); newElement.innerHTML = "Please Wait 20 sec"; var id; downloadButton.parentNode.replaceChild(newElement, downloadButton); function startDownload() { this.style.display = 'none'; id = setInterval(function () { counter--; if (counter < 0) { newElement.parentNode.replaceChild(downloadButton, newElement); clearInterval(id); } else { newElement.innerHTML = "Please Wait" + " " + counter.toString() + " " + " sec.... "; } }, 1000); }; var clickbtn = document.getElementById("btn-at"); clickbtn.onclick = startDownload;
//]]>
</script>


  • انقر فوق حفظ الموضوع.
  • افتح لوحة تحكم Blogger وافتح المنشور الذي تريد إضافة جدول إيجابيات وسلبيات فيه.
  • انتقل الآن إلى HTML >> وفي المنشور الذي تريد إضافة جدول إيجابيات وسلبيات ، الصق الكود أدناه.


<div class="btn-at" id="btn-at">Download</div>
<div class="modal" id='my-modal'>
  <div class="tg-pop__bg"></div>
  <div class="tg-pop__inner">
    <div class="adpop-top">
 <label class="tg-pop__close tg-btnclose"></label>
    <h2 style="margin: 0px;">Download Your file</h2>
    </div><div class="adpop-content">
 <div class="adhtml">
Ad Code
 </div>
<div class="download-pop">
        <a class="button" href="#" id="tg-downloadx">Download File</a>
    </div>
    <div class="adhtml">
Ad Code
 </div>
    </div>
  </div>
</div>


  • استبدل # بعنوان URL لملف التنزيل.
  • قبل نشر رسالتك ، شاهد معاينة لمنشور مدونتك.
  • إذا كانت المعاينة صحيحة ، فقم ببساطة بنشرها.


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





تعديل المقال
الأقسام

مقالات قد تهمك

تعليقات




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