Δευτέρα, 21 Μαρτίου 2011

how-to:Περιγραφή συγγραφέως ( Author Box) στο τέλος των αναρτήσεων


Ο κωδικός αυτός αναπτύχθηκε για να χρησιμοποιηθεί σε blogs με περισσότερους από έναν συγγραφέα. Έτσι ώστε η περιγραφή αυτή του συγγραφέα να εμφανίζεται κάτω από τις αναρτήσεις που έγραψε.
Όλα αυτά αυτόματα χωρίς να χρειαστεί να τροποποιήσετε τίποτα στις αναρτήσεις .



1ο Βήμα : Κάνετε Login στο λογαριασμό του Blogger σας , Πηγαίνετε Διάταξη -> Επεξεργασία HTML και πατήστε στο κουτάκι Επέκταση προτύπων γραφικών στοιχείων .

2ο Βήμα : Πατήστε Ctrl + f και ψάξτε στο πρότυπό σας για την ετικέτα:


]]></b:skin>

3ο Βήμα : Κολλήστε ακριβώς ΑΠΟ ΠΑΝΩ τον παρακάτω κώδικα :

#post-footer-autor {
width: 90%;
height: 67px;
background: #e6e6e6;
border:3px solid #b3b3b3;
margin: 8px 0px 8px 0px;
font-family: &amp;#039;Trebuchet MS&amp;#039;,Trebuchet,Arial,Verdana,Sans-serif;
}
#autor-img { /* Avatar */
width: 54px;
height: 54px;
background: #fff;
float: left;
margin: 7px;
}
#autor-box {
padding-right: 5px;
margin: 0px;
}
#autor-box p{ / * Style text description * /
font-size: 12px;
padding: 10px;
margin: 0;
text-align: justify;
text-transform: normal;
color: #666666;
}
#autor-box a{ / * Style linked text * /
color: #000fcc;
text-decoration:none;
}
#autor-box a:hover {
color:#7780ee;
text-decoration:underline;
}



Ο κώδικας CSS παραπάνω είναι τα χαρακτηριστικά του Author Box . Αν γνωρίζετε αρκετά για να αλλάξετε τις πιο βασικές CSS, όπως η αλλαγή των χρωμάτων και μεγεθών. Απλά αλλάξετε το στυλ με προσοχή και κατόπιν προσαρμόστε το widget.


4ο Βήμα : Ψάξτε (Ctrl + f) στο πρότυπό σας για τον κώδικα :

<div class="post-footer">
η για το
<div id="post-footer">
η για το
<data:post.body/> (αν είναι πολλά, λογικά είναι το τελευταίο) και (με την προϋπόθεση ότι μετά/ακριβώς δίπλα από το <data:post.body/> δεν θα υπάρχει κάποιος άλλος κώδικας)

5ο Βήμα : Κολλήστε ακριβώς ΑΠΟ ΚΑΤΩ τον παρακάτω κώδικα :

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:post.author == &quot;ΟΝΟΜΑΣΙΑ ΤΟΥ ΣΥΓΓΡΑΦΕΑ&quot;'>
<div id='post-footer-autor'>
<div id='autor-img'>
<img src='URL ΤΗΣ ΕΙΚΟΝΑΣ' style='width: 50px;height: 50px; border: 2px solid #b3b3b3; padding: 0; margin: 0;'/>
</div>
<div id='autor-box'>
<p>
ΠΕΡΙΓΡΑΦΗ ΤΟΥ ΣΥΓΓΡΑΦΕΑ ΕΔΩ
</p>
</div>
</div>
</b:if>
</b:if>

Αυτούς του κώδικες που έχω γράψει με κίτρινο είναι για το αν θέλετε να φαίνεται και στην αρχική ή μόνο στη σελίδα στης ανάρτησης(έτσι όπως είναι τώρα δεν θα φαίνεται στην αρχική, άμα θέλετε να φαίνεται και στην αρχική διαγράψτε τους κώδικες).

Ο παραπάνω κώδικας κάνει αναφορά σε έναν συγγραφέα!
Για να θέσουμε διαφορετικούς συγγραφείς απλά αντιγράψετε και επικολλήστε τον κώδικα πολλές φορές ακριβώς πάνω από τον πρώτο κώδικα , τόσες όσους συγγραφείς έχει το blog και απλά κάντε τις εξής αλλαγές:

ΟΝΟΜΑΣΙΑ ΤΟΥ ΣΥΓΓΡΑΦΕΑ -> Βάλτε το ακριβές όνομα του συγγραφέα, το ίδιο όνομα χρήστη που χρησιμοποιείται στο λογαριασμό για να δημοσιεύσετε τις αναρτήσεις . Το όνομα πρέπει να είναι ακριβώς ίδιο αλλιώς ο κωδικός δεν θα λειτουργήσει σωστά.
Παράδειγμα: Στο blog μου χρησιμοποιώ για να συνδεθώ στο blog μου και να δημοσιεύσω ανάρτηση το όνομα: Ilias. Έτσι θα βάλω το : Ilias . Αν ήταν Admin Θα έπρεπε να βάλω το Admin, Αν ήταν iks-Team.com .Θα έπρεπε να βάλω το iks-Team.com .
URL ΤΗΣ ΕΙΚΟΝΑΣ -> Τοποθετήστε το σύνδεσμο εικόνας που χρησιμοποιείται ως avatar . Υπενθυμίζοντας ότι το link θα πρέπει να έχει μια άμεση διαδρομή προς την εικόνα με μέγεθος 50px Χ 50px . Μην ξεχνάτε το http://
ΠΕΡΙΓΡΑΦΗ ΤΟΥ ΣΥΓΓΡΑΦΕΑ ΕΔΩ -> Βάλτε το κείμενο της περιγραφής του συγγραφέα .Μπορείτε να γράψετε οτι θέλετε εσείς . Κάντε την δοκιμή, ώστε το κείμενο να μην περάσει το όριο των πεδίων του widget.
Χρησιμοποιήστε αν θέλετε και τις συνδέσεις που θέλετε στο πλαίσιο της περιγραφής.
ΣΗΜΑΝΤΙΚΟ : Εάν το blog σας έχει περισσότερους από έναν συγγραφέα, επικολλήστε τον κώδικα ακριβώς πάνω από τον πρώτο κώδικα όσο συχνά απαιτείται και κάντε την επεξεργασία τους, έτσι ώστε ο κάθε συγγραφέας έχει τον κωδικό του.

Κάντε Προεπισκοηση πρώτα και αν είναι όλα εντάξει Αποθηκεύετε το πρότυπό σας και επαναλάβετε τη δοκιμή αν χρειαστεί .
Καλή επιτυχία σε όλους !!!


















0 σχόλια:

Δημοσίευση σχολίου

Related Posts Plugin for WordPress, Blogger...