Приветствую вас на сайте tech-geek.ru. Нравится мне экспериментировать с Блоггером, на самом деле из него можно лепить как из пластилина. Сегодня я хочу предложить вам ещё одну фишку для блоггеров, которые ведут свои блоги на Blogspot. Хочу показать как добавить логотип блога перед заголовком сообщения.
Хотя это может быть любое изображение, иконка, аватарка или ещё что то. Такое изображение, вы можете видеть у меня на блоге перед каждым названием поста.
На сколько это важно я не знаю, каждый для себя определит сам. Но зато визуально, это придаст вашему блогу, опять-таки какую-то изюминку, индивидуальность и неповторимость. В любом случае решать вам, нужно это на вашем блоге или нет. Ну что ж, если вы всё-таки решили сделать такую штуку на своём блоге, тогда давайте начнём.
1) Переходим в Blogger -> Дизайн -> Изменить HTML
2) Рекомендую сделать резервное копирование шаблона
3) С помощью клавиш Ctrl+F ищем: .post h3
4) Вы должны увидеть примерно такой код:
1 2 3 4 5 6 7 8 |
.post h3 { color: #7CA2C4; font-size: 20px; font-family: Arial, sans-serif;; font-weight: normal; margin: 0px; padding: 0px 10px 0 47px; } |
5) Выделяете весь этот код и заменяете его на этот:
1 2 3 4 5 6 7 8 9 10 11 |
.post h3 { background:url(http://img-fotki.yandex.ru/get/6209/61590320.1/0_a6a0b_df3213b0_XS) no-repeat top left; color: #0134A9; font-size: 20px; font-family: Arial, sans-serif;; font-weight: normal; height:45px; margin: 0px; padding: 0px 10px 0 47px; line-height:1.1em; } |
Теперь давайте немножечко поясню что к чему:
В скобках второй строки когда — это ссылка на изображение, которую вам нужно поменять на свою (логотип, иконка, аватарка). Желательно, чтобы размер изображения был 40рх на 40рх.
font-size: 20px; это размер шрифта заголовка, можете его увеличить или уменьшить.
Это пожалуй самые основные настройки, которые вам необходимы. Теперь вы можете нажать на кнопку «Просмотр» и посмотреть как выглядит логотип блога перед заголовком сообщения. Если вас всё устраивает, тогда можете смело сохранять шаблон. Если же, что то будет не получаться, не стесняйтесь задавать вопросы, я конечно же чем смогу помогу.
Если вы хотите, ещё как то приукрасить свой блог и плюс ко всему, ещё и принести полезность для него, тогда посмотрите как сделать симпатичную плавающую кнопку от Twitter. Ну вот друзья, пожалуй на сегодня и всё. Буду рад вашим комментариям. Желаю удачи и до скорой встречи!