Безплатен блог на платформата Blogger (blogspot). Създаване, водене, персонализиране, дизайн, притурки в примери. Препоръки и съвети за начинаещи и напреднали блогъри.

Търсене

Breaking

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

Увеличаване или намаляване размера на шрифта
Здравейте, приятели. Браузерите позволяват да се промени мащаба на страницата, която четем, натискайки на клавишите 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%.

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

    Здраве за всички вас! Не забравяйте да правите добро на други хора!

    Ще съм благодарна да оцените моя труд и кликнете върху звездичките по-долу. Или гласувайте за блога на:

    BGtop

    4 коментара:

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

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

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

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

        Изтриване