اضافة زر تحميل مع عداد لإحصاء التحميلات

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

كيف تركيب اضافة :

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('//3.bp.blogspot.com/-_rTeok0JZX0/VsBoPf-EZtI/AAAAAAAAKEU/i9fUsYUOYJY/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> - غير 3adad بالإسم الذي سجلته سابقا وقم بحفظ النموذج

<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://3adad.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>

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بلوجرحلقات