Онлайн-генератор веб-цветов
Онлайн-подбор оптимальных веб-цветов для сайта
Онлайн-редактор HTML
Цветовой онлайн-калькулятор
Онлайн-калькулятор
Онлайн-рисовалка PencilMadness
  • Web
  • Images
  • News
  • Videos
  воскресенье, февраля 26, 2012  

Добавляем иконки-превьюшки к ярлыкам и комментариям
Тем, кто использует стандартные шаблоны от Blogger, предлагаю привнести в блог еще щепотку красоты.
Многие из вас, быть может, встречали в постах некоторых блогов возле количества комментариев и упоминания автора наличие неких симпатичных иконок, соответствующих каждому из этих наименований.
Как сотворить у себя в блоге что-то подобное я и расскажу дальше.

Как правило, данный трюк "прокатывает" на стандартных шаблонах, потому как в остальных все привносимые в шаблон определения будут, по сути, отличаться от уже прописанных и не работать. Соответственно, все весьма индивидуально...

Пример того, что у нас может получиться:

Пример отображения иконок у ярлыков и комментариев в посте


Проследуйте Шаблон > Изменить 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 {} - иконка располагается возле наименования количества комментариев.



Понравилась статья? Поделись ею с друзьями!

Не забудь подписаться на обновления блога:


Вы можете оставить свой отзыв через блок комментариев Вконтакте. При отсутствии профиля в этой социальной сети, воспользуйтесь удобной формой Disqus ниже.