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

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

ΠΡΟΣΘΗΚΗ ADMIN CONTROL PANEL ΣΤΟ TEMPLATE

Καλό μήνα σε όλους και σε όλες. Πως θα σας φαινόταν αν είχατε ένα control panel στο blog σας το οποίο θα είναι ορατό μόνο σε εσάς όταν κάνετε login και όταν κάνετε logout αυτό να είναι αόρατο; Ποια η χρησιμότητα του; Μα φυσικά να έχετε τον έλεγχο του blog σας πιο άμεσα και να ολοκληρώνετε τις δουλειές σας γρηγορότερα. Με ένα κλικ θα μπορείτε να γράφετε ανάρτηση, να πειράζετε τον κώδικα και ότι άλλο θέλετε. Το admin control panel θα εμφανίζεται στο blog σας πάνω δεξιά μόνο όταν έχετε μπει στο λογαριασμό σας.
Πάμε πανόπτης, διάταξη και επεξεργασία HTML. Παίρνουμε ένα αντίγραφο ασφαλείας (back up) και με το Ctrl+F βρίσκουμε το παρακάτω κομμάτι κώδικα:

<b:section class='sidebar' id='sidebar' preferred='yes'>

Ακριβώς πάνω από αυτή τη γραμμή κώδικα κάνουμε αντιγραφή - επικόλληση (copy - paste) τον παρακάτω κώδικα:

<span class='item-control blog-admin'> <h2>Admin Control Panel</h2> <a href='http://www.blogger.com/post-create.g?blogID=BlogIdNumber'>New Post</a> | <a href='http://draft.blogger.com/blog-options-basic.g?blogID=BlogIdNumber'>Settings</a> | <a href='http://www.blogger.com/rearrange?blogID=BlogIdNumber'>Change Layout</a> | <a href='http://www.blogger.com/html?blogID=BlogIdNumber'>Edit HTML</a> | <a href='http://www.blogger.com/moderate-comment.g?blogID=BlogIdNumber'>Moderate Comments</a> | <a href='http://www.blogger.com/logout.g'>Sign Out</a> </span>

Στον κώδικα που μόλις κάναμε επικόλληση πρέπει να αντικαταστήσουμε όπου λέει BlogIdNumber με τον μοναδικό αριθμό του blog σας ο οποίος ονομάζεται BlogID και τον βρίσκουμε πολύ εύκολα αρκεί να είμαστε μέσα στον blogspot λογαριασμό μας (δηλαδή να έχουμε κάνει login) και να δούμε τη μπάρα διευθύνσεων. Έιναι ο αριθμός μετά το blogID=. Δείτε το παρακάτω screenshot:

Μόλις τελειώσετε με την τοποθέτηση του blogID πατήστε αποθήκευση (save). Το admin control panel δεν είναι ορατό στην προεπισκόπηση. Μπήτε μέσα στο blog σας χωρίς να αποσυνδεθείτε από το blogspot και θα δείτε πάνω δεξιά το admin control panel που θα μοιάζει σαν το παρακάτω screenshot:

Αν αποσυνδεθείτε από τον λογαριασμό σας και ξαναπάτε στο blog σας θα δείτε ότι το admin control panel δεν εμφανίζεται. Με λίγα λόγια πρόσβαση σ' αυτό έχει μόνο ο ιδιοκτήτης του blog όταν έχει κάνει login. Καλή επιτυχία.

ΠΡΟΣΘΗΚΗ ANIMATED TAG CLOUD

Μια αναγνώστρια του blog μου ζήτησε να κάνω ανάρτηση για το πως μπορούμε να βάλουμε ένα animated tag cloud όπως αυτό που έχω στο blog. Η αλήθεια είναι ότι δε μπαίνει σαν widget αλλά πρέπει να πειράξουμε τον κώδικα. Η διαδικασία είναι πολύ απλή.
Μπαίνουμε στο λογαριασμό μας, πάμε πανόπτης, διάταξη και επεξεργασία HTML. Παίρνουμε πρώτα ένα back up του κώδικα μας για λόγους ασφαλείας και συνεχίζουμε. Πατάμε Ctrl+F και κάτω ανοίγει ένα ψαχτήρι. Μέσα στο πλαίσιο βάζουμε το παρακάτω κομμάτι του κώδικα:

<b:section class='sidebar' id='sidebar' preferred='yes'>

Μόλις το βρούμε αμέσως κάτω απ' αυτή τη γραμμή κάνουμε αντιγραφή - επικόλληση (copy - paste) τον παρακάτω κώδικα:

<b:widget id='Label99' locked='false' title='Labels' type='Label'> <b:includable id='main'> <b:if cond='data:title'> <h2><data:title/></h2> </b:if> <div class='widget-content'> <script src='http://halotemplates.s3.amazonaws.com/wp-cumulus-example/swfobject.js' type='text/javascript'/> <div id='flashcontent'>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://locusblogus.blogspot.com'>hackaday</a></div> <script type='text/javascript'> var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff"); // uncomment next line to enable transparency //so.addParam("wmode", "transparent"); so.addVariable("tcolor", "0x333333"); so.addVariable("mode", "tags"); so.addVariable("distr", "true"); so.addVariable("tspeed", "100"); so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>"); so.addParam("allowScriptAccess", "always"); so.write("flashcontent"); </script> <b:include name='quickedit'/> </div> </b:includable> </b:widget>

Πατήστε προεπισκόπηση για να δείτε το tag cloud που προσθέσατε και μετά αποθήκευση (save).
Το tag cloud είναι προρυθμισμένο ως:
Πλάτος: 240px (pixels)
Ύψος: 300px
Χρώμα φόντου: άσπρο
Χρώμα γραμματοσειράς: γκρι
Μέγεθος γραμματοσειράς: 12

Επειδή όμως θέλουμε να φαίνεται το tag cloud σαν να αιωρείται και να είναι πιο καλαίσθητο καλό θα ήταν να το φέρουμε στα μέτρα μας και να έχει το ίδιο χρώμα με αυτό του template μας. Πάμε να δούμε πως θα κάνουμε παραμετροποίηση. Αν θέλουμε να αλλάξουμε πλάτος, ύψος και χρώμμα του φόντου πρέπει να βρούμε το παρακάτω κομμάτι κώδικα σε αυτό που προσθέσαμε προηγουμένως:

var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");

Όπου 240 το πλάτος, 300 το ύψος και #ffffff το χρώμα. Για να αλλάξουμε το ύψος και το πλάτος και να μεγαλώσουμε το tag cloud βάζουμε μεγαλύτερες τιμές. Για να το μικρύνουμε κάνουμε το αντίθετο.
Για να αλλάξουμε χρώμα στο φόντο του tag cloud πρέπει να αλλάξουμε την παράμετρο #ffffff. Πώς όμως; Πρέπει να ανοίξουμε άλλο ένα παράθυρο εργασίας στον browser και να μπούμε πάλι στο λογαριασμό μας και από εκεί πάμε πανόπτης, διάταξη και γραμματοσειρές και χρώματα. Εκεί μπορούμε να δούμε τον κωδικό των χρωμάτων φόντου και γαμματοσειρών. Δείτε την παρακάτω φωτογραφία (κλικ για μεγέθυνση): Στα δεξιά βλέπετε τον κωδικό χρώματος που στην προκειμένη περίπτωση είναι το άσπρο. Εσείς στον κώδικα πρέπει να βάλετε τον κωδικό του χρώματος του template σας.


Με τον ίδιο τρόπο μπορείτε να αλλάξετε και το χρώμα της γραμματοσειράς του tag cloud. Αρκεί να βρείτε το κομμάτι του κώδικα (στον κώδικα του tag cloud):
so.addVariable("tcolor", "0x333333");

Διαλέξτε τον κωδικό του χρώματος που θέλετε και αντικαταστήστε με αυτόν που προϋπήρχε (default - αυτό που έχω κοκκινίσει στον κώδικα είναι το γκρι χρώμα, δηλαδή το 333333).
Άλλη μια τροποποίηση που μπορούμε να κάνουμε είναι το μέγεθος της γραμματοσειράς του tag cloud. Αρκεί να βρούμε στον κώδικα του tag cloud το παρακάτω κομμάτι:

so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>");

Το 12 που είναι με κόκκινο χρώμα είναι το μέγεθος της γραμματοσειράς. Αν θέλουμε να τη μεγαλώσουμε βάζουμε έναν αριθμό μεγαλύτερο από το 12. Αν θέλουμε να τη μικρύνουμε κάνουμε το αντίθετο (δηλαδή βάζουμε μια τιμή μικρότερη του 12).
Πριν κάνετε αποθήκευση (save) σε οτιδήποτε αλλαγές του κώδικα καλό θα ήταν να κάνετε προεπισκόπηση για να δείτε αν τα αποτελέσματα των ενεργειών σας θα σας αφήσουν ευχαριστημένους. Αν όχι πειραματιστείτε μέχρι να φτάσετε στο επιθυμητό αποτέλεσμα. Αν ναι, πατήστε αποθήκευση και τέλος. Καλή επιτυχία.

ANIMATED LOGOS ΚΑΙ ΑΛΛΑ

Όλοι όσοι έχουμε blogs θέλουμε κάτι διαφορετικό για να ξεχωρίζει το ιστολόγιο μας. Θέλουμε παραπάνω στήλες, banners, logos, κουμπιά, clip arts. Όλα αυτά είναι εύκολα για αυτούς που ξέρουν να σχεδιάζουν τέτοια πράγματα. Εμείς που δεν ξέρουμε; Υπάρχει λύση (στο internet φυσικά) και είναι δωρεάν.
Απλά πρέπει να επισκεφτείτε το FlamingText . Εκεί πέρα θα βρείτε τα πάντα και σας δίνεται η δυνατότητα να σχεδιάσετε τα πάντα με εύκολο τρόπο έτσι ώστε οι δημιουργίες σας να είναι μοναδικές. Ναι, υπάρχουν και animated logos. Έχει πλούσια γκάμα και μπορείτε να διαλέγετε με τις ώρες. Ακόμα και γραμματοσειρές μπορείτε να βρείτε.
Να επικεντρωθούμε όμως στο πως κάνουμε ένα animated logo, μια και όταν μπαίνει κάποιος στη σελίδα μας το πρώτο πράγμα που βλέπει είναι το logo. Από το site που προανέφερα για να κάνετε logo πρέπει να πάτε στο headings. Κάνοντας κλικ στο link που σας παρέθεσα μεταφέρεστε σ' έναν οδηγό πέντε βημάτων (δυστυχώς το site δεν προσφέρεται στην ελληνική γλώσσα). Στα δεξιά θα δείτε τις επιλογές που έχετε. Διαλέξτε ότι σας αρέσει και μετά γράψτε το κείμενο, διαλέξτε το στυλ, το χρώμα, το μέγεθος του logo και τη γραμματοσειρά που θέλετε να έχει το logo σας. Αν θέλετε animated κάντε κλικ στο animated. Μετά πατήστε το create logo. Παίρνει περίπου δεκαπέντε δευτερόλεπτα για να δημιουργηθεί το logo σας. Μόλις δημιουργηθεί κάνετε δεξί κλικ και αποθήκευση ως (save as).
Τώρα θα χρειαστεί να πειράξουμε λίγο τον κώδικα γιατί αν βάλουμε με τη γνωστή διαδικασία το logo στο blog η εικόνα δε θα είναι animated αλλά στατική. Πρέπει να σηκώσουμε στο internet το logo που δημιουργήσαμε. Το ImageShack και το PhotoBucket παρέχoυν τέτοιου είδους δυνατότητα (δωρεάν φυσικά). Το μόνο που χρειάζεται είναι να κάνετε εγγραφή (registration). Μόλις σηκώσετε το logo σας βεβαιωθείτε για τη διεύθυνση που βρίσκεται.
Τώρα πρέπει να πάμε: Πανόπτης, διάταξη και επεξεργασία HTML. Πρώτα κάνουμε ένα back up τον κώδικα μας για να είμαστε ασφαλείς. Μετά κάνουμε κλικ στο κουτάκι που υπάρχει δίπλα στην επέκταση προτύπων γραφικών στοιχείων (expand widget templates) έτσι ώστε να εμφανιστεί ένα tick. Ψάχνουμε το κομμάτι του κώδικα που φαίνεται στο παρακάτω screenshot:
Ακριβώς από κάτω του βλέπουμε το κομμάτι του κώδικα που απεικονίζεται στο παρακάτω screenshot:
Στο κομμάτι του παραπάνω κώδικα εκεί που λέει maxwidgets='1' αλλάξτε την τιμή (1) σε οποιοδήποτε μεγαλύτερο αριθμό (από το 1) και εκεί που λέει showaddelement='no' αντικαταστείστε το no με το yes. Μόλις κάνετε τις παραπάνω διεργασίες πατήστε αποθήκευση (save).
Αν πάτε τώρα Πανόπτης, διάταξη και στοιχεία σελίδας θα δείτε ότι πάνω από την κεφαλίδα προστέθηκε στοιχείο σελίδας (προσθήκη gadget). Πηγαίνουμε στο site όπου ανεβάσαμε το logo μας και βλέπουμε ότι η σελίδα μας δίνει διάφορες επιλογές: IM, Forum, Alt Forum και HTML στο ImageShack και Share URL, Direct Link, HTML Code και IMG Code στο PhotoBucket. Σε όποιο site και αν ανεβάσαμε το logo μας εμείς επιλέγουμε τον κώδικα δηλαδή το HTML τον οποίο τον κάνουμε αντιγραφή - επικόλληση (copy - paste) στο gadget που δημιουργήσαμε προηγουμένως πάνω από την κεφαλίδα. Δηλαδή πάμε πανόπτης, διάταξη, και προσθήκη gadget. Ανοίγει ένα παράθυρο και επιλέγουμε προσθήκη HTML/JavaScript, κάνουμε επικόλληση των κώδικα και αποθήκευση. Πατάμε προεπισκόπηση και αν μας αρέσει το αποτέλεσμα το κρατάμε. Αν η κεφαλίδα έχει κείμενο η φωτογραφία και θέλουμε να τα εξαφανίσουμε τότε πάμε στην κεφαλίδα (header) πατάμε επεξεργασία (edit) και σβήνουμε ότι θέλουμε. Στο τέλος πατάμε αποθήκευση (save) και τέλος. Καλή διασκέδαση.

Με το πείραγμα του κώδικα του template δημιουργήσαμε στοιχεία σελίδας (προσθήκη gadgets) πάνω από την κεφαλίδα (header). Εννοείται ότι μπορείτε να προσθέσετε ότι είδος widget θέλετε.

ΤΡΙΣΤΗΛΑ TEMPLATES... ΑΒΑΔΙΣΤΑ ΚΑΙ ΑΒΑΣΑΝΙΣΤΑ

Σήμερα θα σας δείξω πως μπορείτε να μετατρέψετε το template του blog σας σε τρίστηλο (αρκεί να ανήκετε στην πλατφόρμα του blogspot). Καλό είναι να κάνεται ένα back up τον κώδικα σας για λόγους ασφαλείας πριν ξεκινήσετε οτιδήποτε.
Πάμε στον πανόπτη, από εκεί διάταξη και από εκεί επεξεργασία HTML. Το κουτάκι που λέει επέκταση γραφικών στοιχείων το αφήνουμε έτσι όπως είναι και δεν το πειράζουμε (ατσεκάριστο).
Βρίσκουμε το κομμάτι του κώδικα που λέει:

#sidebar-wrapper { width: 220px; float: right; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ }

Το αντιγράφουμε έτσι όπως είναι (copy - paste) ακριβώς από κάτω και έτσι το έχουμε δυο φορές. Στο πρώτο εκεί που λέει float βάζουμε right και σβήνουμε αυτό που έχει, συνήθως λέει $startSide (φαίνεται πάνω η αλλαγή). Τώρα αλλάζουμε σ' αυτό που μόλις αντιγράψαμε (στο δεύτερο) αυτά που φαίνονται παρακάτω με κόκκινο χρώμα:

#left-sidebar-wrapper (αυτό δημιουργεί τη νέα στήλη) float: left; (αυτό θα κάνει την καινούρια στήλη να εμφανίζεται στα αριστερά της κεντρικής όπου εμφανίζονται τα post).

Με τις παραπάνω κινήσεις μόλις προσθέσαμε άλλη μια sidebar.
Στη συνέχεια κοιτάζουμε να βρούμε το μέρος του κώδικα που λέει:

<div id='main-wrapper'>

Ακριβώς πριν από αυτόν αντιγράφουμε και κάνουμε επικόλληση (copy - paste) τον παρακάτω κώδικα:

<div id='left-sidebar-wrapper'> <b:section class='sidebar' id='left-sidebar' preferred='yes'/> </div>

Αυτό γίνεται (<div id='main-wrapper'>) για να μπορέσει ο browser να καταλάβει ότι υπάρχει και άλλη μπάρα. Το άλλο κομμάτι του κώδικα (<b:section class='sidebar' id='left-sidebar' preferred='yes'/> </div>) είναι για να καταλάβει ο browser τι είδους στοιχεία (widgets) υπάρχουν στην καινούρια μας στήλη. Το ID πρέπει να είναι left-sidebar για να μην έχουμε διενέξεις και προβλήματα και για να καθορίσουμε ότι η καινούρια μας στήλη θα βρίσκεται στην αριστερή πλευρά τoυ template μας. Τα παραπάνω, όμως είναι για εγκυκλοπαιδικούς λόγους. Ας συνεχίσουμε με πράξη.
Λογικά θα πρέπει να μεγαλώσουμε το template μας για να χωρέσουν όλα. Βρίσκουμε το κομμάτι του κώδικα που λέει:

/* Outer-Wrapper ----------------------------------------------- */ #outer-wrapper { width: 660px; margin:0 auto; padding:10px; text-align:left; font: $bodyfont; }

Και αντικαθιστούμε την τιμή 660 με 880. Για να είναι όμως πιο καλαίσθητο πρέπει να μεγαλώσουμε και και το μέρος που φιλοξενεί το logo μας. Πάμε και βρίσκουμε το κομμάτι του κώδικα που λέει:

#header-wrapper { width:880px; margin:0 auto 10px; border:1px solid $bordercolor; }

Και εδώ την τιμή την αλλάζουμε από 660 σε 880 (στο ακριβώς παραπάνω παράδειγμα η τιμή έχει ήδη αλλαχτεί).
Πατάμε αποθήκευση αν και δεν τελειώσαμε για να ελέγξουμε ότι όλα πάνε καλά. Εφόσον κάνουμε αποθήκευση (save) πάμε πανόπης, διάταξη και στοιχεία σελίδας και η εικόνα που πρέπει να αντικρίσετε είναι όπως η παρακάτω:


Όπως προανέφερα δεν τελειώσαμε. Η στήλη υπάρχει αλλά θα είναι ορατή στο blog μόνο όταν βάλετε κάποιο widget. Πρέπει να κάνουμε τα στοιχεία που θα βάζουμε στην καινούρια μπάρα μας να μην ξεπερνάνε τα όρια και μπαίνουν μέσα στα post μας (κάτι το οποίο είναι ενοχλητικό). Πάμε πάλι στη διάταξη, από εκεί επεξεργασία HTML και ψάχνουμε να βρούμε το κομμάτι του κώδικα:

#main-wrapper { width: 410px; float: left; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ }

Και προσθέτουμε margin-left: 20px; εκεί που λέει float:left; Ο κώδικας πρέπει να δείχνει ακριβώς όπως παρακάτω:

#main-wrapper { width: 410px; float: left; margin-left: 20px; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ }

Πατήστε αποθήκευση (save) και τελειώσατε. Για να βάλετε στήλη στα δεξιά ακολουθήστε την ίδια διαδικασία μόνο εκεί που λέει left; βάλτε right;

UPDATE: Η παραπάνω διαδικασία αφορά τo Minima
template (σαν το δικό μου δηλαδή) και τις παραλαγές
του. Για άλλα templates πρέπει να διαθέσετε λίγο χρόνο
για να πειραματιστείτε με τις τιμές των: Outer-Wrapper,
Header-Wrapper και margin. Αυτό γιατί άλλα templates
είναι πιο σύνθετα (περιέχουν σχέδια, footers, χρώματα κλπ.)

Πηγή: ΘΕΜΑ