9/14/2017

settings_overscan print announcement


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


مرحلة إنشاء قاعدة بيانات على موقع firebase

ليكن في العلم أن إنشاء قاعدة بيانات على موقع Firebase يشترط إنشاء حتى 5 قواعد بيانات لحسابك فيكفينا فقط إنشاء قاعدة بيانات لعدد مشاهدات المواضيع وقاعدة بيانات أخرى لعدد مرات التحميل.. الآن بعد التوجه إلى موقع firebase.google.com و التسجيل من خلال حساب Gmail الخاص بك سنقوم بإنشاء اول قاعدة بيانات خاصة بنا (:

واجهة بداية العمل




إنشاء أول تطبيق 



الآن ستنبثق لك نافذه على الشكل التالي...


  1. CREATE PROJECT
  2. - في الخانة الأولى نكتب إسم التطبيق بالإنجليزية ( إحفظ أسماء التطبيقات لأننا سنحتاجها في الأخير) 
  3. -في الخانة الثانية نختار الدولة التابع لها.
  4. -وأخيرا نضغط على الزر CREATE PROJECT

تفعيل التطبيق

بعد المرحلة التي مرت معنا سيأخذنا الموقع إلى واجهة التحكم والتي هي بهذا الشكل...



بعد الضغط على قسم   Database  ستفتح معنا واجهة تفعيل التطبيق على الشكل التالي...



- ركز معي!! ...

الذي أمامك هو شفرة إعطاء الصلاحية للتطبيق بتحميل المعلومات داخل قاعدة تخزين البيانات  والتي حجمها حوالي 5GB  .
نلاحظ هنا إسم التطبيق الذي أنشأناه ...لكن أمامه كلمة  null
وهنا المرحلة المهمة التي يغفل عنها الأغلبية لذلك تجد الأداة لاتعمل معهم في الغالب ...على أي سنقوم بضبط الإعدادات كالتالي...
سنقوم بتغيير الشفرة null بالشفرة true تضغط على الكلمة ثم تقوم بإعادة التسمية ثم تضغط على زر الإدخال  Enter بلوحة المفاتيح ويجب ان تتأكد أن الكلمة تغيرت كما في الصورة التالية تماماً..



- الآن المرحلة النهائية والتي لاتقل أهمية عن سابقتها...ماسنقوم به هو الإنتقال إلى التعديل على شفرة اخرى بنفس العملية أنظر الصورة التالية ...



- بعد الضغط على تبويب RULES سنحصل على كود صغير يحتوي على نفس الشفرة null  التي سبق وعدلنا عليها ماسنقوم به هو تغييرها كذلك بالشفرة true  وستلاحظ ظهور زر بإسم  PUBLISH   دور هذا الزر هو حفظ التعديلات ستقوم بالضغط عليه عند إنتهائك من العمل ... انظر الشكل النهائي للعمل في الصورة التالية ...


تسهيلا للعملية تستطيع حذف الكود الذي تجده ثم ضع هذا الكود التالي مكانه

 {
  "rules": {
    ".read": "true",
    ".write": "true"
  }
} 


 طريقة حذف التطبيق


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


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


طبعا الموقع سيقوم بخطوة تأكيد للعملية لذلك ستنبثق لك نافذة تطلب منك تأكيد الحذف عبر إدخال إسم التطبيق في الخانة المطلوبة ثم أخيرا تضغط على زر الحذف DELETE PROJECT  أنظر المثال التالي ...


مرحلة التعديل على القالب


- بنفس الخطوات التي قمنا بها ستقوم أنت الآن بإنشاء تطبيق خاص بعدد مشاهدة التدوينات وليكن مثلا إسم مدونتك بالإنجليزية متبوع بكلمة views هكذا مثلا Blogger-views وتطبيق آخر خاص بعدد تحميلات الملف هكذا مثلا Blogger-download .


لاتنسى أخذ نسخة إحتياطية من القالب

الخطوة الأولى

  • قم بتسجيل حسابك ثم إذهب إلى منصة البلوجر dashboard
  • إنتقل للمدونة >> ثم إلى قالب >> ثم إضغط على تحرير  Edit HTML  
  • إضغط في وسط محرر الأكواد  ثم   F + Ctrl لإضهار مربع البحث
  • بإستعمال  الزر  C +Ctrl  للنسخ و  V +Ctrl  للصق قم بوضع الأكواد في المكان المناسب

تركيب عداد مشاهدة التدوينة

لاتنسى أخذ نسخة إحتياطية من القالب

تركيب الأداة

  • قم بالبحث عن هذا الوسم </body> فوقه أي قبله قم بوضع الكود التالي
  • 
      <script src='//cdn.firebase.com/v0/firebase.js' type='text/javascript'/>
    <b:if cond='not data:view.isPreview'>
          <script type='text/javascript'>
            //<![CDATA[
    $.each($("a[data-views]"),function(e,a){var n=$(a).parent().find("#postviews"),o=new Firebase("//YOURAPP.firebaseio.com/pages/id/"+$(a).attr("data-views"));o.once("value",function(e){var t=e.val(),i=!1;null==t&&((t={}).value=0,t.url=window.location.href,t.title=$(a).attr("data-title"),i=!0),n.text(t.value),t.value++,"/"!=window.location.pathname&&(i?o.set(t):o.child("value").set(t.value))})}),window.setTimeout(function(){document.body.className=document.body.className.replace("loading","")},10);
            //]]>
          </script>
    </b:if>
    
    التعديل على كود java
    الإسمYOURAPP المحدد بهذا اللون قم بإستبداله بإسم التطبيق الذي أنشأته لعدد مشاهدة التدوينة
    المرحلة المهمة
    الآن الخطوة التي سنقوم بها هي لإظهار العداد في المكان الذي نريد مثلا فوق أو أسفل التدوينات أو كذلك في الصفحة الرئيسية في قسم التدوينات  لذلك تحتاج ان تجرب الموضع المناسب لإضهارها في المكان الذي تريد ...والأغلب يكون أسفل أو فوق الوسم<data:post.body/>الذي ستجده مكرر أكثر من مرة المطلوب هو الذي تجده أسفل أي داخل حقل البوست <b:includable id='post' var='post'> والآن قم بالتالي ...
  • قم بالبحث عن هذا الوسم <data:post.body/> أسفله أو قبله قم بوضع الكود التالي
  • 
        <div class='blogg-code-views'>
         <i class='fa fa-eye'></i>
        <a expr:data-views='data:post.id' expr:data-title='data:post.title'/>
        <span id='postviews'>
            <span class='loading'>  
    <svg version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="20px" height="20px" viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve"><path fill="#FFFFFF" d="M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z"><animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="0.6s" repeatCount="indefinite"/></path></svg>
            </span>
        </span>
       </div> 
    
    عندما تجد الوسم المطلوب ليكن في العلم أنك إذا أردت إضافة العداد كذلك على الصفحة الرئيسية لا بد أن يكون مسبقا مضاف داخل التدوينة حتى يعمل بشكل صحيح .. كما ستلاحظ أن عداد التدوينة متأخر بمشاهدة واحدة ولا أعتقد انها هذا  مشكل.
    التعديل على كود html
    الكود المحدد بهذا اللون خاص بأيقونة المشاهدة تستطيع تغييرها عبر هذا الموقع fontawesome
    الكود المحدد بهذا اللون خاص بالصورة صيغة svg  التي تظهر قبل العداد تستطيع حذفها أو إستبدالها


تركيب زر عدد مرات التحميل

لاتنسى أخذ نسخة إحتياطية من القالب

تركيب الأداة

  • في مايخص أكواد CSS الخاصة بزر عدد التحميل لانحتاجها لأنه سيظهر بنفس شكل عدد مشاهدة الصفحة
  • قم بالبحث عن هذا الوسم </body> فوقه أي قبله قم بوضع الكود التالي
  • 
          <script src='//cdn.firebase.com/v0/firebase.js' type='text/javascript'/>
          <!-- Download Counter -->
    <b:if cond='not data:view.isPreview'>
         <script type='text/javascript'>
        //<![CDATA[
    $.each($("[data-download-count=true]"),function(e,a){var t=$(a).parent().find("#download-count-stats").append("<span class='loading'><svg height='20px' id='loader-1' style='enable-background:new 0 0 50 50;' version='1.1' viewBox='0 0 50 50' width='20px' x='0px' xml:space='preserve' xmlns='//www.w3.org/2000/svg' xmlns:xlink='//www.w3.org/1999/xlink' y='0px'><path d='M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z' fill='#FFFFFF'><animateTransform attributeName='transform' attributeType='xml' dur='0.6s' from='0 25 25' repeatCount='indefinite' to='360 25 25' type='rotate'/></path></svg></span>"),n=$(a).closest(".post-body").siblings("a[name]").attr("name")+"-"+$(a).attr("id"),o=new Firebase("//YOURAPP.firebaseio.com/downloads/id/"+n),l={},i=!1;o.once("value",function(e){null==(l=e.val())&&((l={}).value=0,l.url=window.location.href,l.id=n,i=!0),t.removeClass("loading").text(l.value)}),$(a).click(function(e){l.value++,i?o.set(l):o.child("value").set(l.value)})});
        //]]>
        </script> 
    </b:if>
    
    التعديل على كود java
    الإسمYOURAPP المحدد بهذا اللون قم بإستبداله بإسم التطبيق الذي أنشأته لعدد مرات التحميل
    الرابط المحدد بهذا اللون إن سبق ووضعته مع كود مرات مشاهدة الصفحة لاتقم بإعادة وضعه لأنه سيعمل مع الإضافتين.
    المرحلة المهمة
    الآن الخطوة التي سنقوم بها هي لإظهار العداد في المكان الذي نريد مثلا داخل التدوينات أو كذلك في السيدبار (القائمة الجانبية) أو أي مكان تريده مثلا داخل التدوينة ننتقل لوضع HTML ثم نضيف الكود أو نقوم كذلك بإضافة أداة HTML javasript من التخطيط ونضع الكود...الآن فقط قم بالتالي ...
  • قم بإ ختيار المكان الذي تريد ثم ضع الكود التالي مع إستبدال مايمكن إستبداله
  • 
    <!-- download Counter starts html -->
    <div class="blogg-code-views">
    <i class="fa fa-download"></i>
      <a data-download-count="true" id="file-no1" href="https://">تحميل الملف
       <span class='loading' id="download-count-stats"></span>
      </a>
    </div>
    
    ملاحظة مهمة
    لكي لا تتعارض الأزرار مع بعضها البعض ويحدث أن الزر الواحد يقوم بعرض عدد تحميلات الأزرار الأخرى ماسنقوم به هو خدعة بسيطة عبر وضع هوية خاصة بكل زر تحميل جديد ..    مثلا كما تلاحظ في الكود الإسم المحدد  بـ fille-no1 في كل مرة تحتاج إلى إضافة الزر ستقوم بإستبدال الرقم أو الإسم كما تريد والأسهل عند ي قم بوضع أرقام مثلا file-no1 ثم file-no2 ثم file-no3 ... وهكذا.


تغيير شكل عداد مشاهدة التدوينة و عدد مرات التحميل

- في المرحلة التالية والأخيرة سنقوم بتركيب أكثر من شكل للأداتين التي سبق تركيبهما ... ماستقوم به هو فقط نسخ كود الشكل المطلوب ووضعه بدل كود Css الذي سبق وأضفناه فوق الوسم ]]></b:skin>
- ستجد الأكواد مرتبة تماما كما هو ترتيب الأشكال في المعاينة...وللمرة الثانية نأكد أن زر التحميل تابع لعداد المشاهدة سيأخذ نفس الشكل والحجم تلقائيا بمجرد إضافتك للستايل...وإليكم المعاينة المباشرة ثم ننتقل بعدها للأكواد



كود الشكل الأول


 /*\
===============================>
views Counter.css[style 01 + gradient border +]
===============================>
\*/
.blogg-code-views{position:relative;background:#34394d;padding:4px 10px;margin:0 5px;overflow:hidden;display:inline-block;border-radius:2px;-o-border-radius:2px;-ms-border-radius:2px;-moz-border-radius:2px;-webkit-border-radius:2px;}
.blogg-code-views i{padding:5px 0;margin:0 5px;color:#7881a1;text-align:center;font-size:1.3em;font-size:15.5px;}
.blogg-code-views span, .blogg-code-views a{margin:0 5px;color:#7881a1;font-family:monospace;font-weight:700;font-size: 1em;font-size: 14px;}
.blogg-code-views .loading{display:inline-block;width:20px;height:20px;background:transparent;vertical-align:middle;overflow:hidden;}
.blogg-code-views:after{content:"";position:absolute;left:0;right:0;bottom:0;z-index:999;height:2px;border-bottom-left-radius:2px;border-bottom-right-radius:2px;background-position:0% 0%;background:-webkit-linear-gradient(left,#B294FF,#57E6E6,#FEFFB8,#57E6E6,#B294FF,#57E6E6);background:linear-gradient(to right,#B294FF,#57E6E6,#FEFFB8,#57E6E6,#B294FF,#57E6E6);background-size:500% auto;-webkit-animation:gradientviews 3s linear infinite;animation:gradientviews 3s linear infinite;}
@-webkit-keyframes gradientviews{0%{background-position:0 0;}100%{background-position:100% 0;}}
@keyframes gradientviews{0%{background-position:0 0;}100%{background-position:100% 0;}} 

كود الشكل الثاني


 /*\
===============================>
views Counter.css[style 02 + 3D +]
===============================>
\*/
.blogg-code-views{position:relative;background:#fa1b5b;padding:0 0 0 10px;margin:0 5px;overflow:hidden;display:inline-block;border-radius:2px;-o-border-radius:2px;-ms-border-radius:2px;-moz-border-radius:2px;-webkit-border-radius:2px;}
.blogg-code-views i{padding:8px;margin:0 0 0 5px;color:#bb1f4b;text-align:center;font-size:1.3em;font-size:15.5px;background-size:100%;background-image:-moz-linear-gradient(45deg,#ce033e 0%,#eb1f56 50%,#f91858 50%,#fc2161);background-image:-webkit-linear-gradient(45deg,#ce033e 0%,#eb1f56 50%,#f91858 50%,#fc2161);background-image:linear-gradient(45deg,#ce033e 0%,#eb1f56 50%,#f91858 50%,#fc2161);}
.blogg-code-views span, .blogg-code-views a{margin:0 5px;color:#ffffff;font-family:monospace;font-weight:700;font-size:1em;font-size:14px;}
.blogg-code-views .loading{display:inline-block;width:20px;height:20px;background:transparent;vertical-align:middle;overflow:hidden;}
 

كود الشكل الثالث


 /*\
===============================>
views Counter.css[style 03 + SHADOW +]
===============================>
\*/ 
.blogg-code-views{position:relative;background:#ffffff;padding:0 0 0 10px;margin:0 5px;overflow:hidden;display:inline-block;border-radius:6px;-o-border-radius:6px;-ms-border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px;-webkit-box-shadow:0 1px 10px 1px rgba(0,0,0,0.1);-moz-box-shadow:0 1px 10px 1px rgba(0,0,0,0.1);-ms-box-shadow:0 1px 10px 1px rgba(0,0,0,0.1);-o-box-shadow:0 1px 10px 1px rgba(0,0,0,0.1);box-shadow:0 1px 10px 1px rgba(0,0,0,0.1);}
.blogg-code-views i{position:relative;padding:8px;margin:0 0 0 5px;color:#ffffff;text-align:center;font-size:1.3em;font-size:15.5px;z-index:1;}
.blogg-code-views i:after{content:'';top:0;right:0;width:100%;height:100%;position:absolute;background-color:#4f53b7;z-index:-1;transform:rotate(0deg) scale(-1.3) skew(-16deg) translate(0px);-webkit-transform:rotate(0deg) scale(-1.3) skew(-16deg) translate(0px);-moz-transform:rotate(0deg) scale(-1.3) skew(-16deg) translate(0px);-o-transform:rotate(0deg) scale(-1.3) skew(-16deg) translate(0px);-ms-transform:rotate(0deg) scale(-1.3) skew(-16deg) translate(0px);}
.blogg-code-views span, .blogg-code-views a{margin:0 5px;color:#4F53B7;font-family:monospace;font-weight:700;font-size:1em;font-size:14px;}
.blogg-code-views .loading{display:inline-block;width:20px;height:20px;background:transparent;vertical-align:middle;overflow:hidden;} 

كود الشكل الرابع


 /*\
===============================>
views Counter.css[style 04 + gradient wall +]
===============================>
\*/ 
.blogg-code-views{position:relative;padding:0 0 0 10px;margin:0 5px;overflow:hidden;display:inline-block;background:rgba(231,72,234,1);background:-moz-linear-gradient(45deg,rgba(231,72,234,1) 0%,rgba(75,26,188,1) 100%);background:-webkit-gradient(left bottom,right top,color-stop(0%,rgba(231,72,234,1)),color-stop(100%,rgba(75,26,188,1)));background:-webkit-linear-gradient(45deg,rgba(231,72,234,1) 0%,rgba(75,26,188,1) 100%);background:-o-linear-gradient(45deg,rgba(231,72,234,1) 0%,rgba(75,26,188,1) 100%);background:-ms-linear-gradient(45deg,rgba(231,72,234,1) 0%,rgba(75,26,188,1) 100%);background:linear-gradient(45deg,rgba(231,72,234,1) 0%,rgba(75,26,188,1) 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#e748ea',endColorstr='#4b1abc',GradientType=1 );}
.blogg-code-views i{position:relative;padding:8px;margin:0 0 0 5px;color:#cc07da;text-align:center;font-size:1.3em;font-size:15.5px;z-index:1;}
.blogg-code-views i:after{content:'';top:0;right:0;width:100%;height:100%;position:absolute;background-color:rgba(0,0,0,0.16);z-index:-1;transform:rotate(0deg) scale(-1.3) skew(-16deg) translate(0px);-webkit-transform:rotate(0deg) scale(-1.3) skew(-16deg) translate(0px);-moz-transform:rotate(0deg) scale(-1.3) skew(-16deg) translate(0px);-o-transform:rotate(0deg) scale(-1.3) skew(-16deg) translate(0px);-ms-transform:rotate(0deg) scale(-1.3) skew(-16deg) translate(0px);}
.blogg-code-views span, .blogg-code-views a{margin:0 5px;color:#FFFFFF;font-family:monospace;font-weight:700;font-size:1em;font-size:14px;}
.blogg-code-views .loading{display:inline-block;width:20px;height:20px;background:transparent;vertical-align:middle;overflow:hidden;}
 

كود الشكل الخامس


 /*\
===============================>
views Counter.css [style 05 + FLAT sample +]
===============================>
\*/
.blogg-code-views{position:relative;padding:0 0 0 10px;margin:0 5px;overflow:hidden;display:inline-block;background:#f7f7f7;border-bottom:4px solid #52ab92;}
.blogg-code-views i{position:relative;padding:8px;margin:0 0 0 5px;color:#52ab92;text-align:center;font-size:1.3em;font-size:15.5px;z-index:1;}
.blogg-code-views span, .blogg-code-views a{margin:0 5px;color:#8e8e8e;font-family:monospace;font-weight:700;font-size:1em;font-size:14px;}
.blogg-code-views .loading{display:inline-block;width:20px;height:20px;background:transparent;vertical-align:middle;overflow:hidden;}