Text / Font Size Resizer to Blogger with jQuery.

Εδώ θα σας δείξουμε τον τρόπο πως να περάσετε στο ιστολόγιο σας τη δυνατότητα αλλαγής μεγέθους της γραμματοσειράς με τη χρήση jQuery.



θα μπείτε στο Πανόπτη σας & μετά >>> Διάταξη >>> Επεξεργασία HTML και θα κάνετε αναζήτηση με το Ctrl + F για το.....

]]></b:skin>

Μόλις το βρείτε πριν από το κλείσιμο του ]]></b:skin>
Προσθέστε τον παρακάτω κώδικα.

<!--jQuery-Text-Font-Size-Resizer-STARTS-Widget-by-http://loneeagle110.blogspot.com/-->
#resizeFont{
text-align:right;
margin-right:10px;
}
<!--jQuery-Text-Font-Size-Resizer-STOPS-Widget-by-http://loneeagle110.blogspot.com/-->

πάμε στο 2ο βήμα.....

Τώρα θα κάνετε αναζήτηση με το Ctrl + F για το.....

</head>

Μόλις το βρείτε πριν από το κλείσιμο του </head>
Προσθέστε τον παρακάτω κώδικα.

<!--jQuery-Text-Font-Size-Resizer-STARTS-Widget-by-http://loneeagle110.blogspot.com/-->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(function(){
$(&#39;input&#39;).click(function(){
var ourText = $(&#39;#content-wrapper&#39;);
var currFontSize = ourText.css(&#39;fontSize&#39;);
var finalNum = parseFloat(currFontSize, 10);
var stringEnding = currFontSize.slice(-2);
if(this.id == &#39;large&#39;) {
finalNum *= 1.1;
}
else if (this.id == &#39;small&#39;){
finalNum /=1.1;
}
else if (this.id == &#39;reset&#39;){
finalNum =13;
}
ourText.animate({fontSize: finalNum + stringEnding},500);
});
});
</script>
<!--jQuery-Text-Font-Size-Resizer-STOPS-Widget-by-http://loneeagle110.blogspot.com/-->

Κάνετε αποθήκευση προτύπου & πάμε στο 3ο βήμα.....

Πανόπτης ---> Διάταξη ---> Στοιχεία Σελίδας ---> Προσθήκη gadget ---> HTML/JavaScript

Και μέσα στο gadget βάζουμε τον παρακάτω κώδικα.

<!--jQuery-Text-Font-Size-Resizer-STARTS-Widget-by-http://loneeagle110.blogspot.com/-->
<div id='resizeFont'>
<input id='large' type='button' value='A+'/>
<input id='reset' type='button' value='A'/>
<input id='small' type='button' value='A-'/>
</div>
<!--jQuery-Text-Font-Size-Resizer-STOPS-Widget-by-http://loneeagle110.blogspot.com/-->

Και θα πατήσετε Αποθήκευση.

Μετά θα πρέπει μέσα από την διάταξη της σελίδας σας να το βάλετε στη θέση που σας αρέσει.

Το αποτέλεσμα θα ναι έτσι....



Σχετική Ανάρτηση με χρήση Java/Script δείτε εδώ

ΚΑΛΗ ΕΠΙΤΥΧΙΑ!!!!!