10 красивых кнопок для блога

Здравствуйте, дорогие читатели!
Иногда перед веб-мастером возникает необходимость установки в текст статьи красивых кнопок, вместо обычных ссылок.


Часто такая кнопка необходима в сайдбаре, для привлечения внимания посетителей к определённой странице, или функции.


Конечно, можно использовать готовую картинку, снабдив её нужной ссылкой. Однако, этот способ наверняка повлияет на скорость загрузки блога. Некоторые картинки и скрипты - главные виновники торможения.

Предлагаю для создания красивых и функциональных кнопок воспользоваться стилями CSS, не замедляющих загрузку блога и видимых во всех браузерах. Эти кнопки разработаны автором  "MyBloggerTricks". Главное их достоинство - минимализм в стиле и простота установки.

Вот так могут выглядеть наши кнопки после нескольких элементарных шагов:



В зависимости от задачи, которую будет выполнять кнопка, мы копируем приведённый ниже код и вставляем его:

1) В тело поста (вкладка "Изменить HTML" встроенного редактора Blogger)

2) В шаблон блога (Панель инструментов -- Дизайн -- Элементы страницы -- Добавить гаджет -- "HTML/JavaScript")

Вот этот код:


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


Теперь необходимо внести в него персональные изменения: вместо слова "Ссылка" указать адрес, куда нас эта кнопка должна привести. А вместо "Текст" вставляем текстовое содержание кнопки.

То есть, если я хочу сделать кнопку с названием моего блога и приводящую на главную страницу, то код будет выглядеть так:


<span class="MBT-Buttons"><a href="http://www.in-blog.com/">Всё гениальное просто</a></span>



С кодом HTML разобрались. Теперь займёмся стилями. Переходим по ссылке на тестовый блог и выбираем внешний вид кнопки. Копируем код под выбранным стилем.

Теперь заходим в Панель инструментов -- Дизайн -- Изменить HTML. Предварительно сохраняем весь шаблон на жёсткий диск. Устанавливаем флажок "Расширить шаблоны виджета". С помощью комбинации Ctrl + F находим строчку:

]]></b:skin>

и непосредственно перед ней вставляем выбранный код стиля.

Сохраняем шаблон и любуемся нашими новыми кнопками. Надеюсь, эта информация была для вас полезной!

Ваш Retliff

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



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

  1. Узнал о вашем ресурсе через твиттер. Спасибо за кнопки.

    ОтветитьУдалить
  2. Артёмка - Всегда рад новым друзьям и читателям!

    ОтветитьУдалить
  3. Хорошо.Как кнопку разместить именно там где я хочу?Ну в тексте понятно как ..

    ОтветитьУдалить
  4. Попутно еще вопрос.К примеру ,как можно перемещать текст заглавия блога..?.В настройках нет возможности.Это в blogspot

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

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