Притурки. Бял цвят на текста на черен фон в Blogspot

Притурки в Blogspot
Здравейте, приятели. Отдавна исках да напиша публикация за код, чрез който светлите теми на блоговете да стават тъмни. Да се променя цвета на текста в бял и фона на страницата в черен, разбира се само по желание на потребителя.


    Въпреки факта, че в Интернет има много приспособления и разширения за браузъри, не всички потребители са готови да ги заредят в блоговете си, но имам много приятели, които възприемат по-добре блогове със светъл текст на черен фон.
    Някога споделих с вас притурки и приспособления, които позволяват да се променя цвета на фона по желание на посетителя. За да направи това, посетителят трябва да натисне съответния бутон и да избере желания цвят. По този начин беше възможно да се избере цвета на фона на страницата, съчетано с промени в размера на текста.

    За притурката

    Сега ви предлагам притурка от два блока с по един радио бутон. Първият ще променят цвета на фона ( с id = "bgColor"), а вторият ще променя цвета на текста ( с id = "textColor"). За да получим стойността на значението "value" на избрания елемент се използва jQuery. Можете да добавите абсолютно всякакъв брой бутони сами, най-важното е да напишете стойността на цвета за тяхното значение "value". Функцията, която ви предлагам се включва, когато натиснете двата бутона и ще позволява да се създаде само една цветова комбинация - черен фон на блога с бял цвят на текста в него.
    Това можете да разгледате в тестовия ми блог.
    И изглежда така:

     притурката


    Недостатък

    Такава промяна в цвета на фона и текста ще остане в сила докато браузърът презареди страницата или докато потребителят не затвори раздела, който ползва. Това е основният недостатък на това приспособление. Когато потребителят отвори отново блога или премине на друга страница, ще трябва да изпълни отново всички стъпки за индивидуалното персонализиране на цвета на фона и текста.

    Инсталиране

    За да се осъществява тази функция трябва да отидете в раздела Тема  ➔ Добавяне на притурка ➔ HTML и JavaScript. В тялото ѝ се вписва следния код:

    Код

    <div id="bgColor">
    <label><input type="radio" name="radio" value="black" />Black</label>
    </div>
    <hr />
    <div id="textColor">
    <label><input type="radio" name="txc" value="white" />White</label>
    </div>
    <br />
    <button type="button" onclick="changeColor()">Change Color </button>
    <script src="https://code.jquery.com/jquery-3.2.1.js"
    integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
    crossorigin="anonymous"></script>
    <script>
    function changeColor(){
    var bgColor = document.getElementsByName('radio');
    var txColor = document.getElementsByName('txc');
    for(var i = 0; i < bgColor.length; i++){
    if(bgColor[i].checked){
    var bgcolor = $('input[name=radio]:checked').val();
    // bgColor[i].checked = false;
    }
    }
    for(var j = 0; j < txColor.length; j++){
    if(txColor[j].checked){
    var txcolor = $('input[name=txc]:checked').val();
    // txColor[i].checked = false;
    }
    }
    document.querySelector('.content').style.backgroundColor = bgcolor;
    document.querySelector('.main-outer').style.backgroundColor = bgcolor;
    document.querySelector('body').style.color = txcolor;
    };

    </script>


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

    BGtop

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