28 يناير، 2015

مدون محترف اضافات بلوجر CSS تخصيص اداة الإحصائيات في بلوجر

تخصيص اداة الإحصائيات في بلوجر

تخصيص اداة الإحصائيات في بلوجر بطريقة احترافية فهذه الاضافة سوف تظهر عدد المواضيع المنشورة في بلوجر و عدد زوار المدونة

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


اولا ادخل إلى القالب ثم تحرير HTML و ابحث عن هذا الكود

<b:widget id='Stats1' locked='false' title='Total Tayangan Laman' type='Stats'>
    <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' 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>
      <b:include name='quickedit'/>
    </div>
  </div>
</b:includable>
  </b:widget>


ثم نقوم بإستبدال الكود السابق كله بالكود التالي

<b:widget id='Stats1' locked='false' title='statistics' type='Stats'>
    <b:includable id='main'>
      <b:if cond='data:title'><h2><span><data:title/></span></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 postx'> المواضيع&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='http://mudwnp.blogspot.com/feeds/posts/default?alt=json-in-script&amp;amp;max-results=0&amp;amp;callback=postCount' type='text/javascript'/>
    </div>
  </div>
</b:includable>
  </b:widget>


الان نقوم بتغيير عنوان مدونتي بعنوان المدونة الخاصة بك

الان ابحث عن الوسم ]]></b:skin> و اضف الكود التالي فوقه
/* CSS Custom Stats */
#sidebar .Stats img {
    display: none!important;
    background-image: none;
}

#sidebar .Stats .counter-wrapper {
    width: 92%;
    text-align: left;
    margin: 10px;
    line-height: 35px;
    color: #71737f;
    font-family: 'Droid Arabic Kufi',sans-serif;
    font-weight: 700;
    font-size: 16px;
}

#sidebar .Stats .counter-wrapper:after {
    content: 'المشاهدات';
    font-family: 'Droid Arabic Kufi',Arial, sans-serif;
    float: right;
    text-align: right;
    font-size: 13px;
    font-weight: 700;
    color: #71737f;
}

#sidebar .counts {
    display: inline-block;
    width: 92%;
    margin: 10px;
    font-size: 13px;
    line-height: 35px;
    color: #71737f;
    font-weight: 700;
}

#sidebar .counts .count {
    display: inline-block;
    font-size: 16px;
    height: 30px;
    vertical-align: top;
    direction: rtl;
    float: left;
    color: #71737f;
    font-family: 'Droid Arabic Kufi', sans-serif;
    font-weight: 700!important;
}

#sidebar .counts:hover .titles:before {
    color: #71737f!important;
    border-radius: 2px;
    border-color: rgba(255,255,255,0.1);
}

#sidebar .counter-wrapper.text-counter-wrapper:before,#sidebar .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;
}

#sidebar .counter-wrapper.text-counter-wrapper:before,#sidebar .counts:before {
    display: block;
    background-color: #a5a7b2;
    color: #fff;
    width: 35px;
    height: 35px;
    font-size: 18px;
    line-height: 37px;
    border-radius: 2px;
    margin: 0px 0 0 8px;
}

.counter-wrapper.text-counter-wrapper:before {
    content: '\f201';
    color: #fff;
}

#sidebar .counts.postx:before {
    content: '\f03e';
    background-color: #f0b26f;
}

#Stats1_content {
    width: auto;
    height: auto;
    background-color: #fff;
}

#Stats1 h2 {
    display: none;
}

اي سؤال او استفسار لا تترد بوضعه في تعليق بالتوفيق

مواضيع ذات صلة
تخصيص اداة الإحصائيات في بلوجر
4 / 5
بواسطة

هناك 7 تعليقات :

  1. أزال أحد مشرفي المدونة هذا التعليق.

    ردحذف
    الردود
    1. اهلا اخي شكرا لك مرورك الرائع

      ولكن يرجى عدم نشر روابط إشهار حتى ينشر التعليق

      و تم التعليق في مدونتك بالتوفيق

      حذف
  2. طيب لو الكود مش موجود اصلا اضيف الكود الثاني فين ؟

    ردحذف
    الردود
    1. الكود موجود في كل مدونة
      ولكن عليك إضافة الاداة من التخطيط
      بعدها تطبيق الخطوات التي في الموضوع

      حذف
  3. أزال أحد مشرفي المدونة هذا التعليق.

    ردحذف
  4. انت كاتب : " معايتة " خليها معاينة =q

    ردحذف
    الردود
    1. نفس الشيء صديقي
      المهم وصل المعنى =q

      حذف

يسعدنا تفاعلكم بالتعليق , لكن يرجى مراعاة الآداب العامة وعدم نشر روابط إشهار حتى ينشر التعليق , ويمكنك ان تستخدم الإبتسامات بالوقوف عليها لمعرفة الكود. اولا تضع الـ = بعدها الحرف الخاص بالإبتسامة
=q =w =s =d =f =g =h =t =y =u =z =x =c =v =b =n =m =a =e =r