/ يمكن أضافة أكواد أعلانات أدسنس / مع زر التحميل

هل تبحث عن زر للتحميل و يكون بشكل مميز يعطي لقالبك أحترافية 

عند وضع موضوع أتيت للمكان المناسب / مدونة هلا تك /

أقدم لكم أضافة غاية في التميز و الروعة أضافة تعطي جمالية غير محدودة للموضوع 

اضافة زر التحميل منبثق و بعداد و حيث يمكنك أضافة أكواد الاعلانات بالواجهة المنبثقة 

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

شرح التركيب

أولا نذهب الى المظهر و أختيار تعديل HTML  و نبحث عن  </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;background: #e9e9e9;font-size: 24px; padding: 20px;text-align: center;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 = 10; var newElement = document.createElement("span"); newElement.innerHTML = "أنتظــر قليــلا 10 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 = "أنتظــر قليــلا" + " " + counter.toString() + " " + " ثوانــي .... "; } }, 1000); }; var clickbtn = document.getElementById("btn-at"); clickbtn.onclick = startDownload;

//]]>

</script>

التغيرات

يمكنك تغير النص بما تريده و تغير الثواني الموجودة هي حاليا 10 ثواني موجودة مرتين

ثالثا عند كتابة الموضوع نذهب الى  عرض 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>

التغيرات 

قم باستبدال كلمة  Ad Code   بشيفرة أعلانات أدسنس  

و علامة #  برابط التحميل

و ثم قم بالحفظ 

و شكرا

وفي الختام !

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