1 ΠΡΟΣΑΡΜΟΓΗ ΣΤΟ ΥΠΟΣΕΛΙΔΟ(ΠΑΛΑΙΟΤΕΡΕΣ-ΝΕΟΤΕΡΕΣ ΑΝΑΡΤΗΣΕΙΣ)

Σ'αυτή την ανάρτηση θα προσαρμόσουμε λιγάκι το υποσέλιδο του blog μας,και συγκεκριμένα τις συνδέσεις παλαιότερες και νεότερες αναρτήσεις.Μπορούμε να αλλάξουμε το κείμενο με αυτό της αρεσκείας μας ή να βάλουμε εικονίδιο δίπλα απο το κείμενο ή και να αντικαταστήσουμε το κείμενο με εικόνα της αρεσκείας μας.Άς ξεκινήσουμε.Αρχικά...

.... 
►Σχεδίαση
►Επεξεργασία Html
►Κλίκ επέκταση προτύπων γραφικών στοιχείων

• Με την βοήθεια του ctrl-f βρείτε το παρακάτω τμήμα κωδικού(δεν κάνουμε αντιγραφή και επικόλληση στην εύρεση όλο αυτό το τμήμα,μόνο την πρώτη γραμμή)

<b:includable id='nextprev'>

<div class='blog-pager' id='blog-pager'>

<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>

<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
</b:if>

</div>

<div class='clear'/>

</b:includable>

Τώρα όπως βλέπετε υπάρχουν 3 διαφορετικά μέρη του κωδικού...
-με το ρόζ είναι ο κωδικός για τις νεότερες αναρτήσεις
-με το πορτοκαλί είναι για τις παλαιότερες
-με το πράσινο είναι η αρχική σελίδα

                                         Αλλάξτε το κείμενο των συνδέσεων

Πρέπει να αντικαταστήσετε τα επόμενα μέρη του αρχικού κωδικού,με όποιο κείμενο σας αρέσει
► αντικατάσταση <data:newerPageTitle/> με, για παράδειγμα NEXT POST
►  αντικατάσταση  <data:olderPageTitle/> με, για παράδειγμα PREVIOUS POST
► αντικατάσταση <data:homeMsg/> (μόνο το πρώτο) με, για παράδειγμα HOMEPAGE

• Δείτε τον κωδικό ολοκληρωμένο

<b:includable id='nextprev'>

<div class='blog-pager' id='blog-pager'>

<b:if cond='data:newerPageUrl'>

<span id='blog-pager-newer-link'>

<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'>NEXT POST</a>

</span>

</b:if>

<b:if cond='data:olderPageUrl'>

<span id='blog-pager-older-link'>

<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'>PREVIOUS POST</a>

</span>

</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>

<a class='home-link' expr:href='data:blog.homepageUrl'>HOMPAGE</a>

<b:else/>

<b:if cond='data:newerPageUrl'>

<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>

</b:if>

</b:if>

</div>

<div class='clear'/>

</b:includable>

                                         Βάλτε εικονίδιο/icon ή είκονα/image
                                                δίπλα στους συνδέσμους

Θα πρέπει να εισάγετε τον κωδικό για την εικόνα

<Img src = " http://i42.tinypic.com/zn4qic.jpg "/>

Αντικαταστήστε το πορτοκαλί χρώμα με το url της εικόνας σας

• Δείτε τον κωδικό ολόκληρο

<b:includable id='nextprev'>

<div class='blog-pager' id='blog-pager'>

<b:if cond='data:newerPageUrl'>

<span id='blog-pager-newer-link'>

<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><img src='http://i42.tinypic.com/zn4qic.jpg'/><data:newerPageTitle/></a>

</span>

</b:if>

<b:if cond='data:olderPageUrl'>

<span id='blog-pager-older-link'>

<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/><img src='http://i40.tinypic.com/sfcox4.jpg'/></a>

</span>

</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>

<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>

<b:else/>

<b:if cond='data:newerPageUrl'>

<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>

</b:if>

</b:if>

</div>

<div class='clear'/>

</b:includable>  

                                            Εικόνα/image αντί των συνδέσεων

Εδώ μπορείτε να βάλετε όποιο είδος εικόνας θέλετε,φτάνει να χρησιμοποιήσετε το παρακάτω κωδικό

<img src='URL ADDRESS'/>

Απλώς αντικαθιστάτε το ρόζ μέρος με την εικόνα(url)που θέλετε
► αντικατάσταση <data:newerPageTitle/> με εικόνα για νεότερες αναρτήσεις
► αντικατάσταση <data:olderPageTitle/> με εικόνα για παλαιότερες αναρτήσεις
► αντικατάσταση <data:homeMsg/> (only the first one) με εικόνα για την αρχική σελίδα

• Δείτε τον κώδικα ολοκληρωμένο

<b:includable id='nextprev'>

<div class='blog-pager' id='blog-pager'>

<b:if cond='data:newerPageUrl'>

<span id='blog-pager-newer-link'>

<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><img src='URL ADDRESS'/></a>

</span>

</b:if>

<b:if cond='data:olderPageUrl'>

<span id='blog-pager-older-link'>

<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><img src='URL ADDRESS'/></a>

</span>

</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>

<a class='home-link' expr:href='data:blog.homepageUrl'><img src='URL ADDRESS'/></a>

<b:else/>

<b:if cond='data:newerPageUrl'>

<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>

</b:if>

</b:if>

</div>

<div class='clear'/>

</b:includable>

ΑΠΟΘΗΚΕΥΣΗ ΠΡΟΤΥΠΟΥ
                                                  



ΑΝ ΣΑΣ ΑΡΕΣΕ ΤΟ ΑΡΘΡΟ ΒΑΘΜΟΛΟΓΗΣΤΕ Ή ΑΦΗΣΤΕ ΤΟ ΣΧΟΛΙΟ ΣΑΣ!!!