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

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

لاضافة الاداة بالاستايل التالي نتبع مايلي

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

. بعد إضافة الأداة أنتقل إلى "القالب"
احفظ نسخة احتياطية لقالبك لتفادي المشاكل اولا

ثم أنقر على تحرير HTML
ثم من خلال خاصية البحث بالضغط على ctrl+F ابحث عن تسمية الاداة حدد الكود الخاص بالاداة

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

<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 + "_content"' style='display: none;'>
      <b:if cond='data:showSparkline'>
        <img alt='Sparkline' expr:id='data:widget.instanceId + "_sparkline"' 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 + "_totalCount"'/>
      <b:else/>
        <span class='counter-wrapper text-counter-wrapper' expr:id='data:widget.instanceId + "_totalCount"'/>
      </b:if>
<script type='text/javascript'>
function postCount(json){
document.write("<span class='counts post2'> المشاركات ");
var count = json.feed.openSearch$totalResults.$t;
document.write("<span class='count'>" + count + "</span>");
document.write("</span>")
}

function numberOfComments(json){
document.write("<span class='counts comment'> التعليقات ");
var count = json.feed.openSearch$totalResults.$t;
document.write("<span class='count'>" + count + "</span>");
document.write("</span>")
}

</script>
<script src='/feeds/posts/default?alt=json-in-script&amp;max-results=0&amp;callback=postCount' type='text/javascript'/>
<script src='/feeds/comments/default?alt=json-in-script&amp;max-results=0&amp;callback=numberOfComments'/>

    </div>
</div>
</b:includable>
              </b:widget>

وأخيرًا أبحث عن الكود

</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:" المشاهدات ";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:"\f06e";}
.counts.post2:before {content:"\f044";}
.counts.comment:before {content:"\f0e6";}
#Stats1_content {width:auto;height:auto;background-color:#fff;}
</style>

************************************************************

هذه طريقة اخرى باستايل مختلف كالتالي

ابحث عن الكود بالصورة التالية وحدد بالكامل

واستبدله بالكود التالي

<div class='widget-content'><ul class='cnmustatusw'><li class='cnmuspos'><i class='fa fa-file-text-o'/><span>عدد المواضيع : </span><h4 id='cnmustatpost'>&hellip;</h4></li><li id='cnmutc'><i class='fa fa-comments'/><span>عدد التعليقات : </span><h4 id='cnmustatcommen'>&hellip;</h4></li><li id='cnmutcount'><i class='fa fa-line-chart'/><span>عدد المشاهدات : </span><h4 expr:id='data:widget.instanceId + "_totalCount"'>&hellip;</h4></li></ul><script type='text/javascript'>
    //<![CDATA[
    function totalPosts(json){document.getElementById('cnmustatpost').innerHTML=json.feed.openSearch$totalResults.$t};function cnmutc(json){document.getElementById('cnmustatcommen').innerHTML=json.feed.openSearch$totalResults.$t};document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalPosts\"><\/script><script type=\"text/javascript\" src=\"/feeds/comments/default?alt=json-in-script&max-results=0&callback=cnmutc\"><\/script>');
    //]]>
    </script></div>

ثم ابحث عن الكود التالي

]]></b:skin>

وضع الكود التالي فوقه

/*إحصائيات المدونة*/.cnmustatusw {color: #fff;list-style: outside none none;margin: 0 !important;padding: 0 !important;}.cnmustatusw li {display: block;font-size: 15px;height: 32px;line-height: 32px;margin-bottom: 10px;overflow: hidden;}.cnmustatusw i {border-radius: 0%;color: #fff;font-size: 18px;height: 32px;line-height: 32px;margin-left: 8px;text-align: center;width: 32px;}.cnmustatusw i, .cnmustatusw span, .cnmustatusw h4 {float: right;line-height: 30px;margin-left: 4px;}.cnmustatusw h4 {color:#FDCF00;}.credit {background-color: #eee;font-size: 12px;height: 30px;line-height: 29px;overflow: hidden;padding: 0 5px;}.credit a {background-color: #E74C3C;border-radius: 4px;color: #fff;display: inline-block;font-size: 11px;font-weight: bold;height: 20px;line-height: 20px;padding: 0 8px;}.credit a:hover {background-color: #607D8B;}

مدونة USB ARAB

أبحث في المدونة

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

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

إرسال تعليق

سحابة الكلمات الدلالية