Красивые кнопки для блога своими руками

Здравствуйте, дорогие читатели!
Мы уже говорили о том, как делать красивые кнопки для блога. В прошлой статье предлагались 10 готовых стилей CSS.

Krasivie knopki


Сейчас хочу познакомить вас с замечательным сервисом CSS-Tricks Button Maker, с помощью которого легко и бесплатно создавать красивые кнопки для блога своими руками.


Здесь, регулируя настройки генератора кнопок, мы видим изменения внешнего вида в реальном времени. Это позволит производить красивые кнопки, максимально подходящие под дизайн любого блога.

Вот, как происходит этот процесс:

Красивые кнопки для блога в генераторе CSS
Заходим на страницу генератора стилей.

С помощью настроек создаём дизайн кнопки, наблюдая за изменениями образца в левой части сервиса.



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

Интеграция кнопки в Blogger
1. Заходим в Панель инструментов -- Дизайн -- Изменить HTML

2. Сохраняем резервную копию шаблона на жёсткий диск

3. С помощью комбинации Ctrl + F находим строку:

]]></b:skin>

и прямо перед ней вставляем код, полученный в генераторе CSS

4. Сохраняем.

Теперь переходим на вкладку "Изменить HTML"



 и вставляем в нужном месте статьи код самой кнопки:

<span class="button"><a href="Ссылка">Текст</a></span>

заменив слово Ссылка адресом той страницы, куда нас эта кнопка должна привести. Вместо слова Текст вписываем текст кнопки.

Например, если мы хотим, что бы с помощью этой кнопки читатели могли загрузить определённый файл, то вместо Ссылка указываем URL места хранения файла, а вместо Текст пишем "Загрузить".

Надеюсь, этот сервис поможет сделать ваш блог ещё привлекательней для читателей!

Ваш Retliff

Сергей Мазураш aka Retliff Блоггер со стажем. Стиль публикаций отличается простотой изложения и весёлым, ироничным подходом к самым серьёзным проблемам. Cпециализируется на создании и продвижении бесплатных блогов на платформе Blogger.



2 комментария:

  1. А можно несколько кнопок вставить в шаблон?

    ОтветитьУдалить
  2. @Таня
    Конечно можно! Только для каждой надо присваивать имя (одинаковое в коде CSS и HTML)

    ОтветитьУдалить

Буду очень признателен за Ваши доброжелательные комментарии!
Любые попытки втянуть автора и читателей в дискуссию, а так же ссылки на посторонние ресурсы - будут удалены.
Всем любителям "конструктивной критики" рекомендую прочитать статью http://maxpastukhov.com/critics