18‏/05‏/2016

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

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

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


معاينة

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

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='http://4.bp.blogspot.com/-OejEiEoVORQ/VzuX6lOv13I/AAAAAAAAm6Q/oweL-itk1KASBOsXx4ql4uE_9jks2VuUwCLcB/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 تعليقات

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

    ردحذف
  2. تمام اخي...الإضافة تعمل جيدا

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

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

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

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

      حذف

تعليقاتكم تشجعنا على تقديم المزيد وهي محل إهتمامنا دائمًا

© جميع الحقوق محفوظة مداد الجليد 2013 - حقوق الطبع والنشر | مدعومة بكل فخّر من blogger | سياسة الخصوصية