ΠΡΟΣΘΗΚΗ ΣΤΟΙΧΕΙΩΝ 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 (κλικ στην εικόνα για μεγέθυνση).

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