пятница, 22 февраля 2013 г.

Фиксированная кнопка.

Предлагаю установить еще кнопочку. На нее указывает старуха слева. Плохо читается? Но это же Шапокляк!
Сегодня закрепление знаний, полученных в прошлой статье. Кнопка так же будет ссылкой куда Вы захотите.

В отличии от кн. "Наверх" она будет всегда на одном месте, не зависимо от прокрутки. Всегда по рукой. Я обозвал ее "Задайте вопрос". Вы можете обозвать ее как угодно и послать, с ее помощью, куда угодно.
Картинку кнопки вставляем в статью (для помещения ее БД блога).
Переходим в режим HTML и копируем адрес картинки (тег <img ... />).

В закладке Шаблон => Изменить шаблон, Ctrl + F, в поле поиска вводим </header> и после него вводим код:

    </header>
<!--вопрос-->
<div id='vopros'>
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4pY9zF0H0U2Nt7UnQwJJfIcC4g7N40GndY64RT7tDzga0nFt4O6xTtHKQF9QloR3X9CWvOekA7u1KzquJJpnDJ3hwRt8_AtkPhEOVa6QKlhBdN9AlCxUJVc3kFrnW5k6328nVjGfwPpA/s1600/vopros.gif"/>
</div>
Красным шрифтом - Ваша картинка. И привыкайте оставлять <!-- комментарий -->(правила хорошего тона, да и самим пригодиться).
Кн. Просмотр. Если нет проблем, удаляем картинку из статьи (щелчок по ней и меню удалить).
В шаблоне находим закрывающие квадратные скобки (  ]]> ) и перед ними пишем правила вывода нашей кнопки:


/*кнВопрос*/
#vopros{
position:fixed;
width:20px;
height:200px;
top:550px;
left:90px;
z-index:2; /*что бы не пряталась под другими элементами*/
}
]]>

Кн. Просмотр. Все OK. Делаем из картинки ссылку (допечатываем синий код к красному):

<a href='http://problogger2012.blogspot.ru/p/blog-page_9.html'><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4pY9zF0H0U2Nt7UnQwJJfIcC4g7N40GndY64RT7tDzga0nFt4O6xTtHKQF9QloR3X9CWvOekA7u1KzquJJpnDJ3hwRt8_AtkPhEOVa6QKlhBdN9AlCxUJVc3kFrnW5k6328nVjGfwPpA/s1600/vopros.gif"/></a>

Я сослался на страничку Контакт (открыл болг, в нем стр. Контакт, в строке браузера скопировал ее код и вставил его в значение атрибута href= ). Жмем Сохранить шаблон и Закрыть. Все. Справа от Вас фиксированная кнопка.
До встречи.

7 комментариев:

  1. Владимир, здравствуйте!
    Я сегодня впервые на Вашем блоге. Мне захотелось установить у себя кнопочку "Задать вопрос". Но я измучилась пока искала куда же показывает старуха Шапокляк. Оказывается кнопочка спряталась под картинки. А видна становится когда они заканчиваются. Может знаете, как ее установить сверху?

    ОтветитьУдалить
    Ответы
    1. Привет, Галина. Конечно, знаю. Насколько я понял: кнопка прячется на моем блоге? Проверил в трех браузерах. Все ОК. На всякий случай в CSS нужно для нее написать правило: z-index2; Спасибо. Исправил в статье и шаблоне.
      Как и Вас у меня есть блог про здоровье, заходите: http://banja1.blogspot.ru/p/blog-page_8425.html
      Кстати, Вы первый комментатор на моем блоге. Первым 10 обещал подарок. Ждите.

      Удалить
    2. В IE тоже проверяли, Владимир? Я сейчас вошла на Ваш блог, а кнопочка, которая должна бы быть поверх Шапокляк (Вы сами сказали, что поправили), все равно внизу. Как же исправить?
      За подарок спасибо огромное: море позитива и удовольствий. Можно я сделаю из них слайдер и на своем блоге выставлю с рассказом про Ваш блог?
      Мне здесь очень нравится. И хочется, чтобы мои читатели тоже знали про Вас и Ваш "Зри в корень".

      Удалить
    3. Ваш браузер не понимает что z-index2 подняться на уровень вверх. Обновите версию или лучше перейдите на другой. Рекомендую гугловский Chrome.
      Море позитива и удовольствий это хорошо, а по сему "таможня дает добро" на слайдер. Пусть кто то еще посмотрит.
      Надеюсь, Вы догадались их посмотреть в полноэкранном режиме.

      Удалить
    4. Все! Здорово: кнопка "Задать вопрос" и в IE поверх картинки! Видимо, после вставки z-index2.

      Удалить
    5. Во всех браузерах кнопка не прячется,а находится сбоку от картинки. Поиграйте цифрами top: и left:

      Удалить
  2. Этот комментарий был удален автором.

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

От Вас деловой комментарий - Вам подарок!