آبحث من هنا

تغيير شكل إحصائيات المدونة في بلوجر !

تغيير شكل إحصائيات المدونة في بلوجر !

السلام عليكم و رحمة الله و بركاته
اليوم في موضوع جديد من مستلزمات , سوف نشرح كيف نغير مظهر احصائيات المدونة
الي شكل رائع مثل ما في الصورة
--------------------------------------------------------------------------------------
اولاً
نقوم باضافة أداة احصائيات المدونة في مكان مناسب , من خلال > التخطيط > أضافة اداة > ثم اضف اداة
إحصائيات المدونة

ثم
نضيف الاداة و نغير اسم الاداة ليصبح : إحصائيات الموقع
--------------------------------------------------------------------------------------
الان نذهب الي - تحرير HTML
ثم من خلاله اضغط على الانتقال الي الاداة ثم اختر STATS 1 ثم حدد الكود الخاص بها كاملاً

من ثم ضع هذا الكود بدلاً منه
  <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/AVvXsEgCyBertMuR9BWVw0fsn8B0kJbnR7dAuCrKw5liYfa8sInLYtqqVDuDNR9uZgf0g0nP4vsKlWDgCzSk0IcdDoa6UNsEnbGr1MZB7IyXRyu0V822UYEMp2-k8SQ7_vgnp2NXh1Qdz9JRiVg/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>
ثم ابحث عن <head/> باستخدام CTRL+F و ضع هذا الكود فوقها مباشراً
<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>
جميع الحقوق محفوظة لـمستلزمات 2016

تغيير شكل إحصائيات المدونة في بلوجر !

Muhammed ashraf

محمد أشرف , مشرف موقع مستلزمات , عمري 17 سنة مقيم بمصر ,يمكنك مراسلتي عبر ازرار التواصل اسفل هذا النص ,او مرسلتي عبر بريدي الاساسي admin@mostlzmat.com

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

إرسال تعليق