Κυριακή, 21 Ιουνίου 2009

Print this post

ΠΡΟΣΘΗΚΗ ΣΤΟΙΧΕΙΩΝ GADGET

Καλησπέρα σε όλους και καλή εβδομάδα. Σήμερα θα δούμε πως μπορούμε να τοποθετήσουμε τρεις στήλες στο κάτω μέρος του blog μας, η μία δίπλα στην άλλη και στις οποίες μπορούμε να βάλουμε κώδικα (widgets), κείμενα, φωτογραφίες ή ότι άλλο θέλουμε. Να ζητήσω συγνώμη από το φίλο που ζήτησε το σχετικό θέμα για τη μικρή καθυστέρηση της ανάρτησης.
Μπαίνουμε στο λογαριασμό μας στο blogspot και από τον πανόπτη πάμε διάταξη και επεξεργασία HTML. Πριν κάνουμε οτιδήποτε παίρνουμε ένα αντίγραφο ασφαλείας (back up) του template μας. Μετά πατάμε Control και F (Ctrl+F) για να ανοίξει το ψαχτήρι στο κάτω μέρος του browser. Ψάχνουμε να βρούμε το κομμάτι του κώδικα :

<div id='footer-wrapper'> <b:section class='footer' id='footer'/> </div>

Μπορεί και να το βρούμε (συνήθως στα minima templates) και ως:

<div id='footer-wrapper'> <b:section class='footer' id='footer'> <b:widget id='HTML1' locked='false' title='' type='HTML'/> </b:section> </div>

Τα παραπάνω μέρη του κώδικα τα βρίσκουμε βάζοντας στο ψαχτήρι που ανοίξαμε προηγουμένως:

<div id='footer-wrapper'>

Αυτό που είναι με κόκκινο χρώμα το αντικαθιστούμε με τον παρακάτω κώδικα:

<div id='footer-column-container'>
<div id='footer2' style='width: 30%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='footer3' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div>
<div id='footer4' style='width: 30%; float: right; margin:0; text-align: left;'>
<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
<div id='footer-bottom' style='text-align: center; padding: 10px; text-transform: lowercase;'>
<b:section class='footer' id='col-bottom' preferred='yes'>
<b:widget id='Text2' locked='false' title='' type='Text'/>
</b:section>
</div>
<div style='clear:both;'/>
</div>


Πατάμε προεπισκόπηση και αν δε βγει κανένα μύνημα λάθους πατάμε αποθήκευση (save). Μετά πάμε να βρούμε με το ψαχτήρι μας το κομμάτι του κώδικα:

]]></b:skin>


Αμέσως πριν από αυτό και από πάνω του προσθέτουμε το παρακάτω κομμάτι κώδικα:

#footer-column-container {
clear:both;
}

.footer-column {
padding: 10px;
}


Πατήστε αποθήκευση (save). Πάτε τώρα στη διάταξη και θα δείτε αυτό που δείχνει και το παρακάτω screenshot (κλικ στην εικόνα για μεγέθυνση).

Όπως ανέφερα και στην αρχή αυτής της ανάρτησης μπορείτε να βάλετε ότι θέλετε. Διαφημίσεις, λίστα πρόσφατων σχολίων, λίστα δημοφιλέστερων αναρτήσεων κ.α. Καλή επιτυχία.

22 σχόλια:

  1. Ευχαριστώ! Τα κατάφερα και με κάποιους αυτοσχεδιασμούς. Κι έτρεμα μήπως είναι...δρόμος χωρίς γυρισμό! Σ' ευχαριστώ ΞΑΝΑ!
    http://36dimotiko.blogspot.com

    ΑπάντησηΔιαγραφή
  2. @ΓΙΑΝΝΗΣΒΕΡ Να 'σαι καλά. Αν κρατάς αντίγραφο ασφαλείας μη φοβάσαι τίποτα.
    @lovasas You 're welcome dude.

    ΑπάντησηΔιαγραφή
  3. Hack, καλημερα!!Βασικα καλο φαινεται!!Το θεμα ειναι, επειδη εχω αλλαξει template, συγχρονιζεται με το θεμα του οποιυδηποτε, ή ισως μου εμφανιστει σε "ακυρο" χρωμα κι τη πατησω??

    ΑπάντησηΔιαγραφή
  4. @gatodiakritikos Καλησπέρα και καλό Σου - Κου. Καμιά δεκαπενταριά άτομα που το έκαναν και επικοινώνησαν μαζί μου δε συνάντησαν πρόβλημα. Ορισμένοι από αυτούς δε χρησιμοποιούν templates του blogspot.

    ΑπάντησηΔιαγραφή
  5. πολυ καλό.το δοκίμασα σήμερα στο johnpatragames.blogspot.com και πέτυχε.
    ευχαριστώ locusblogus

    ΑπάντησηΔιαγραφή
  6. Τζίμη σήμερα έκανα μερικές αλλαγές στο προτυπό μου.
    βασικά παλιά είχα το minima strech και είχα βάλει 3 στήλες κάτω κάτω.μια χαρά κανένα λάθος.
    τώρα το πρότυπο μου είναι το minima σκέτο.
    πήγα να βάλω και σε αυτό 3 στήλες κάτω κάτω αλλα κάτι πήγε στραβά.στην αρχή που λες πατάμε προεπισκόπηση να δοούμε αν βγει κανένα λαθος....ε εκεί μου έβγαλε λάθος.λέει αυτό"Βρέθηκαν περισσότερα γραφικά στοιχεία με αναγνωριστικό: Text2. Τα αναγνωριστικά γραφικών στοιχείων πρέπει να είναι μοναδικά.".υπάρχει καμιά λύση ή απλά δεν δουλεύει με το απλό minima template?

    ΑπάντησηΔιαγραφή
  7. και στο johnpatragames που το δοκιμασα δεν εχει το σκετο minima αλλα το minima strechy

    ΑπάντησηΔιαγραφή
  8. @JohnPatra Συγνώμη για την αργοπορημένη απάντηση μου. Εγώ χρησιμοποιώ το απλό minima και σε ένα πειραματικό blog που έχω και δοκιμάζω κάτι πριν το κάνω ανάρτηση το δοκιμάζω. Δεν είχα κανένα πρόβλημα.

    ΑπάντησηΔιαγραφή
  9. ναι και μενα περιεργο μου φαινεται να πετυχαινει στο αλλο και οχι στο απλο.τελοσπαντων θα το ξαναδοκιμασω και θα δουμε.
    ναι σαι καλα

    ΑπάντησηΔιαγραφή
  10. Οταν κανω το πρωτο εμφανιζει τρια gadget κατω αλλα το αλλο δεν πιανει.Το κανω ετσι :

    #footer-column-container {
    clear:both;
    }

    .footer-column {
    padding: 10px;
    }
    ]]/b:skin

    κανω κατι λαθος?

    ΑπάντησηΔιαγραφή
  11. @Ανώνυμος Ποιο άλλο; Δώσε μου μερικές λεπτομέρεις σε παρακαλώ.

    ΑπάντησηΔιαγραφή
  12. πρωτο εννοω την αντικατασταση του πρωτου κωδικα. δευτερο το δευτερο μερος που βαζεις το ''#footer-column-container {
    clear:both;
    }

    .footer-column {
    padding: 10px;
    }''

    αλλα το βαζω και δεν γινεται τιποτα

    ΑπάντησηΔιαγραφή
  13. @ανώνυμος Ποιο template χρησιμοποιείς;

    ΑπάντησηΔιαγραφή
  14. δεν ξερω. τελος παντων δεν πειραζει. μηπως ξερεις πως μπορω να κανω αρχειοθετηση των αναρτησεων οχι κατα ημερομηνια αλλα κατα κατηγορια?

    ΑπάντησηΔιαγραφή
  15. @Ανώνυμος Αυτό είναι εύκολο. Βάζε συγκεκριμένες ετικέτες στις αναρτήσεις σου, π.χ. Τεχνολογία, φωτογραφίες,μουσική, κινηματογράφος κλπ. Από μία ετικέτα όμως. Αν κάνεις κλικ στην ετικέτα Τεχνολογία θα εμφανιστούνε όες οι αναρτήσεις σου που έβαλες τη συγκεκριμένη ετικέτα.

    ΑπάντησηΔιαγραφή
  16. Αυτό το σχόλιο αφαιρέθηκε από τον συντάκτη.

    ΑπάντησηΔιαγραφή
  17. Μηπως ξερεις αν μπορω να ανεβασω δικο μου βιντεο στο μπλογκ? οταν παταω για νεα αναρτηση εχει μονο να ανεβασω φωτο.

    ΑπάντησηΔιαγραφή
  18. @Ανώνυμος Μπορείς. πρώτα όμως πρέπει να ανεβάσεις το video στο youtube ή σε κάποια άλλη παρόμοια υπηρεσία και από εκεί παίρνεις τον κωδικό embed. Τον κωδικό τον κάνεις αντιγραφή - επικόλληση μέσα στο πλαίσιο όπου γράφεις τις αναρτήσεις σου.

    ΑπάντησηΔιαγραφή
  19. Αυτό το σχόλιο αφαιρέθηκε από τον συντάκτη.

    ΑπάντησηΔιαγραφή

back to top