Дизайн. Изображение в заглавието на публикация
.jpg)
понеделник
Здравейте приятели. Как да поставите изображение преди заглавието на публикация вече знаете. Днес ще ви покажа още различни начини как да направите това. Лесно е, дори начинаещите не се затрудняват. Да започваме.
Обикновено в шаблона на Blogger за заглавието на публикацията отговарят редовете
От един от тези редове ще тръгнем. В зависимост от резултата, който искаме да се получи, кодовете са едни и същи, а подходите са различни.
Отидете в раздела Тема ➔ намерете реда ]]> </ b: skin> и впишете един от следните кодове над него, взависимост от това, къде искате да се показва изображението:
➤Значението padding:15px; - определя отстъпите, сменете ги по свое усмотрение;
➤Url адреса на изображението изберете сами, размера му, също. В моя пример изображението е с размери 48 на 48 px;
➤Ако за заглавията на публикациите ви отговаря клас .post-title, изтрийте от кодовете участъка h3;
Освежете дизайна на блога си. Нека изглежда различно!
Здраве за всички вас! Не забравяйте да правите добро на други хора!
Ще съм благодарна да оцените моя труд и кликнете върху звездичките по-долу. Или гласувайте за блога ми на:
Обикновено в шаблона на 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;
}
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;
}
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;
}
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;
Освежете дизайна на блога си. Нека изглежда различно!
Здраве за всички вас! Не забравяйте да правите добро на други хора!
Ще съм благодарна да оцените моя труд и кликнете върху звездичките по-долу. Или гласувайте за блога ми на:
