Добавяне на CSS за публикация в Blogger (Blogspot)

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

По принцип селекторите за манипулиране с блока на публикациите в една стандартна тема на Blogger са много, и то повече от достатъчно, но обикновено само няколко от тях могат да променят дизайна:

➤.date-outer - е селекторът на целия блок за публикациите. Той съдържа всички останали блокове - от датата на публикацията и завършва с коментарите;

➤.post-body или .entry-content - е селекторът за публикация, но без заглавие;

В кода на темата, блокът на публикациите е записан така:

<div class="post-body entry-content" id="post-bod...

➤.post-footer – е селекторът за "дъното“ на публикацията. Тук могат да намерят място хипервръзки към профила на автора, датата на създаване на блога, етикети и други;

Вътре в блока "footer" допълнително се правят секции - .post-footer-line, в които се разполагат изброените по-горе елементи и в случай на  необходимост те също могат да се управляват с помощта на CSS. 

Всяка секция освен общия има и собствен селектор:

post-footer-line-1;

post-footer-line-2;

post-footer-line-3;

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

<div class="post-footer">
 <div class="post-footer-line post-footer-line-1">
...
 </div>
 <div class="post-footer-line post-footer-line-2">
...
 </div>
 <div class="post-footer-line post-footer-line-3">
...
 </div>
</div>

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

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

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




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