ΑΛΛΑΓΗ ΤΟΥ ΣΤΥΛ ΤΩΝ ΣΤΑΤΙΣΤΙΚΩΝ ΤΟΥ BLOGGER

ΑΛΛΑΓΗ ΤΟΥ ΣΤΥΛ ΤΩΝ ΣΤΑΤΙΣΤΙΚΩΝ ΤΟΥ BLOGGER
Με τον παρακάτω κώδικα μποτούμε να αλλάξουμε το στυλ των στατιστικών του Blogger. Πρώτα εμφανίστε το gadget του Blogger «Στατιστικά ιστολογίου» αν δεν το έχετε ήδη στην πλαϊνή σας μπάρα. Μετά πηγαίνετε μέσα στο πρότυπο και αναζητήστε την ετικέτα Stats1. Όταν την βρήτε θα δείτε ότι μπροστά από αυτήν την γραμμή είναι ένα μάυρο βελάκι. Πατήστε το για να ανοίξει και να φανερωθεί ο κρυμένος κώδικας. Αφού το πατήσετε θα δείτε από κάτω του την γραμμή <b:includable id='main'> η οποία και αυτή μπροστά της έχει ένα μαύρο βελάκι το οποίο και αυτό πατήστε το να ανοίξει και να φανερωθεί ο κρυμένος κώδικας. Αφού πατήσετε και αυτό θα δείτε τον παρακάτω κώδικα τον οποίο πρέπει να διαγράψετε από <b:if μέχρι το </b:widget>.

Στην θέση του βάλτε τον επόμενο κώδικα πάλι από το από <b:if μέχρι το </b:widget>

▼ Ο ΑΡΧΙΚΟΣ ΚΩΔΙΚΑΣ ΠΡΙΝ ΤΗΝ ΑΛΛΑΓΗ.

►<b:widget id='Stats1' locked='false' title='Συνολικές προβολές σελίδας' type='Stats'>

►<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>

▼ Ο ΚΩΔΙΚΑΣ ΜΕΤΑ ΤΗΝ ΑΛΛΑΓΗ.

<b:widget id='Stats1' locked='false' title='BLOG STATISTICS' type='Stats'>

<b:includable id='main'>

<b:if cond='data:title'><h2><data:title/></h2></b:if>

<div class='widget-content'>

<ul>

<li id='totalCount'>

<h4 expr:id='data:widget.instanceId + &quot;_totalCount&quot;'>&amp;hellip;</h4>

<span>Page views</span>

</li>

<li id='totalposts'>

<h4 id='Stats1_totalPosts'>&amp;hellip;</h4>

<span>Posts</span>

</li>

<li id='totalComments'>

<h4 id='Stats1_totalComments'>&amp;hellip;</h4>

<span>Comments</span>

</li>

</ul>

<script type='text/javascript'>

//<![CDATA[

function totalPosts(json){document.getElementById('Stats1_totalPosts').innerHTML=json.feed.openSearch$totalResults.$t};function totalComments(json){document.getElementById('Stats1_totalComments').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=totalComments\"><\/script>');

//]]>

</script>

</div>

</b:includable>

</b:widget>

Αφού αντιγράψετε και επικολλήσετε τον παρακάνω κώδικα μετά βρήτε την ετικέτα ]]></b:skin> και ακριβώς πρίν από αυτήή επικολλήστε τον παρακάτω κώδικα.

/* BLOGGER STATISTICS STYLE ----------------------------------- */

#Stats1 ul{margin:0px 0;padding:0}

#Stats1 li{display:inline;width:29%;color:#FFFFFF;float:left;margin:0;font:12px Arial;}

#Stats1 li:hover{opacity: 0.7; filter:alpha(opacity=70);}

#Stats1 h4{margin:0;font:18px Arial;line-height:1.2em;color:#FFFFFF;padding: 0 4px 0 4px;}

#Stats1 span{font:12px Arial;color:#FFFFFF;padding: 0 4px 0 4px;}

#totalCount{background: #115595;}

#totalposts{background: #255720;}

#totalComments{background: #661111;}

Τα χρώματα αλλάζουν αλλάζοντας τους κωδικούς των χρωμάτων που μπροστά του βρίσκεται το σύμβολο της δίεσης #. Το πλάτος των κουτιών των στατιστικών αλλάζει, αλλάζοντας το width:29%; για να ταιριάζει στο πλάτος της μπάρας που θα το βάλετε. Επίσης το μέγεθος της γραμματοσειράς αλλάζει, αν αλλάξετε το font:12px Arial; και font:18px Arial; Μετά από αυτά σώστε το πρότυπο και δείτε το αποτέλεσμα.