Παρασκευή 23 Ιανουαρίου 2009

Print this post

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

19 σχόλια:

  1. Δοκίμασα να κάνω το animated tag cloud με αυτό τον τρόπο αλλά δυστυχώς αντι το animated tag cloud μου γράφει στην πάνω δεξιά γωνιά Blogumulus by Roy Tanck and Amanda Fazani. Έχω βάλει πριν απλό tag cloud με κώδικα HTML και είναι εντάξει. Γιατί τώρα δεν εμφανίζεται το animated tag cloud;

    ΑπάντησηΔιαγραφή
  2. @Ver@ Το έβαλες σαν προσθήκη gadget ή με επεξεργασία HTML?

    ΑπάντησηΔιαγραφή
  3. Με επεξεργασία HTML ακριβώς όπως γράφει στην ανάρτηση για to animated tag cloud.

    ΑπάντησηΔιαγραφή
  4. @Ver@ Κάτι κάνεις λάθος. Έκανα ένα δοκιμαστικό blog με το tag cloud και δουλεύει κανονικά. Δες εδώ:
    http://hackaday-gragle.blogspot.com
    Επειδή δεν μπορώ να γράψω κώδικα εδώ (δεν αφήνει η "μαμά" Google για αποφυγή ιών) θα προσπαθήσω να στο πω με πλάγιο τρόπο. Μακάρι να καταλάβεις.
    Στο post εκεί που λέω στην αρχή βρείτε τον κώδικας τάδε για να επικολληθεί ο μεγάλος κώδικας από κάτω του, επειδή δεν ξέρω τι template έχεις μπες στην επεξεργασία HTML και αν δε δουλεύει ψάξε ποιο κάτω. Πολύ πιθανό να υπάρχει το ίδιο κομματάκι κώδικα και κάνε την επιλόλληση εκεί. ΠΡΟΣΟΧΗ: Μην κάνεις κλικ στο κουτάκι που είναι δίπλα στην επέκταση γραφικών στοιχείων.

    ΑπάντησηΔιαγραφή
  5. λοιπόν, το δοκίμασα κι εγώ και δε δουλεύει... αλλά, σε μένα γίνεται το εξής: μέσα στον κώδικα που κάνω copy-paste, δε γράφονται μόνο οι ετικέτες αλλά και όλα τα άλλα που έχω στη δεξιά μεριά του μπλογκ.... αυτά και καλημέρα :)

    ΑπάντησηΔιαγραφή
  6. @miliokas Εφόσον δουλεύει σ' εμένα και στη B;era πάει να πει ότι κάτι δεν κάνεις καλά. Ότι κώδικα προσθέτουμε στο blog μέσω widget εμφανίζεται και στον κώδικα.

    ΑπάντησηΔιαγραφή
  7. Προσπάθησα να περάσω στο μπλοκ μου τα tag και ενω ολα τα εκανα σωστα μου εβγαζε αυτά...Blogumulus by Roy Tanck and Amanda Fazani.Τι μπορεί να κάνω λάθος?

    ΑπάντησηΔιαγραφή
  8. @Αza Προσπάθησε να το ξανακάνεις. Αν διαβάσεις τα προηγούμενα σχόλια θα δεις ότι το έκανα και σε ένα δοκιμαστικό blog... Άρα δουλεύει... Απλά θέλει προσοχή γιατί όταν πειράζουμε τον κώδικα κάτι να μας ξεφύγει, έστω και ένα σύμβολο, μπορεί να μην έχουμε τα αποτελέσματα που θέλουμε...

    ΑπάντησηΔιαγραφή
  9. Ευχαριστώ για το χρόνο σου.Δεν είμαι άσχετη από κώδικα,αλλά ότι κι αν δοκίμασα δεν λειτουργεί...καλό βράδυ.

    ΑπάντησηΔιαγραφή
  10. καλημερα,υπαρχει τροπος οι ετικετες να ειναι στα Ελληνικα?

    ΑπάντησηΔιαγραφή
  11. @Νίκος Τσότσος Δυστυχώς φίλε μου αναγνωρίζει μόνο λατινικούς χαρακτήρες.

    ΑπάντησηΔιαγραφή
  12. ΚΑΛΗΣΠΕΡΑ ΦΙΛΕ ΜΟΥ ΚΑΙ ΣΕ ΕΜΕΝΑ ΤΟ ΙΔΙΟ ΚΑΝΕΙ ΤΟ ΕΚΑΝΑ ΠΑΝΩ ΑΠΟ ΤΡΕΙΣ ΦΟΡΕΣ ΚΑΙ ΕΜΕΝΑ ΤΟ ΙΔΙΟ ΜΥΝΗΜΑ ΜΕ ΤΟΥΣ ΠΑΡΑΠΑΝΩ ΒΓΑΖΕΙ
    ΑΝΔΡΕΑΣ

    ΑπάντησηΔιαγραφή
  13. @andreas Το συγκεκριμένο tag cloud το έχουν κάνει προσθήκη πολλοί bloggers και ο τρόπος για την προσθήκη αυτού είναι ένας. Επιμένω ότι όταν δε βγαίνει σε κάποιον ο τελευταίος μάλλον κάτι δε θα πρόσεξε ή θα του έχει ξεφύγει κάτι.

    ΑπάντησηΔιαγραφή
  14. Έχω βρει τον κώδικα αλλά δουλεύει με αγγλικούς χαρακτήρες,αν κάποιος τον θέλει.

    ΑπάντησηΔιαγραφή
  15. @24ώρες Να 'σαι καλά. Πάντα δούλευε μόνο με αγγλικούς χαρακτήρες.

    ΑπάντησηΔιαγραφή
  16. Δουλεύει και με Ελληνικούς χαρακτήρες,αλλά τα links δεν δουλεύουν στο firefox,ενώ δεν υπάρχει πρόβλημα με τον Internet Explorer.Το πρόβλημα το έχω εντοπίσει.

    ΑπάντησηΔιαγραφή
  17. @24ώρες Τι να σου πω.. δεν ξέρω... δεν έχω δει ποτέ το animated tag cloud με ελληνικούς χαρακτήρες... Αν όντως δουλεύει στείλε τον κώδικα να τον μοιράσουμε σε όλους...

    ΑπάντησηΔιαγραφή
  18. εχω βρει αυτον τον κωδικα εδω
    http://chrysel.blogspot.com/2011/06/flash-tag-cloud-blog.html
    που σε εμενα δουλευει. δεν ξερω αν υποστιριζει ομως ελληνικους χαρακτηρες... αν καποιος το δοκιμασει ας μας πει

    ΑπάντησηΔιαγραφή
  19. @Ανώνυμος Όντως δουλεύει αλλά όχι με ελληνικούς χαρακτήρες.

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

back to top