Как да променя фона на сайта в blogger

Вече изяснихме, че блоговете в blogger позволяват пълна свобода по отношение това да бъдат персонализирани, тъй като можем не само да сменяме шаблона им, но и да модифицираме самия HTML код на страниците. Такава една персонализация е и промяната на фона (background) на шаблона. Защото използването на шаблони не означава непременно да ги използваме в цветовата гама, в която са създадени. И тъй като шаблонът може да има различни секции, ще разгледам как може да се смени фона, както ако е цвят, така и ако е изображение, за всяка една от тях.

Промяна цвета на фона или шрифтовете в страницата

Тази задача е изключително лесна за изпълнение, тъй като blogger предлага специално създаден модул, където лесно да дефинирате цветовете за фон или тези на шрифтовете за всички части, елементи и секции на страницата си.

Идете в Оформление -> Шрифтове и цветове. Вляво се намират всички използвани в сайта ви елементи, вдясно - техните цветови характеристики, долу - изглед на страницата, отразяващ промените, които правите. Можете да експериментирате неограничено, защото промените се отразяват в самата страница едва след натискане на бутона "Запазване на промените".

Промяна/смяна фона на страницата или на нейните секции с изображение

1. Подготовка

Тази задача изисква малко повече усилия и модифициране на самия код на шаблона, но в крайна сметка, не е кой знае колко сложна за изпълнение. Най-напред е нужно да си изясните за коя част на страницата искате фонът да е изображение. Всяка секция в страницата си има име:

1. Цялата страница: body {
2. Секцията с публикациите: #main-wrap {
   
3. Страничната лента: #sidebar-wrap {
   
4. Заглавката: #header-wrap {
5. Долния колонтитул (footer): #footer-wrap {
6. Други секции:#... {
   

Тези имена може и да се различават в известна степен или да са повече на брой, в зависимост от използвания шаблон. Важен е принципът. А той е, че всяка секция определя фона (цвят или картика) чрез функцията background:______; Например:

body {
background:$bgcolor;

или

#sidebar-wrapper {
background-color:#B38481;

и т.н.

След като вече сте наясно къде искате фонът ви да е картинка, трябва да осигурите и самото изображение. Да осигурите, означава освен да го намерите, още то да е с подходящ размер и да има видим Интернет адрес.

• Размер и управление на фоновото изображение

По подразбиране, поставеното като фон изображение, се самомултиплицира колкото пъти е нужно, за да запълни целия фон. Колкото по-малко е то, толкова повече пъти ще се мултиплицира и обратно. Затова е добре да съобразите неговия размер с пространството на секцията, за фон на която искате да го поставите. Една от лесните за ползване безплатни програми за обработка на изображения е IrfanView, но вие можете да използвате и всяка друга, която ви позволява да редактирате изображения.

От друга страна, вие можете да управлявате поведението на фоновото изображение. По подразбиране, фоновото изображение винаги се позиционира в горния ляв ъгъл на съответната секция, освен ако нейните настройки не указват друго. С няколко декларации в кода, обаче вие можете да накарате изображението да се "държи" по друг начин. Ето ви кратък списък на тези декларации:

1. да не се мултиплицира: background-repeat: no-repeat;
2. да се мултиплицира само хоризонтално: background-repeat: repeat-x;
3. или вертикално: background-repeat: repeat-y;
4. да се разположи на желана позиция: background-position: top left; (горен ляв ъгъл)
   други възможни позиции са: top center; top right; center left; center center; center right; bottom left; bottom center; bottom right;
5. да се разположи на точно определено място: background-position: x% y%; или xpx ypx;
   (x е позицията по хоризонтала, а y е тази по вертикала)
6. да е фиксирано на едно място, когато скролирате: background-attachment: fixed;

• видим Интернет адрес на фоновото изображение

След като сте подбрали желаното изображение и то е подходящо (или сте го направили подходящо) за секцията в страницата си, за която искате то да бъде фон, следва да му осигурите видим Интернет адрес. Един лесен начин - като го добавите в публикация в blogger - трик, който обясних по повод поставянето на предикона на сайта. Другите възможни варианти са свързани с предпочитано от вас място в Интернет, където можете да качвате изображения. Това, което ви е нужно, е URL-то на изображението.

2. Промяна/смяна на фоновото изображение

Е, вече сте на финалната права. Идете в Оформление -> Редактиране на HTML кода. Открийте кода на желаната от вас секция. Ако например говорим за фон на цялата страница, това е следният код:

body {
background-color:
...
}

Можете да го замените с този:

body {
background:#000000 url(http://адрес-на-картинка.jpg) no-repeat center center fixed;
}

който в разширен и по-прегледен вариант може да изглежда и така:

body {
background-color:#000000;
background-image: url(http://адрес-на-картинка.jpg);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
}

Модифицирайте кода, съобразно вашите нужди и желания и указанията по-горе. Когато сте готови, натиснете бутон "Визуализция", за да проверите дали всичко е така, както сте очаквали и когато всичко е наред, запазете промените.

Това е. Вярвам, че ще се справите. А при проблеми, винаги можете да ме потърсите.

Ако информацията ви е била полезна, подкрепете ме!

Направи си сайт - въпроси и трикове