RSS

Category Archives: ΑΝΑΡΤΗΣΗ

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

Καλημέρα και καλή εβδομάδα. Σήμερα έχω να μοιραστώ μαζί σας ένα καταπληκτικό 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&#8217; type=’text/javascript’/> <script language=’javascript’ src=’http://halotemplates.s3.amazonaws.com/jquery-truncator/jquery.expander.js&#8217; 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 για να πάρετε μια ιδέα πως θα είναι. Το πρώτο δείχνει ένα μέρος του κειμένου και δεύτερο ολόκληρο αν κάνουμε κλικ στο […] Κάντε κλικ πάνω στις φωτογραφίες για να τις δείτε σε μεγέθυνση.


 
25 Σχόλια

Posted by στο Ιανουαρίου 26, 2009 in BLOG, BLOGGER, BLOGSPOT, HACKS, ΑΝΑΡΤΗΣΗ, POST