404
نعتذر , لا نستطيع ايجاد الصفحة المطلوبة
  • العودة الى الصفحة الرئيسية
  • السبت، 14 يناير، 2017

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

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

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

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


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

    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>
    

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

    نحن مجموعة من الشبان الذين تجمعهم علاقة صداقة و نحن جزء من مدونة دليل الحاسوب التي ستصبح يوما ما من أهم المدونات في العالم العربي هذه المدونة تحت رعاية مجموعة إتحاد العرب

    الكاتب : احلى شرح

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

    إرسال تعليق

    جميع الحقوق محفوظة ل دليل الحاسوب