ΑΥΞΟΜΕΙΩΣΗ ΜΕΓΕΘΟΥΣ ΑΝΑΡΤΗΣΕΩΝ

Καλημέρα και καλή εβδομάδα. Σήμερα έχω να μοιραστώ μαζί σας ένα καταπληκτικό widget. Τι κάνει αυτό το widget; Όπως βλέπετε στα δεξιά έχουμε μια εικόνα η οποία απεικονίζει Α- και A+. Πατώντας συνεχώς το Α+ αυξάνεται το μέγεθος της γραμματοσειράς που απαρτίζει την ανάρτηση. Πατώντας το Α- συνεχώς τα γράμματα μικραίνουν συνεπώς και η ανάρτηση. Είναι ένα χρήσιμο εργαλείο για πολλούς αναγνώστες που έχουν κάποιο πρόβλημα με την όραση τους. Το βρήκα στο bloghacktips.blogspot.com και η προσθήκη του είναι πανεύκολη.
Μπείτε στο λογαριασμό του blogspot σας και από εκεί πάτε πανόπτης, διάταξη, προσθήκη gadget και HTML/JavaScript (Layout>Add a Gadget>HTML/JavaScript). Κάντε αντιγραφή - επικόλληση (copy - paste) τον παρακάτω κώδικα και πατήστε αποθήκευση (save).

<script language="JavaScript" src="http://bloghacktips.googlepages.com/font.js"></script><div class="central" style="width: 80; height: 19"><span style="font-family:Arial;"><b><br /><br /><a href="javascript:decreaseFontSize();">A-</a><span style="font-size: 200%"> <a href="javascript:increaseFontSize();">A+</a></span></b></span></div><a href="http://bloghacktips.blogspot.com/2009/04/font-size-is-always-problem-for-blogger.html"><span style="font-size: 70%"></span></a>

UPDATE: Επειδή κάποιοι συνάντησαν δυσκολίες με το συγκεκριμένο trick θα αναφέρω άλλους δυο τρόπους για το πως θα επιτευχθεί η αυξομείωση των fonts στο blog.
Αν θέλετε να έχετε κουμπί αυξομείωσης όπως το παρακάτω screenshot:

βάλτε τον παρακάτω κώδικα όπως κάθε άλλο gadget:

Change Text Size<br/> <a href="javascript:void(0);" onclick="javascript:body.style.fontSize='.5em'"><span >+</span></a> <a href="javascript:void(0);" onclick="javascript:body.style.fontSize='1em'"><span >+</span></a> <a href="javascript:void(0);" onclick="javascript:body.style.fontSize='1.5em'"><span >+</span></a> <a href="javascript:void(0);" onclick="javascript:body.style.fontSize='2em'"><span >+</span></a> <a href="javascript:void(0);" onclick="javascript:body.style.fontSize='2.5em'"><span >+</span></a>

Αν θέλετε τα κουμπιά αυξομείωσης να δείχνουν όπως το παρακάτω screenshot:

βάλτε τον παρακάτω κώδικα όπως κάθε άλλο gadget:

Change Text Size<br/>
<a href="javascript:void(0);" onclick="javascript:body.style.fontSize='.5em'"><span >Small</span></a>
<a href="javascript:void(0);" onclick="javascript:body.style.fontSize='1em'"><span >Medium</span></a>
<a href="javascript:void(0);" onclick="javascript:body.style.fontSize='1.5em'"><span >Large</span></a>
<a href="javascript:void(0);" onclick="javascript:body.style.fontSize='2em'"><span >Larger</span></a>
<a href="javascript:void(0);" onclick="javascript:body.style.fontSize='2.5em'"><span >Largest</span></a>

ΚΑΝΤΕ ΕΜΦΑΝΕΣ ΕΝΑ ΜΕΡΟΣ ΤΟΥ POST

Η αναγνώστρια του Locus Blogus LoLa ζήτησε να μάθει πως μπορεί, όταν ανεβάζει ένα post, να φαίνεται ένα μέρος της ανάρτησης και ο αναγνώστης για να το δει όλο πρέπει να κάνει κλικ. Τo wordpress δίνει αυτή τη δυνατότητα αλλά το blogspot; Η απάντηση είναι ότι γίνεται αν πειράξουμε λίγο τον κώδικα. Δεν είναι ιδιαίτερα δύσκολο.
Μπαίνουμε στο λογαριασμό μας και από εκεί πάμε πανόπτης, διάταξη και επεξεργασία HTML. πριν προχωρήσουμε παίρνουμε ένα αντίγραφο ασφαλείας (back up) του template. Μετά κάνουμε κλικ στο κουτάκι που βρίσκεται δίπλα στην επέκταση γραφικών στοιχείων προτύπου. Πατάμε Ctrl+F και βρίσκουμε το </head> Ακριβώς πριν απ' αυτό κάνουμε αντιγραφή - επικόλληση (copy - paste) τον παρακάτω κώδικα.

<script language='javascript' src='http://halotemplates.s3.amazonaws.com/jquery-truncator/jquery-1.2.3.pack.js' type='text/javascript'/> <script language='javascript' src='http://halotemplates.s3.amazonaws.com/jquery-truncator/jquery.expander.js' type='text/javascript'/> <script type='text/javascript'> $(document).ready(function() { $('.excerpt').expander({ slicePoint: 280, // default is 100 expandText: '[...]', // default is 'read more...' }); }); </script>


Μετά πάμε να βρούμε το παρακάτω κομμάτι του κώδικα:

<div class='post-body entry-content'> <data:post.body/> <div style='clear: both;'/> <!-- clear for photos floats --> </div>

Αν δυσκολεύεστε με το Ctrl+F βρείτε το <data:post.body/> Η παράγραφος θα βρεθεί κατευθείαν. Μετά έχοντας πατημένο το αριστερό κουμπί από το ποντίκι μας σέρνουμε τον κέρσορα για να τονίσουμε (highlight) την παράγραφο. Δείτε το παρακάτω screenshot.


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

<b:if cond='data:blog.pageType != "item"'>
<div class='excerpt post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
<b:else/>
<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
</b:if>

Τώρα πατήστε προεπισκόπηση και αν είστε ευχαριστημένοι πατήστε αποθήκευση (save). Δείτε τα δύο παρακάτω screenshots για να πάρετε μια ιδέα πως θα είναι. Το πρώτο δείχνει ένα μέρος του κειμένου και δεύτερο ολόκληρο αν κάνουμε κλικ στο [...] Κάντε κλικ πάνω στις φωτογραφίες για να τις δείτε σε μεγέθυνση.

ΠΩΣ ΕΜΦΑΝΙΖΟΥΜΕ ΚΩΔΙΚΑ ΣΤΙΣ ΑΝΑΡΤΗΣΕΙΣ

Πολλές φορές θέλουμε να κάνουμε μια ανάρτηση η οποία θα περιέχει κάποιον κώδικα και θέλουμε να είναι ορατός στους αναγνώστες. Βάζοντας τον κώδικα ως έχει θα παρατηρήσουμε ότι με τη δημοσίευση του post μας ο κώδικας δεν υπάρχει και εμφανίζεται το προϊόν του κώδικα (αν μπορούμε να το πούμε έτσι για να γίνει κατανοητό), είτε αυτό είναι φωτογραφία, είτε banner είτε link.
Η αλήθεια είναι ότι όλη τη ζημιά την κάνουν τα σύμβολα < και >. Για να εμφανιστεί ο κώδικας έτσι ώστε οι αναγνώστες να μπορούνε να τον κάνουνε αντιγραφή - επικόληση (copy - paste) πρέπει να αντικαταστήσουμε τα παραπάνω σύμβολα. Πως θα γίνει αυτό και με τι θα αντικατασταθούνε; Η διαδικασία είναι πολύ απλή και ο χρόνος που χρειάζεται είναι δυο λεπτά το πολύ.
Πάμε στην επιφάνεια εργασίας, κάνουμε δεξί κλικ, πάμε στη δημιουργία και από εκεί έγγραφο κειμένου (notepad). Κάνουμε αντιγραφή - επικόληση (copy - paste) τον κώδικα που θέλουμε να δημοσιεύσουμε και μετά πάμε πάνω στη μπάρα στην επεξεργασία και επιλέγουμε αντικατάσταση. Θα ανοίξει ένα παράθυρο που θα ονομάζεται Αντικατάσταση και θα έχει δύο πεδία. το πρώτο λέει Εύρεση του και το δεύτερο Αντικατάσταση με. Στο πρώτο πεδίο βάζουμε το σύμβολο < και στο δεύτερο
(με αυτό αντικαθιστάται). Πατάμε αντικατάσταση όλων και βλέπουμε ότι στον κώδικα όπου είχε το σύμβολο < υπάρχει ο συνδυασμός
Δεν τελειώσαμε ακόμα. Κάνουμε την ίδια εργασία και για το σύμβολο > μόνο που το αντικαθιστούμε με
Πατάμε αντικατάσταση όλων και βλέπουμε ότι στον κώδικα όπου υπήρχε το σύμβολο > αντικαταστάθηκε από
Το κάνουμε αποθήκευση (save) και τελειώσαμε. Τώρα έτσι όπως μετατρέψαμε τον κώδικα αν τον αναρτήσουμε με αντιγραφή - επικόληση (copy - paste) θα εμφανιστεί κανονικά στο blog. Μια ματιά στην προεπισκόπηση θα σας πείσει. Καλή επιτυχία και προσέξτε τι αντικαθιστάτε με τι. Τα δύο screenshots παρακάτω θα σας βοηθήσουν να θυμάστε: