10.04.2012

Активная кнопка


Красивая кнопочка с надписью уже есть в нашей папочке "Internet инструменты". Что можно добавить к ней? Нажмите по очереди на две кнопочки ниже. Заметили отличие? Какая из кнопочек более функциональна?
   номер 1

         номер 2


Мне интересна номер 2. Научимся делать активную кнопку и пополним собственную папочку "Internet инструменты" полезностью.
Надежный способ. Делаем кнопку нужной формы с нужной надписью ( смотри здесь ). Вставляем кнопку как обычную картинку на блог. Переходим в редакторе на HTML. Находим код нашей кнопки. Вот так код выглядит для нашего примера
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-TIHXnaQ_hkI/T4PvHh8iC5I/AAAAAAAAAcM/rcBCFFQPlaA/s1600/button.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/-TIHXnaQ_hkI/T4PvHh8iC5I/AAAAAAAAAcM/rcBCFFQPlaA/s1600/button.png" /></a></div>
Выделяем код мышкой. Сохраняем в блокнот. Находим интересную для нас ссылку для перехода - у меня в примере это ссылка на контакты в визитке - https://sites.google.com/site/svetlanasadovskaya01/kontakty.  Делаем кнопку с переходом на контакты, то есть заменяем часть кода.   Вот так выглядит наш новый код со ссылкой
<div class="separator" style="clear: both; text-align: center;">
<a href="https://sites.google.com/site/svetlanasadovskaya01/kontakty">
<img border="0" src="http://4.bp.blogspot.com/-TIHXnaQ_hkI/T4PvHh8iC5I/AAAAAAAAAcM/rcBCFFQPlaA/s1600/button.png" /></a></div>
Активная кнопка готова! Можно скопировать выделенный код, заменить мою ссылку (выделена зеленым цветом) на собственную и пользоваться такой активной кнопкой.


Наша папочка "Internet  инструменты" пополнена.
Успехов!
***
Internet - Pro100


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

  1. Спасибо! Мне пригодилось.

    ОтветитьУдалить
  2. Жаль, я думала на blogger есть более простой и рациональный способ :( делать ссылки на картинки

    ОтветитьУдалить
  3. Светлана,у меня не получается вставить свою ссылку в кнопочку,код необычный,не знаю в каком месте моя ссылка приживется.Несколько попыток вставить в разные места наугад не привели к желаемому результату.Где и как можно показать Вам код для Вашей неоценимой консультации?Спасибо!

    ОтветитьУдалить
    Ответы
    1. Елена, напишите мне подробное письмо - с кодом кнопки и с вашей ссылкой

      Удалить