المشاركات

اضافه زر التحميل مع عداد مؤقت الى بلوجر

اضافه زر التحميل مع عداد مؤقت الى بلوجر حيث ان هذه الاضافه مفيدهلمن يرغبون فى جعل الزائر يمكث مده اطول فى المدونه .

اضافه زر التحميل مع عداد مؤقت الى بلوجر حيث ان هذه الاضافه مفيدهلمن يرغبون فى جعل الزائر يمكث مده اطول فى المدونه وذلك من خلال جعل الزائر ينتظر مده معينه حتى يتم تحويله على الرابط المطلوب فبمجرد ضغط الزائر على الزر يظهر مؤقت زمنى تقوم انت بتحديده وبعد مده معينه يتم تحويله الى الرابط المطلوب تلقائيا.

وتم تكويد هذه الإضافة بلغتي html وcss وjs ويمكنك معاينة الاضافة من خلال الزر التالي

طريقه اضافه زر التحميل مع عداد مؤقت الى بلوجر

1.قم بالدخول الى لوحه التحكم الخاصه بمدونه بلوجر ثم قم باختيار المظهر ثم تعديل html
2.قم بالبحث عن وسم ]]></b:skin> ثم اضف الكود التالى اعلى الوسم     
button.download {cursor: pointer;align-items: center;padding: 12px 23px;outline: 0;border: 0;border-radius: 2px;background: linear-gradient(45deg, #16967f, #096252);line-height: 20px;color: #fefefe;font-size: 13px;white-space: nowrap;overflow: hidden;}
button.download:after {content: '';background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fefefe' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'><path d='M3 17v3a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-3'/><polyline points='8 12 12 16 16 12'/><line x1='12' x2='12' y1='2' y2='16'/></svg>");flex-shrink: 0;display: inline-block;margin-left: 6px;width: 18px;float: right;height: 18px;vertical-align: bottom;background-size: cover;background-repeat: no-repeat;background-position: center;}

2.قم بالبحث عن وسم </body> واضف الكود التالى اعلى الوسم
<script type="text/javascript">
//<![CDATA[
function generate() {
    var linkDL = document.getElementById("download"),
        btn = document.getElementById("btn"),
        direklink = document.getElementById("download").href,
        waktu = 20;
    var teks_waktu = document.createElement("span");
    linkDL.parentNode.replaceChild(teks_waktu, linkDL);
    var id;
    id = setInterval(function () {
        waktu--;
        if (waktu < 0) {
            teks_waktu.parentNode.replaceChild(linkDL, teks_waktu);
            clearInterval(id);
            window.location.replace(direklink);
            linkDL.style.display = "inline";
        } else {
            teks_waktu.innerHTML = "جاري توليد الارتباط من فضلك انتظر" + waktu.toString() + "ثواني.";
            btn.style.display = "none";
        }
    }, 1000);
}
//]]>
</script>
3.قم بنسخ الكود التالى  واضفه فى صفحه المقال

<div class="download-button">
  <button class='download' onclick="generate()" id="btn"> تحميل </button>
<a id="download" href="#" style="display:none"></a>
</div>

تحميل الاكواد

download button.zip 4.14KB

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

الاسم احمد منصور امتلك خبره اكثر من ثلاث سنوات فى مجال التدوين مهتم بمجال التدوين والبرمجه

4 تعليقات

  1. اين اضع رابط الملف المراد تحميله
    1. بدلا من علامه #الموجوده فى صندوق الأكواد الأخير
  2. كيف أزيل العداد أو 10 ثوان نهائيا كما في مدونتك
    1. عن طريق حذف أكواد الجافا