4

Увеличаване или намаляване размера на шрифта на текст

Увеличаване или намаляване размера на шрифта
Здравейте, приятели. Браузерите позволяват да се промени мащаба на страницата, която четем, натискайки на клавишите CTRL и +; за увеличаване или CTRL и -; за намаляване размера на шрифта. За връщане към изходното състояние използваме комбинацията CTRL и 0 (нула).



    Увеличаване или намаляване размера на шрифта

    За страниците на блога ни има скрипт, чрез който също можем да постигнем увеличаване и намаляване размера на шрифта на текста в самата публикация. Предоставяме правото на избор на читателя какъв по размер шрифт му е удобен за четене. Чрез скриптът ще се показват на страниците символите А-, А + във вид на бутони.
    Тук се съсредоточавам върху Blogger, но този скрипт, който увеличава размера на шрифта на текста на страницата, може успешно да се приложи и в други ресурси.
    За потребителите на blogspot стъпките са две:

    Първа стъпка

    Отидете в: Тема ➔ Редактиране на HTML код ➔ намираме таг </ body> и преди него добавяме следния скрипт:

    <script>
    //<![CDATA[
    var tgs=new Array('div','p','td','pre'); // тагове, в които текст ще увеличава/намалява размера си
    var szs=new Array('xx-small','x-small','small','medium','large','x-large','xx-large'); // размерът може да се запише и в проценти new Array('70%','80%','90%','100%','110%','120%','130%')
    var startSz=3;
    function ts(trgt,inc) {
    cEl=null,sz=startSz;
    sz += inc;
    if (sz < 0) sz=0;
    if (sz > 6) sz=6;
    startSz=sz;
    cEl=document.querySelectorAll(trgt);
    for (var c=0; c < cEl.length; c++) {
    cEl[c].style.fontSize=szs[sz];
    for (i=0 ; i < tgs.length; i++) {
    cTags=cEl[c].getElementsByTagName(tgs[i]);
    for (j=0; j < cTags.length ; j++) cTags[j].style.fontSize=szs[sz];
    }
    }
    }
    //]]>

    </script>


    Втора стъпка

    На мястото, на което искаме да се покажат бутоните за променя размера на шрифта вписваме техния код:


    <button onclick="ts('.entry-content',-1);">А-</button>
    <button onclick="ts('.entry-content',1);">А+</button>


    В Blogger най-лесният вариант е да се добави HTML/Java Script притурка, в която да се впише кода на бутоните. За пример ви давам друг мой блог, където кода на бутоните съм вписала във вече съществуваща HTML/Java Script притурка. Тя е с наименованието „Изберете цвят на фона и размер на шрифта за четене в блога“.
    Ако разгледате по-внимателно скрипта от първата стъпка, ще установите, че увеличението на размера на шрифта може де стане на седем степени - от 70% до 130%.

    За въпроси знаете къде да пишете. Пробвайте, питайте, споделяйте.

    Успех на всички ни.

    4 коментара :

    1. Страхотен урок, дълго търсен от мен.

      ОтговорИзтриване
      Отговори
      1. Здравейте и добре дошъл! Ако ми напишете какво още търсите, бих могла да се отзова....Иначе се радвам на "Ежедневието днес".

        Изтриване
      2. Това може само да ме радва. Като цяло блога е оформен на 90% от вашите уроци. Ако имам нужда от помощ ще се обърна към вас, за което благодаря.

        Изтриване
      3. Общуването с вас ми доставя удовлетворение!

        Изтриване


    Copyright © БЛОГ ЗА БЛОГОВЕ©2016-| Original style & code - magentawave.com | All Rights Reserved |
    Използването на Blogzablogove.com означава, че сте съгласни с нашата Политика на конфиденциалност и защита