Μεγενθυνση και σμίκρυνση γραμματοσειρας (Gadget)

Γεια σας καθως εψαχνα σημερα το βραδυ για να βρω ενα καλο Gadget, βρηκα ενα απο τα καλυτερα και σημαντικοτερα για ενα Blogger , gadgetακι για την μεγενθυνση και σμίκρυνση της γραμματοσειρας που χρησημοποιουμε στο Blogger μας. 

1) Όπως πάντα συνδεόμαστε στο Blogger μας.

2) Πάμε Σχεδίαση-Επεξεργασία HTML

Προσοχή:

 -Πριν ξεκινήσουμε:

- Πρέπει να είστε προσεκτικοί κατά την αλλαγή του προτύπου σας.

- Πριν κάνετε οποιαδήποτε αλλαγή, αποθηκεύστε το προτυπο σας σε ασφαλή μέρος (Στον υπολογιστη σας).

3) Ψάχνουμε το παρακάτω κωδικά. (Ctrl+F)

</head>

4) Και επικολλούμε τον παρακατω κωδικά , ακριβώς πριν από το </head>.

<script src='http://sites.google.com/site/ciudadbloggerfiles/Home/mootools.js' type='text/javascript'/>
  <script type='text/javascript'>
  window.addEvent(&#39;domready&#39;, function(){

var el = $(&#39;myElement&#39;),
  font = $(&#39;fontSize&#39;);

new Slider(el, el.getElement(&#39;.knob&#39;), {
  steps: 35, // Tamaño máximo de la letra
  range: [8], // El 8 es el tamaño mínimo
  onChange: function(value){
  font.setStyle(&#39;font-size&#39;, value);
  }
  }).set(font.getStyle(&#39;font-size&#39;).toInt());

});
  </script>

<style type='text/css'>
  div.slider {
  width: 97%;
  height: 26px;
  background: url(http://img64.imageshack.us/img64/1329/sliderbg.gif) no-repeat right top;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  border:1px solid #708B95;
  margin-top:40px;
  }
  div.slider div.knob {
  background: url(http://4.bp.blogspot.com/-0iBbRw58HkM/TaD

qwZuIN5I/AAAAAAAAAw8/g9445jD5q5w/s400/allblogtools-pin.png) 

  no-repeat;width: 32px;

  height: 47px;
  margin:-35px 0 0 0;
  cursor: move;
  }
  div#fontSize {
  height: 40px;
  }
  </style>

-Αμα θελετε παρα για την μπλε πινεζα τη πορτοκαλι αλλαξτε το κοκκινο κωδικα με τον παρακατω:

Αυτη ειναι η αρχικη του αγγλικου.

Και αυτη ειναι η δικη μου. 

 http://img29.imageshack.us/img29/30/blogytrickspin.png

5) Πατάμε Αποθήκευση Προτύπου

6) Και τωρα θα χρειαστει λιγο προσοχη γιατι χρεαστηκε να κανω καποιες αλλαγες απο το αρχικο (το αγγλικο δηλαδη)

Το αγγλικο μας λεει να ψαξουμε κατι σαν αυτο:

<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>

Αλλα επειδη δεν υπαρχει στα ελληνικα αυτο εμεις ψαχνουμε γι αυτο:

<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Αναρτήσεις ιστολογίου' type='Blog'/>
</b:section>

7) Και επικολλούμε τον παρακατω κωδικά που σε κοκκινο χρωμα πανω και κατω απο τον προηγουμενο κωδικα, δηλαδη καπως ετσι θα φαινεται :

<span id='fontSize'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Αναρτήσεις ιστολογίου' type='Blog'/>
</b:section>
</span>

 8) Και φυσικα δεν ειναι μονο αυτη η αλλαγη αλλα ειναι και η παρακατω δηλαδη.

9) Καθως παμε να προσθεσουμε το Gadget (δηλαδη παμε Στοιχεια σελιδας-Προσθηκη Gadget-     HTML/JavaScript) και επικολουμε τον παρακατω κωδικα.

 Στα αγγλικα ειναι ετσι:

<div id="myElement" class="slider"><div class="knob">/div></div>
<p style="font-size:10px; float:right; margin:3px;">Widget
 By <a href="http://www.allblogtools.com/" title="Blogger Templates"
 target="_blank">AllBlogTools.com</a> | <a href="http://www.allblogtools.com/tricks-and-hacks/blogger-font
-size-control-changing-j-query-widget/" title="Blogger Font Control Widget
." target="_blank">Get Yours ?</a></p>

Αλλα επειδη εχει πολλη διαφημιση απο το site τους και εχει και καποια προβληματα εμεις θα το βαλουμε καπως ετσι:

 
<div id="myElement" class="slider"><div class="knob"></div><p style="font-size:10px; float:right; margin:3px;"></p></div>

10) Αυτο ηταν ενα πολλη ωραιο Gadgetακι για την γραμματοσειρα μπηκε στο Blogger σας.

Demo



- Αμα σας αρεσε παρακαλω προωθηστε το Blog μας ή καντε παρακολουθηση.
Ευχαριστω.


Copyrights: BlogyTricks© 

Πηγη κωδικα: Αllblogtools