ΠΡΟΣΘΗΚΗ 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) σε οτιδήποτε αλλαγές του κώδικα καλό θα ήταν να κάνετε προεπισκόπηση για να δείτε αν τα αποτελέσματα των ενεργειών σας θα σας αφήσουν ευχαριστημένους. Αν όχι πειραματιστείτε μέχρι να φτάσετε στο επιθυμητό αποτέλεσμα. Αν ναι, πατήστε αποθήκευση και τέλος. Καλή επιτυχία.