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) Μόλις το βρούμε ακριβώς από πάνω βάζουμε:

.pagenavi span, .pagenavi a {
    display: inline-block;
    padding: 0px 9px;
    margin-right: 4px;
    border-radius: 3px;
    border: solid 1px #c0c0c0;
    background: #e9e9e9;
    box-shadow: inset 0px 1px 0px rgba(255,255,255, .8), 0px 1px 3px rgba(0,0,0, .1);
    font-size: .875em;
    font-weight: bold;
    text-decoration: none;
    color: #717171;
    text-shadow: 0px 1px 0px rgba(255,255,255, 1);
}
.pagenavi span:hover,.pagenavi a:hover {
    background: #fefefe;
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FEFEFE), to(#f0f0f0));
    background: -moz-linear-gradient(0% 0% 270deg,#FEFEFE, #f0f0f0);
}
.pagenavi a.current {
    border: none;
    background: #616161;
    box-shadow: inset 0px 0px 8px rgba(0,0,0, .5), 0px 1px 0px rgba(255,255,255, .8);
    color: #f0f0f0;
    text-shadow: 0px 0px 3px rgba(0,0,0, .5);
}

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

<b:widget id='Blog1' locked='true' title='Αναρτήσεις ιστολογίου' type='Blog'>

Αν δεν το βρείτε ψάξτε για Blog1 σκέτο και λογικά θα σας βγάλει το παραπάνω.

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

<b:includable id='page-navi'>
<div class="pagenavi">
<script type="text/javascript">
var pageNaviConf = {
perPage: 5,
numPages: 5,
firstText: "First",
lastText: "Last",
nextText: &quot;&#187;&quot;,
prevText: &quot;&#171;&quot; }
</script>
<script type="text/javascript" src="https://dl.dropbox.com/u/63968842/navigation%20numbered%20widget%28www.widgetgenerators.blogspot.com%29.js"></script>
<div class="clear" />
</div>
</b:includable>

7) Τώρα για τελευταίο βήμα, ψάξτε τον παρακάτω κώδικα:

<b:include name='nextprev'/>

Και ΑΝΤΙΚΑΤΑΣΤΉΣΤΕ τον με τον παρακάτω κώδικα: (δηλαδή κάντε τον να είναι όπως τον απο κάτω)

<b:if cond='data:blog.pageType == "index"'>
<b:include name='page-navi' />
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<b:include name='page-navi' />
</b:if>
</b:if>

ΑΠΟΘΗΚΕΥΣΗ ΚΑΙ ΤΕΛΟΣ