Да променим стила на притурките в Blogger (Blogspot)

Работейки по дизайна на блога, не можете да пренебрегнете такъв важен компонент от него, като всички видове притурки (джаджи) и приспособления. Те може да са стандартни или изтеглени от ресурси на трети страни, но при всички случаи техният стил трябва да съответства на дизайна на блога.

Платформата Blogger ни предлага доста добър избор от стандартни притурки, чийто външен вид лесно може да бъде променен със CSS свойства. Тази статия ви показва идентификаторите на най-използваните притурки и приспособления в блоговете на Blogger, както и някои нюанси в дизайна на техните отделни елементи.
Местоположението на притурките в блога може да бъде различно. Те могат да бъдат поставени над заглавната част на блога, под нея, в страничните колони, над или под публикацията или в "дъното" - footer. Но тяхната структура не се променя от това. В една стандартна тема за всички притурки и приспособления блокът със съдържанието им има един и същ селектор.

 .widget-content – е вътрешен селектор на притурките. Ако добавите CSS към този селектор, тогава стилът на всички притурки в блога ще се промени.

.widget-content {
 background: #ccc;
 border: 1px solid #666;
 border-radius: 5px;
 color: #1C1C1C;
 padding: 5px;
}

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

Идентификаторите и селекторите на някои приспособления са показани по-долу.


.widget – е допълнителен селектор;

В HTML кода изглежда примерно така:

...
<div class="widget FollowByEmail" id="FollowByEmail1">
<h2 class="title">Follow by Email</h2>
<div class="widget-content">
...

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

Идентификатори (селектори) на стандартните притурки в Blogger са:


➤#Followers1(.Followers1) – Постоянни читатели;

➤#BlogArchive1(.BlogArchive1) - Архив на блога;

➤#PageList1(.PageList1) – притурка Страници;

➤#PopularPosts1(.PopularPosts1) - Популярни съобщения;

➤#CustomSearch1(.CustomSearch1) – Търсене в блога;

➤#LinkList1(.LinkList1) – Списък с хипервръзки;

➤#Profile1(.Profile1) - Информация за профила;

➤#FollowByEmail1(.FollowByEmail1) - Абонамент по email;

➤#HTML[№] – притурка HTML/JavaScript, където [№] – е число, съответстващо на поредния номер на добавената притурка. Тоест, ако добавите първата си HTML/JavaScript притурка, идентификаторът ще бъде HTML1, следващата ще е HTML2 и така нататък.

В Blogger наименованието на притурката е заглавка от втори порядък - h2. Някои, в това число и аз, смятат, че това не е съвсем правилно, но сега не става дума за това. За да промените заглавка на определена притурка можете да използвате участък от кода като:

#BlogArchive1 > h2 {/*свойства на стила на заглавката на тази притурка*/
}

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

Това е всичко за днес. Четете и следващите публикации на тематика оформление на елементите в темата на Blogger-блогове.

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

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



Продължаваме