14‏/02‏/2016

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

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

لمن أراد تركيبها فليتابع الشرح بعد التجربة
شرح طريقة التركيب
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>
<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>
10 Blogger تعليقات
Disqus
10 التعليقات
المشرف
avatar

كود عداد المشاهدات لو سمحت

وان يوجد عداد للفيديو مثل يوتيوب يكون افضل

لدي موقع لمشاهدة الفيديو

المشرف
avatar

قادم قريبا

المشرف
avatar

سوال عن ازنك اسف هو بره التدوين كيفيه معرفش كود اضافه من الي html يعني اضافه مثل التدوينه السابق اذا اردت ان اعرف الكود واقوم بحذفها كيف

المشرف
avatar

لقد قمت بسؤالك في تدوينة 13 اضافة للمواقع قمت باضافة الشكل 8 انا واريد تغيره لكنه يلجأ الى اخطاء عندما امسحه الرجاء الرد حسام

المشرف
avatar

تم الرد اخي

المشرف
avatar

احسن طريقة هي عبر inspecter اضغط على يمين الماوس وستظهر لك في الأسفل inspecter أو على حسب اللغة المستعملة ... لتفهم اكثر شاهد الفيديو التالي يمكنك التخطي الى الدقية 3:06 بالتوفيق :
https://youtu.be/BNWpySze7Fg

المشرف
avatar

شكرا لحسن مدون في العرب

المشرف
avatar

اخي اريدها بشكل ممتاز من فضلك ارجو الرد

المشرف
avatar

علامة لودينج تبقةتتحرك فقط

المشرف
avatar

انا مثلك تماما اريد عدد المشاهدات التى يشاهدها زوار الموقع الخاص بى

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3لإضافة كود حوله أولاً بمحول الأكواد
4أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة