Blogger. Добавяне на CSS в HTML кода на темите

Здравейте, приятели. От доста време аз пиша в Blogzablogove.com и споделям с вас опита си. В много публикации съм ви предоставяла CSS и HTML кодове за оформяне и промяна в различни елементи от дизайна на темите на Blogger. И реших да направя обобщение, да събера най-важното на едно място.

В тази публикация е събрана обща информация за това, как да добавяте CSS в темите на Blogger, различни методи за добавянето им, описания и примери. Ще говорим само за стандартни стилове и секции на CSS в HTML кода на тема от блог на Blogger. Има и примери за това как да намерите правилния елемент на блога и да му зададете свой собствен стил.

Начини за добавяне на CSS в HTML кода на темите от Blogger

Стандартен начин

Най-лесният начин е: отиваме в "Админ панел", избираме желания блог (ако имаме няколко), а след това в "Тема" ➔ "персонализиране" ➔ "Инструменти за дизайн на теми за Blogger" ➔"Разширени" ➔ "Добавяне на CSS" (инструментът е в самия край на списъка). Добавяте CSS свойствата за желания блок, указвайки неговия клас или ID. Този метод е добър, защото може да се види веднага как се изобразява добавеният стил на страницата и ако е необходимо, да се направят промени. След като запазите всички добавени стилове, те ще се намират тук, в редактора, и са както се казва " под ръка". Те могат да бъдат променяни, като отворите настройките.

Скриншотът по-горе показва, че областта за вписване на CSS  в "Инструменти за дизайн на теми за Blogger " е празна, въпреки че преди това са добавени стилове и промени в темата има доста. Това се случва, ако сте направили промени в HTML кода на темата и имате предварително записани в нея вече добавени стилове.

Няма нищо страшно, всички тези ваши добавени по-рано CSS работят, само че можете да ги намерите, като минете през „Админ панел“ ➔"Тема" ➔"Редактиране на HTML код" и всички те са преди реда:

 ]]></b:skin>

Добавяне или редактиране на CSS в HTML кода на темата

Работата е там, че почти за всички стандартни елементи на Blogger-блога вече е определен първоначален стил, който съответства на вашите настройки в "Инструменти за дизайн на теми за Blogger " и избраната тема. Селекторите и идентификаторите са зададени със стандартни (по подразбиране) свойства, които могат да се променят. А също да се добавят към тях други, които са ваши собствени. Стиловете в HTML кода на темата започват след реда:

<b:skin><![CDATA[

Непосредствено зад него обикновено е указан авторът на проекта, а след него е раздела с променливите величини на стиловете, които могат да се променят чрез " Инструменти за дизайн на теми за Blogger ". Те са изброени след реда:

/* Variable definitions
   ====================

Разделът с променливите величини завършва с реда:

/* Content
----------------------------------------------- */

След него можете да добавяте свои собствени CSS кодове. Тук са регистрирани почти всички селектори на основните блокове на вашия блог. Но за да промените стила на някои елементи ще трябва да добавите свои собствени селектори, които не са включени в кода по подразбиране. Например, за блока с коментари или стандартните притурки. В темата на блога ще видите следното изписване на някои свойства на стила:

.Header .description {
 font: $(description.font);
 color: $(description.text.color);

Това означава, че стойностите на CSS на този селектор е по подразбиране, вграден е в дизайна. За да промените стил на елемент с такъв запис, а в този случай това е "Описание" в шапката на блога, просто трябва да се отстранят участъците $ (...) и на тяхното място да се напишат желаните стойности, а можете да добавите и още някое свойство.

Стандартно, както виждаме, е възможно да се промени шрифта на текста , както и неговия цвят. Можете да добавите подравняване (вляво, вдясно или център), отстъпи, фон и други. Blogger е отворен за експерименти. :)

Вярвам, че такъв метод - добавяне на CSS директно в кода на темата е по-доброто решение, защото намалява "тежестта" на блога, както и намалява броя на грешките, защото не се дублират селектори и стилове, а се използват съществуващите такива.За някои елементи CSS се определя от страната на сървъра на Blogger, на достъп до който не е налице. Прилагане на собствени свойства към тези звена не води до желания резултат, тъй като браузърът изпълнява сървърния стил, а добавения се игнорира. В такива случаи, за да се уточни кай код е с по-висок приоритет се използва допълнително свойство - !important.

Например:

.post-body {
  font-size: 110% !important; /*именно това значение ще е  приложено*/
  line-height: 1.4;
  position: relative;
}

Локално добавяне на CSS

Но понякога се налага да се зададе определен стил на елемент, разположен в самата публикация. В Blogger е възможно да се впише стил директно в тялото на публикацията. За да направите това, вие трябва да отидете в режим "HTML код" в редактора на публикацията и добавения CSS кода трябва да бъде поставен между маркерите:

<style>
  ...
</style>

По същия начин, можете да добавите CSS и в притурката HTML / JavaScript. Така се оформят предимно компоненти от трети страни, добавяни към блога с нейна помощ.

Как можем да разберем кой е идентификаторът и селекторът на желани от нас блокове

Кой идентификатор отговаря за стила на публикацията, кой за заглавията, кой за коментарите в Blogger-блога? Да се разбере това е лесно! За това браузърите имат инструменти за разработчика. Аз използвам за тази цел Wiew-Source в Chrome, но съм чувала, че много удобен също е Dragon Fly - стандартното допълнение на Opera. За да използвате тази опция в прозореца с уебсайта щракнете с десния бутон на мишката и изберете "Проверка на елемента" (за Opera) или "Проверка на изходния код на страницата" (за Chrome).


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


Удобна таблица на CSS свойствата, значения и техните описания могат да се видят на тази страница.

Благодаря ви за вниманието, ще се радвам за вашите коментари. :)

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

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