أضافة أداءة أحصائيات المدونة للبلوجر بشكل جميل

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

طريقة تخصيص الأداة لمدونات بلوجر

1-أنتقل الى لوحة التحكم في بلوجر
2-قم بالنقر على "التخطيط"
3-قم بأضافة أداة جديدة وأختر HTML/Java Script وقم بأضافة أداة أحصاءات المدونة

4-قم بعملية الحفظ
5-توجة الى لوحة التحكم ومنها أختر تحرير HTML وقم بالبحث عن الكود التالي

<b:widget id='Stats1' locked='false' title='إجمالي مرات مشاهدة الصفحة' type='Stats'>
      <b:widget-settings>
        <b:widget-setting name='showGraphicalCounter'>false</b:widget-setting>
        <b:widget-setting name='showAnimatedCounter'>false</b:widget-setting>
        <b:widget-setting name='showSparkline'>true</b:widget-setting>
        <b:widget-setting name='sparklineStyle'>BLACK_TRANSPARENT</b:widget-setting>
        <b:widget-setting name='timeRange'>ALL_TIME</b:widget-setting>
      </b:widget-settings>
      <b:includable id='main'>
  <b:if cond='data:title != &quot;&quot;'><h2><data:title/></h2></b:if>
  <div class='widget-content'>
    <!-- Content is going to be visible when data will be fetched from server. -->
    <div expr:id='data:widget.instanceId + &quot;_content&quot;' style='display: none;'>
      <!-- Counter and image will be injected later via AJAX call. -->
      <b:if cond='data:showSparkline'>
        <img alt='Sparkline' expr:id='data:widget.instanceId + &quot;_sparkline&quot;' height='30' width='75'/>
      </b:if>
      <span expr:class='&quot;counter-wrapper &quot; + (data:showGraphicalCounter ? &quot;graph-counter-wrapper&quot; : &quot;text-counter-wrapper&quot;)' expr:id='data:widget.instanceId + &quot;_totalCount&quot;'>
      </span>
      <b:include name='quickedit'/>
    </div>
  </div>
</b:includable>
    </b:widget>

6-قم بأستبدال الكود التالي بالكود السابق الذي قمت بالبحث عنه سابقأ

<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'>
    <!-- Content is going to be visible when data will be fetched from server. -->
    <div expr:id='data:widget.instanceId + &quot;_content&quot;' style='display: none;'>
      <!-- Counter and image will be injected later via AJAX call. -->
      <b:if cond='data:showSparkline'>
        <img alt='Sparkline' expr:id='data:widget.instanceId + &quot;_sparkline&quot;' height='30' src='http://2.bp.blogspot.com/-nsxCtkYnchQ/VLEifAyf97I/AAAAAAAAIlk/9Viyy0W9r04/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>

7-قم بالبحث عن كود </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'>
/* Blogger Custom Stats widget by msdesignbd.com */
.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-left: 0;}
.Stats .counter-wrapper:after {content:&quot;عدد المشاهدات&quot;;float:right;text-align:left;font-size:13px;font-weight:700;color:#333;}
.counts {text-align:right;;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:left;width:10px;text-align:center;}
.counter-wrapper.text-counter-wrapper:before, .counts:before {
display:block;background-color:#fff;color:#333;float:right;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-قم بعملية الحفظ
 وختامأ لاتنسى المشاركة والتعليق لكي تحفزنا أكثر .