Дизайн. Изображение в заглавието на публикация

Здравейте приятели. Как да поставите изображение преди заглавието на публикация вече знаете. Днес ще ви покажа още различни начини как да направите това. Лесно е, дори начинаещите не се затрудняват. Да започваме.

Обикновено в шаблона на Blogger за заглавието на публикацията отговарят редовете

.post-title  или  h3.post-title. 

От един от тези редове ще тръгнем. В зависимост от резултата, който искаме да се получи, кодовете са едни и същи, а подходите са различни.

Ако искате изображението да се появи в заглавията на всички публикации в блога

Отидете в раздела Тема ➔ намерете реда ]]> </ b: skin> и впишете един от следните кодове над него, взависимост от това, къде искате да се показва изображението:

Ако искате изображението да е преди заглавието

Код

h3.post-title:before {
content: url(https://www.sonsurum.net/resimler/simgeler/sugarsync.png);
padding-right:12px;
  }

Ако искате изображението да е след заглавието

Код

h3.post-title:after {
content: url https://www.sonsurum.net/resimler/simgeler/sugarsync.png);
  padding-left:15px;
  }

Ако искате изображение да има и на двете места

Код

h3.post-title:before, h3.post-title:after {
content: url(https://www.sonsurum.net/resimler/simgeler/sugarsync.png);
   h3.post-title:before, h3.post-title:after {
content: url(https://www.sonsurum.net/resimler/simgeler/sugarsync.png);
   padding:15px;
   }

Ако искате изображението да се появи в заглавието на конкретна публикация

Не е необходимо да добавяте нищо в кода на темата. След като сте готови с написването на публикацията преминете в HTML режим и впишете предпочитания от вас код в нейния край, но така:

<style>тук е целият код, избран от вас</style>

Уточнения

➤Значението padding:15px; - определя отстъпите, сменете ги по свое усмотрение;

➤Url адреса на изображението изберете сами, размера му, също. В моя пример изображението е с размери 48 на 48 px;

➤Ако за заглавията на публикациите ви отговаря клас .post-title, изтрийте от кодовете участъка h3;

Освежете дизайна на блога си. Нека изглежда различно!

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

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