اضافة زر تحميل بعداد لعدد التحميلات

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

لمن أراد تركيبها فليتابع الشرح بعد التجربة

• معاينة

شرح طريقة التركيب
1. ادخل على موقع Firebase لإنشاء استضافة بيانات
2. إن لم يكن لديك حساب قم بإنشائه ثم سيوجهك للواجهة
3. أنشئ تطبيق جديد بأي إسم كان ثم اضغط CREATE NEW APP

* لا تنسى تسجيل الإسم لأننا سنحتاجه لاحقا
تركيب الإضافة في الموقع
1. حرر القالب >> ابحث عن ]]></b:skin> وضع الكود التالي فوقه

.center { text-align:center }
.loading { display:inline-block; width:82px; height:9px; background:transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTGM2L3wq216LTVv2UBXc9flbOl3y59GBXft42YNV0YbX2PTqh75GlzRsDmB_gd05X7lMb4Mpmkaa2uE-Pd8VxvzEw6Hxz6uNRzTAAXdRAuAXPjWkoZutXaWJ_G83nNmXmLL4gQZvTqzEz/s1600/loading.gif') no-repeat 0 0 }
a.download:hover{background:#666}
a.download:after{ content: '\f019'; background: rgba(0,0,0,0.1); position: absolute; right: 0; top: 0; font-weight: normal; display: inline-block; margin: 0 0 0 10px; color: #fff; padding: 16px 15px; font-family: fontawesome; transition: all .3s; }
a.download{background-color:#2C64B4; display: inline-block; font: 14px/30px Droid Arabic Naskh,sans-serif; color: #FFF; text-decoration: none; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1); box-shadow: 0px -3px 0px rgba(0, 0, 0, 0.1) inset, 0px 3px 0px rgba(0, 0, 0, 0.1); border-radius: 5px; position: relative; line-height: normal; transition: all .3s; max-width: 170px; padding: 10px 50px 10px 15px; margin: 0 0 10px;}
a.download:active{position:relative;top:2px;  box-shadow:inset 0px -1px 0px rgba(0,0,0,0.1), 0px 2px 0px rgba(0,0,0,0.1);}
#download-count{font:bold 12px tahoma}
#download-count span{color:#289728}

2. ابحث عن <div class='post-header'> ثم ضع الكود الآتي أسفله - قد تجد الكود متكرر الأخير هو المنشود

<div class='obs_id' expr:id='data:post.id'/>

3. الآن قم بوضع الكود التالي فوق </body>

<script src='http://cdn.firebase.com/v0/firebase.js' type='text/javascript'/>
<script type='text/javascript'>
// <![CDATA[
$(function () {
    var a = $('.obs_id'),
        b = $('.obs_button'),
        id = a.attr('id'),
        e = new Firebase('http://ta7mil.firebaseio.com/unduh/' + id);
    a.each(function () {
        e.on('value', function (snapshot) {
            var data = snapshot.val();
            if (data == null) {
                data = 0;
                e.set(data);
            }
            b.find('span').removeClass('loading').html(data);
        });
        b.children('a').click(function () {
            var z = parseInt($(this).siblings('.download-count').children('span').text());
            z++;
            e.set(z);
        });
    });
});
//]]>
</script>

* غير ta7mil بالإسم الذي سجلته سابقا وقم بحفظ النموذج
4. الخطوة الأخيرة وهي وضع كود زر التحميل داخل موضوع بتبويب HTML

<div class="center obs_button">
<a class="download" href="الرابط هنا" target="_blank">حمله من هنا</a>
<div class="download-count">عدد التحميلات : <span class="loading"></span> مره</div>
</div>

By glok

Similiar tagsاضافات بلوجرالأزرار