����� �� ����� ����� ���� ���������

����� �� ����� ���� ������� �� ������ �� ���� ���� ����� ����� ������� ���� ����� ��� ����� �� ����ȡ ��� �� ��� ������� ����� ������ ��� ��������� ���� ���� �� ������� ��� ������� ��� ��� �� ������ ���� ��� ���� ��� �������� �� ��� ����� ���� �������� ���� �� ������ �� ������.

��� ���� ������� ������� ����� ��� �������

• ������

��� ����� �������
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/AVvXsEh7sLjBjYB_oBfu7Vt6plsokXZGRaqyYihMvz-canlhimDwJtPOFhQ3us6ABdsMq7xqlFC1jVgZQ2IYO3TLMEY5sh-WQtgG_o6REIuY9wZbFAG3dWROuYQonLTyZskHOOh5KGpRa6PMXT8d/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>