Numbered Page Navigation Widget για Blogger

Καλησπέρα σας,

Σήμερα θα σας παρουσιάσω ένα Widget για το Blogger Template σας, το οποίο θα σας βοηθήσει να αποκτήσετε περισσότερη δομή και οργάνωση στην ιστοσελίδα σας. Στην αρχή το είχα θεωρήσει ασήμαντο και δεν το είχα προσθέσει στην συλλογή με τις αναρτήσεις μου, αλλά απ' ότι φάνηκε πολλοί ήσασταν εσείς που μου το ζητήσατε και σκέφτηκα να αφιερώσω λίγο χρόνο ώστε να κλείσει και αυτό το ζήτημα.

Πρόκειτε για το Numbered Page Navigation Widget for Posts το οποίο αριθμίζει αυτόματα τις σελίδες με τις αναρτήσεις σας στο τέλος κάθε σελίδας αναρτήσεων και επιτρέπει στον χρήστη να τις αλλάζει πιο γρήγορα, πιο αποτελεσματικά και με λιγότερο κόπο.

Ακολουθήστε τα παρακάτω βήματα για προσθήκη:

1) Σύνδεση στον Blogger
2) Πρότυπο
3) Επεξεργασία HTML
4) Κάνουμε Click κάπου μέσα στο κουτί που έχει τους κώδικες και
     με την βοήθεια του CTRL (πατημένο συνέχεια) + F ψάχνουμε για το:

]]></b:skin>

5) Μόλις το βρούμε ακριβώς από πάνω βάζουμε:

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{font-size: 14px;padding: 5px 12px;margin-right:5px; color: #666; background-color:#eee;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#359BED;text-decoration:none;color: #fff;}
#blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#359BED;}
 .showpageOf{display:none!important}
#blog-pager .pages{border:none;}

6) Στην συνέχεια, με τη βοήθεια του CTRL + F, βρείτε το παρακάτω:

</body>

7) Αφού το βρείτε, ακριβώς από πάνω προσθέστε τον παρακάτω κώδικα:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
  /*<![CDATA[*/
    var perPage=7;
    var numPages=6;
    var firstText ='First';
    var lastText ='Last';
    var prevText ='« Previous';
    var nextText ='Next »';
    var urlactivepage=location.href;
    var home_page="/";
  /*]]>*/
</script>
  <script src="http://helplogger.googlecode.com/svn/trunk/page-navigation2.js"/>
</b:if>
</b:if>

7) Μπορεί κάποιος να αλλάξει τα κόκκινα γράμματα του κώδικα ανάλογα με τις προτιμήσεις του.