طريقة عرض إحصائيات المدونة بشكل جميل في بلوجر

السلام عليكم ورحمة الله وبركاته

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


معاينة

كيف تعرض إحصائيات مدونتك بطريقة جميلة؟

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


2. بعد إضافة الأداة أنتقل إلى "القالب" ثم أنقر على تحرير HTML ثم من خلال "الأنتقال إلى الأداة" أختر Stats1 ثم حدد الكود الكامل الخاص بها:

3. ثم إستبدله بالكود التالي:
              <b:widget id='Stats1' locked='false' title='إحصائيات الموقع' type='Stats' version='1' visible='true'>
                <b:includable id='main'>
  <b:if cond='data:title'><h2><data:title/></h2></b:if>
  <div class='widget-content'>
    <div expr:id='data:widget.instanceId + &quot;_content&quot;' style='display: none;'>
      <b:if cond='data:showSparkline'>
        <img alt='Sparkline' expr:id='data:widget.instanceId + &quot;_sparkline&quot;' height='30' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0RXw50X-XEebY7MwLBWXQs85LpXBexmpB8PVaQQy27PVbtuSyAkRH0zAEIZgEh6eX0cB0hQTCNTB6-N79p-y7hPF2shtG3YsJae8brqGOOxoSkIrXaP3FoBNJ5_cDB9KW5gZrBjWBZWo/s1600/FFF.png' title='Sparkline' width='75'/>
      </b:if>
      <b:if cond='data:showGraphicalCounter'>
        <span class='counter-wrapper graph-counter-wrapper' expr:id='data:widget.instanceId + &quot;_totalCount&quot;'/>
      <b:else/>
        <span class='counter-wrapper text-counter-wrapper' expr:id='data:widget.instanceId + &quot;_totalCount&quot;'/>
      </b:if>
<script type='text/javascript'>
function postCount(json){
document.write(&quot;<span class='counts post2'> جميع المشاركات المنشورة &quot;);
var count = json.feed.openSearch$totalResults.$t;
document.write(&quot;<span class='count'>&quot; + count + &quot;</span>&quot;);
document.write(&quot;</span>&quot;)
}

function numberOfComments(json){
document.write(&quot;<span class='counts comment'> إجمالي عدد التعليقات &quot;);
var count = json.feed.openSearch$totalResults.$t;
document.write(&quot;<span class='count'>&quot; + count + &quot;</span>&quot;);
document.write(&quot;</span>&quot;)
}

</script>
<script src='/feeds/posts/default?alt=json-in-script&amp;amp;max-results=0&amp;amp;callback=postCount' type='text/javascript'/>
<script src='/feeds/comments/default?alt=json-in-script&amp;amp;max-results=0&amp;amp;callback=numberOfComments'/>


    </div>
  </div>
</b:includable>
              </b:widget>

4. وأخيرًا أبحث عن الرمز </head> ثم أضف الكود التالي فوقه مباشرةً
<link href='//fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'/>
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/> 
<style type='text/css'>
.Stats img {display:none!important;background-image:none;}
.Stats .counter-wrapper {width:92%;text-align:left;margin:10px;line-height:35px;color:#333;font-weight:700;font-size:16px;margin-right: 0;}
.Stats .counter-wrapper:after {content:&quot;مرات مشاهدة الصفحة&quot;;float:right;text-align:right;font-size:13px;font-weight:700;color:#333;}
.counts {display:inline-block;width:92%;font-size:13px;line-height:35px;color:#333;font-weight:700;}
.counts .count {display:inline-block;font-size:16px;height:30px;
vertical-align:top;direction:ltr;float:left;color:#333;font-weight:700!important;}
.counts:hover .titles:before {color:#333!important;border-radius:2px;border-color:rgba(255,255,255,0.1);}
.counter-wrapper.text-counter-wrapper:before, .counts:before {display:inline-block;font-size:13px;font-family:FontAwesome;font-style:normal;font-weight:normal;margin:0 10px 0 10px;float:right;width:10px;text-align:center;}
.counter-wrapper.text-counter-wrapper:before, .counts:before {
display:block;background-color:#fff;color:#333;width:35px;height:35px;font-size:18px;line-height:35px;border-radius:2px;margin:0px 8px 0 0;}
.counter-wrapper.text-counter-wrapper:before {content:&quot;\f06e&quot;;}
.counts.post2:before {content:&quot;\f044&quot;;}
.counts.comment:before {content:&quot;\f0e6&quot;;}
#Stats1_content {width:auto;height:auto;background-color:#fff;}
</style>

هذا كل شيء نتمنى لكم التوفيق.

مشاركات أقدم المقال التالي
8 تعليق
  • H.M
    H.M 19‏/05‏/2016، 1:47:00 م

    شكرا لك على المعلومات المفيدة :-t
    مدونتي,,ارجوا منكم المشاركة فيها :)
    http://hawaakitchen3.blogspot.com.eg/

  • غير معرف
    غير معرف 21‏/05‏/2016، 6:56:00 م

    b-(

  • غير معرف
    غير معرف 09‏/08‏/2016، 1:44:00 ص

    تمام اخي...الإضافة تعمل جيدا

    • مداد الجليد
      مداد الجليد 09‏/08‏/2016، 10:00:00 ص

      بالطبع أخي مرحبا بك

  • Mady
    Mady 25‏/09‏/2017، 7:50:00 م

    انت شخص محترم وتستحق التقدير شكرا جدا تم الاضافة بنجاح

    • مداد الجليد
      مداد الجليد 25‏/09‏/2017، 11:37:00 م

      شكرًا على كلماتك الطيبة واتمنى لك كل التوفيق إن شاء الله

  • Dr.carmen
    Dr.carmen 13‏/02‏/2019، 10:40:00 ص

    بعتذر مش عارفه الموضوع خارج ولا داخل الموضوع ده لكن دلوقتى انا الاحصائيات نفسها مبتظهرش عندى نهائى وبالتالى اى حاجه تخص الاحصائيات مش بتشتغل ومش عارفه المشكله فى ايه ممكن مساعده ؟

    • مداد الجليد
      مداد الجليد 13‏/02‏/2019، 6:15:00 م

      اهلا اختي الكريمة
      في لوحة تحكم مدونتك ثم الاحصائيات الا يظهر لديك عدد الزوار اليومي وغيره؟

أضف تعليق
عنوان التعليق