Έτσι σκέφτηκα να δημιουργήσω ένα " πεδίο " κάτω από τις αναρτήσεις όπου μπορεί να μπει μια φωτογραφία και μια σύντομη περιγραφή κείμενου του συγγραφέα που έγραψε το κείμενο του κάθε blog.
Για να δείτε τι εννοώ , κοιτάξτε κάτω από αυτήν την ανάρτηση
Ο κωδικός αυτός αναπτύχθηκε για να χρησιμοποιηθεί σε 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: 'Trebuchet MS',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;
}
width: 90%;
height: 67px;
background: #e6e6e6;
border:3px solid #b3b3b3;
margin: 8px 0px 8px 0px;
font-family: 'Trebuchet MS',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/>
5ο Βήμα : Κολλήστε ακριβώς ΑΠΟ ΠΑΝΩ τον παρακάτω κώδικα :
<b:if cond='data:post.author == "ΟΝΟΜΑΣΙΑ ΤΟΥ ΣΥΓΓΡΑΦΕΑ"'>
<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>
Ο παραπάνω κώδικας κάνει αναφορά σε έναν συγγραφέα!
Για να θέσουμε διαφορετικούς συγγραφείς απλά αντιγράψετε και επικολλήστε τον κώδικα πολλές φορές ακριβώς πάνω από τον πρώτο κώδικα , τόσες όσους συγγραφείς έχει το blog και απλά κάντε τις εξής αλλαγές:
- ΟΝΟΜΑΣΙΑ ΤΟΥ ΣΥΓΓΡΑΦΕΑ -> Βάλτε το ακριβές όνομα του συγγραφέα, το ίδιο όνομα χρήστη που χρησιμοποιείται στο λογαριασμό για να δημοσιεύσετε τις αναρτήσεις . Το όνομα πρέπει να είναι ακριβώς ίδιο αλλιώς ο κωδικός δεν θα λειτουργήσει σωστά.
- URL ΤΗΣ ΕΙΚΟΝΑΣ -> Τοποθετήστε το σύνδεσμο εικόνας που χρησιμοποιείται ως avatar . Υπενθυμίζοντας ότι το link θα πρέπει να έχει μια άμεση διαδρομή προς την εικόνα με μέγεθος 50px Χ 50px . Μην ξεχνάτε το http://
- ΠΕΡΙΓΡΑΦΗ ΤΟΥ ΣΥΓΓΡΑΦΕΑ ΕΔΩ ->
Βάλτε το κείμενο της περιγραφής του συγγραφέα .Μπορείτε να γράψετε οτι θέλετε εσείς . Κάντε
την δοκιμή, ώστε το κείμενο να μην περάσει το όριο των πεδίων του widget.
Χρησιμοποιήστε αν θέλετε και τις συνδέσεις που θέλετε στο πλαίσιο της περιγραφής.
ΣΗΜΑΝΤΙΚΟ : Εάν το blog σας έχει περισσότερους από έναν
συγγραφέα, επικολλήστε τον κώδικα ακριβώς πάνω από τον πρώτο κώδικα όσο συχνά απαιτείται
και κάντε την επεξεργασία τους, έτσι ώστε ο κάθε συγγραφέας έχει τον κωδικό του.
Κάντε Προεπισκοηση πρώτα και αν είναι όλα εντάξει Αποθηκεύετε το πρότυπό σας και επαναλάβετε τη δοκιμή αν χρειαστεί .
Καλή επιτυχία σε όλους !!!
Για να επεξεργαστείτε καλύτερα τον κώδικα , διαβάστε τα ακόλουθα κείμενα :
Αυτό θα το χρησιμοποιήσω μου φαίνεται. Τhank you girl! O:-)
<span>Τhank you γλυκιά μου </span> ;)
Δοκίμασε το και πες μου την γνώμη σου !
Φιλιαααα :*
Ακόμα δεν βρήκα χρόνο να ασχοληθώ με το σχεδιαστικό κομμάτι, αλλά νομίζω πως σήμερα θα το προσπαθήσω. Σου στείλω μήνυμα να το δεις ε! Περιμένω φώτο σου χαχαχα :-P :-P :-P :-P :-P
Οκ κοριτσακι μου :*
Θα ανεβασω απο το κινητο μου τις φωτο και θα σου τις στειλω
Φιλιααααααα O:-) :-D
Ωραία, το κατάφερα αλλά θέλω βοήθεια...
1ον δεν θέλω να εμφανίζεται στην αρχική σελίδα αλλά μόνο όταν κλικάρεις στο άρθρο (νομίζω κατάλαβες τι εννοώ :-P ) και
2ον Γιατί μου βγαίνει πάνω από το ποστ (εγώ το θέλω στο κάτω μέρος του ποστ :-P )
Α καλά το 2ο ερώτημα το διόρθωσα αλλά θέλω βοήθεια στο 1ο μουαχαχα
Καλησπέρα γλυκιά μου :*
Για να μην εμφανίζετε στην αρχική σελίδα θα κάνεις το εξης :
Θα κολλήσεις πάνω και κάτω από τον κώδικά στο βήμα 5ο τις παρακάτω γραμμές :
<b:if>
Εδώ ο κώδικάς που είναι στο Βήμα 5ο
</b:if>
Έτσι θα εμφανίζετε μόνο όταν θα ανοίξεις ολόκληρο το άρθρο !
Αυτααααααα :-P :-P :-P
Φιλιαααα !!!
Γουυυυ! Ευχαριστώ Σοφάκι!! :* O:-) :-P >:o ;)
To πέτυχα αν και έχω κάνει μαμακία θα την βρω την άκρη :-P
Θα μου λύσεις ακόμα μία απορία? ε?
Θέλω να τοποθετήσω το box δεξιά. Που βάζω το float ή το align για να πάει right? >:o
Όσες απορίες θέλεις θα σου λύσω χι χι :-D :-P
Λοιπόν σε αυτήν την περίπτωση χρησιμοποιούμε το float , όμως το καλύτερο θα είναι αντί για το float να χρησιμοποιήσεις
position:relative;
left: 55px;
και ρυθμίζεις το left: 55px; ανάλογα με το πόσο δεξιά θέλεις να το πας . όσο πιο δεξιά τόσο πιο πολυ ανεβάζεις τα pixels . δηλ. το left: 55px; θα γίνουν left: 95px; και ούτω καθεξής .
Έτσι μπορείς να ρυθμίσεις με ακρίβεια την θέση που θέλεις να εμφανιστεί .
Ωωωω ευχαριστώ πολύ δεσποινίς =-O :-P :*
ΜΟΥ ΑΡΕΣΕ ΠΟΛΥ ΕΥΧΑΡΙΣΤΩ
ΕΓΩ ΤΟ ΑΛΛΞΑ ΛΙΓΟ ΚΑΙ ΕΒΑΛΑ ΚΑΙ ΕΙΚΟΝΕΣ
ΤΟ BANNER ΣΟΥ ΕΧΕΙ ΜΠΕΙ ΣΤΟ BLOG ΜΟΥ
@ Φουρνιωτης
Να είσαι καλά και σ'ευχαριστω :-D :-P
Όπως πάντα εξαιρετικό τουτόριαλ, κατανοητό ακόμη και για αρχάριους!!! Ήδη το έφτιαξα εις τριπλούν!
Ευχαριστώωω!!!