Многие из вас, быть может, встречали в постах некоторых блогов возле количества комментариев и упоминания автора наличие неких симпатичных иконок, соответствующих каждому из этих наименований.
Как сотворить у себя в блоге что-то подобное я и расскажу дальше.
Как правило, данный трюк "прокатывает" на стандартных шаблонах, потому как в остальных все привносимые в шаблон определения будут, по сути, отличаться от уже прописанных и не работать. Соответственно, все весьма индивидуально...
Пример того, что у нас может получиться:
Проследуйте Шаблон > Изменить HTML. В поле редактирования шаблона с помощью поиска найдите строку ]]></b:skin> и прямо перед ней расположите следующий код стилей:
.post-author{
background:transparent url(http://home.kpn.nl/oosti468/images/calendar_month.png) no-repeat scroll left center;
padding:2px 0px 2px 20px;
}
.post-labels {
background:transparent url(http://home.kpn.nl/oosti468/images/box.png) no-repeat scroll left center;
padding:2px 0px 2px 20px;
}
.post-comment-link {
background:transparent url(http://home.kpn.nl/oosti468/images/balloon.png) no-repeat scroll left center;
margin-right:10px;
padding:2px 0px 2px 20px;
}
Сохраните шаблон и полюбуйтесь на творение рук своих.В принципе, код полностью настроен и готов к употреблению, однако при желании удовлетворить свое дизайнерское эго, можете заменить ссылки иконок на собственные.
Просто укажите пути к своим изображениям в каждом из определений:
.post-author{} - иконка располагается возле ника автора;
.post-labels {} - иконка располагается возле названия ярлыка у сообщения;
.post-comment-link {} - иконка располагается возле наименования количества комментариев.
.post-author{} - иконка располагается возле ника автора;
.post-labels {} - иконка располагается возле названия ярлыка у сообщения;
.post-comment-link {} - иконка располагается возле наименования количества комментариев.