Притурки. Бял цвят на текста на черен фон в 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>

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


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