Hi! Welcome...

Premium Blogger Template
FREE Premium Blogger Templates
Μοναδικά Free Blogger πρότυπα για το blog σας
Slimbox 2.02 με jquery-1.3.2 στο Bloggspot .
Πώς να εγκαταστήσετε SlimBox σε Blogger
ΙmgBox
Για να παρουσιάσετε τις εικόνες σας με στυλ !!!
31 καλυτέρα Blogger Widgets και addon
Κατάλογος συνδέσμων όπου μπορείτε να ανακαλύψετε περισσότερα widgets για το blog σας.
1 2 3 4 5

Πέμπτη, Μαΐου 6

15

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

Υπάρχουν πολλά blogs που έχουν περισσότερους από έναν συγγραφέα .
Έτσι σκέφτηκα να δημιουργήσω ένα " πεδίο " κάτω από τις αναρτήσεις όπου μπορεί να μπει μια φωτογραφία και μια σύντομη περιγραφή κείμενου του συγγραφέα που έγραψε το κείμενο του κάθε 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;
}

Ο κώδικας 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 == &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>

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

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

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

15:

post2.soo είπε...

Αυτό θα το χρησιμοποιήσω μου φαίνεται. Τhank you girl! O:-)

bloggertrics είπε...

<span>Τhank you γλυκιά μου </span> ;)
Δοκίμασε το και πες μου την γνώμη σου !

Φιλιαααα :*

post2.soo είπε...

Ακόμα δεν βρήκα χρόνο να ασχοληθώ με το σχεδιαστικό κομμάτι, αλλά νομίζω πως σήμερα θα το προσπαθήσω. Σου στείλω μήνυμα να το δεις ε! Περιμένω φώτο σου χαχαχα :-P :-P :-P :-P :-P

bloggertrics είπε...

Οκ κοριτσακι μου  :*
Θα ανεβασω απο το κινητο μου τις φωτο και θα σου τις στειλω 

Φιλιααααααα  O:-) :-D

post2.soo είπε...

Ωραία, το κατάφερα αλλά θέλω βοήθεια...
1ον δεν θέλω να εμφανίζεται στην αρχική σελίδα αλλά μόνο όταν κλικάρεις στο άρθρο (νομίζω κατάλαβες τι εννοώ :-P ) και

2ον Γιατί μου βγαίνει πάνω από το ποστ (εγώ το θέλω στο κάτω μέρος του ποστ :-P )

post2.soo είπε...

Α καλά το 2ο ερώτημα το διόρθωσα αλλά θέλω βοήθεια στο 1ο μουαχαχα

bloggertrics είπε...

Καλησπέρα γλυκιά μου  :*

Για να μην εμφανίζετε στην αρχική σελίδα θα κάνεις το εξης : 

Θα κολλήσεις πάνω και κάτω από  τον κώδικά στο βήμα 5ο τις  παρακάτω  γραμμές :




<b:if>

 Εδώ ο κώδικάς που είναι στο Βήμα 5ο

</b:if>


Έτσι θα εμφανίζετε μόνο όταν θα ανοίξεις ολόκληρο το άρθρο ! 

Αυτααααααα  :-P :-P :-P

Φιλιαααα !!!

post2.soo είπε...

Γουυυυ! Ευχαριστώ Σοφάκι!!  :* O:-) :-P >:o ;)

post2.soo είπε...

To πέτυχα αν και έχω κάνει μαμακία θα την βρω την άκρη :-P

post2.soo είπε...

Θα μου λύσεις ακόμα μία απορία? ε?
Θέλω να τοποθετήσω το box δεξιά. Που βάζω το float ή το align για να πάει right? >:o

bloggertrics είπε...

Όσες απορίες θέλεις θα σου λύσω χι χι :-D :-P
Λοιπόν σε αυτήν την περίπτωση χρησιμοποιούμε το float , όμως το καλύτερο θα είναι αντί για το float να χρησιμοποιήσεις

position:relative;
left: 55px;

και ρυθμίζεις το left: 55px; ανάλογα με το πόσο δεξιά θέλεις να το πας . όσο πιο δεξιά τόσο πιο πολυ ανεβάζεις τα pixels . δηλ. το left: 55px; θα γίνουν left: 95px; και ούτω καθεξής .
Έτσι μπορείς να ρυθμίσεις με ακρίβεια την θέση που θέλεις να εμφανιστεί .

post2.soo είπε...

Ωωωω ευχαριστώ πολύ δεσποινίς =-O :-P :*

Φουρνιωτης είπε...

ΜΟΥ ΑΡΕΣΕ ΠΟΛΥ ΕΥΧΑΡΙΣΤΩ
ΕΓΩ ΤΟ ΑΛΛΞΑ ΛΙΓΟ ΚΑΙ ΕΒΑΛΑ ΚΑΙ ΕΙΚΟΝΕΣ
ΤΟ BANNER ΣΟΥ ΕΧΕΙ ΜΠΕΙ ΣΤΟ BLOG ΜΟΥ

bloggertrics είπε...

@ Φουρνιωτης
Να είσαι καλά και σ'ευχαριστω :-D :-P

Galini είπε...

Όπως πάντα εξαιρετικό τουτόριαλ, κατανοητό ακόμη και για αρχάριους!!! Ήδη το έφτιαξα εις τριπλούν!
Ευχαριστώωω!!!

 

© 2010 Bloggertrics

WordPress Theme by: WooThemes. | Converted into Blogger Templates by : Bloggertrics

ΑΡΧΙΚΗ| Sitemap| Posts RSS