RSS

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

21 Ιον.

Καλησπέρα σε όλους και καλή εβδομάδα. Σήμερα θα δούμε πως μπορούμε να τοποθετήσουμε τρεις στήλες στο κάτω μέρος του 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 (κλικ στην εικόνα για μεγέθυνση).

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

Advertisements
 
21 Σχόλια

Posted by στο Ιουνίου 21, 2009 in CODE, EDITING, GADGET, HTML, WIDGET

 

21 responses to “ΠΡΟΣΘΗΚΗ ΣΤΟΙΧΕΙΩΝ GADGET

  1. ΓΙΑΝΝΗΣΒΕΡ

    Ιουνίου 21, 2009 at 10:36 μμ

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

     
  2. lovasas

    Ιουνίου 21, 2009 at 10:47 μμ

    Thanks mate!

     
  3. hackaday

    Ιουνίου 22, 2009 at 12:28 πμ

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

     
  4. gatodiakritikos

    Ιουνίου 27, 2009 at 10:08 πμ

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

     
  5. hackaday

    Ιουνίου 27, 2009 at 12:55 μμ

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

     
  6. johnpatra

    Ιουλίου 13, 2009 at 2:33 μμ

    πολυ καλό.το δοκίμασα σήμερα στο johnpatragames.blogspot.com και πέτυχε.ευχαριστώ locusblogus

     
  7. hackaday

    Ιουλίου 13, 2009 at 9:48 μμ

    @johnpatra Να 'σαι καλά. ;-D

     
  8. JohnPatra

    Ιουλίου 21, 2009 at 6:18 μμ

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

     
  9. JohnPatra

    Ιουλίου 21, 2009 at 6:19 μμ

    και στο johnpatragames που το δοκιμασα δεν εχει το σκετο minima αλλα το minima strechy

     
  10. hackaday

    Ιουλίου 22, 2009 at 9:16 μμ

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

     
  11. JohnPatra

    Ιουλίου 23, 2009 at 10:05 πμ

    ναι και μενα περιεργο μου φαινεται να πετυχαινει στο αλλο και οχι στο απλο.τελοσπαντων θα το ξαναδοκιμασω και θα δουμε.ναι σαι καλα

     
  12. Anonymous

    Σεπτεμβρίου 30, 2009 at 9:37 πμ

    Οταν κανω το πρωτο εμφανιζει τρια gadget κατω αλλα το αλλο δεν πιανει.Το κανω ετσι :#footer-column-container {clear:both;}.footer-column {padding: 10px;}]]/b:skinκανω κατι λαθος?

     
  13. hackaday

    Σεπτεμβρίου 30, 2009 at 9:41 πμ

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

     
  14. Anonymous

    Σεπτεμβρίου 30, 2009 at 10:45 πμ

    πρωτο εννοω την αντικατασταση του πρωτου κωδικα. δευτερο το δευτερο μερος που βαζεις το ''#footer-column-container {clear:both;}.footer-column {padding: 10px;}''αλλα το βαζω και δεν γινεται τιποτα

     
  15. hackaday

    Σεπτεμβρίου 30, 2009 at 11:51 πμ

    @ανώνυμος Ποιο template χρησιμοποιείς;

     
  16. Anonymous

    Οκτώβριος 3, 2009 at 12:43 μμ

    δεν ξερω. τελος παντων δεν πειραζει. μηπως ξερεις πως μπορω να κανω αρχειοθετηση των αναρτησεων οχι κατα ημερομηνια αλλα κατα κατηγορια?

     
  17. hackaday

    Οκτώβριος 3, 2009 at 12:47 μμ

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

     
  18. Anonymous

    Οκτώβριος 3, 2009 at 1:50 μμ

    ευχαριστω

     
  19. Τάκης Σουλεϊμάν

    Οκτώβριος 3, 2009 at 1:58 μμ

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

     
  20. Anonymous

    Οκτώβριος 3, 2009 at 1:59 μμ

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

     
  21. hackaday

    Οκτώβριος 11, 2009 at 6:04 μμ

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

     

Σχολιάστε

Εισάγετε τα παρακάτω στοιχεία ή επιλέξτε ένα εικονίδιο για να συνδεθείτε:

Λογότυπο WordPress.com

Σχολιάζετε χρησιμοποιώντας τον λογαριασμό WordPress.com. Αποσύνδεση / Αλλαγή )

Φωτογραφία Twitter

Σχολιάζετε χρησιμοποιώντας τον λογαριασμό Twitter. Αποσύνδεση / Αλλαγή )

Φωτογραφία Facebook

Σχολιάζετε χρησιμοποιώντας τον λογαριασμό Facebook. Αποσύνδεση / Αλλαγή )

Φωτογραφία Google+

Σχολιάζετε χρησιμοποιώντας τον λογαριασμό Google+. Αποσύνδεση / Αλλαγή )

Σύνδεση με %s

 
Αρέσει σε %d bloggers: