Предлагаю установить еще кнопочку. На нее указывает старуха слева. Плохо читается? Но это же Шапокляк!
Сегодня закрепление знаний, полученных в прошлой статье. Кнопка так же будет ссылкой куда Вы захотите.
В отличии от кн. "Наверх" она будет всегда на одном месте, не зависимо от прокрутки. Всегда по рукой. Я обозвал ее "Задайте вопрос". Вы можете обозвать ее как угодно и послать, с ее помощью, куда угодно.
Картинку кнопки вставляем в статью (для помещения ее БД блога).
Переходим в режим 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>
Сегодня закрепление знаний, полученных в прошлой статье. Кнопка так же будет ссылкой куда Вы захотите.
В отличии от кн. "Наверх" она будет всегда на одном месте, не зависимо от прокрутки. Всегда по рукой. Я обозвал ее "Задайте вопрос". Вы можете обозвать ее как угодно и послать, с ее помощью, куда угодно.
Картинку кнопки вставляем в статью (для помещения ее БД блога).
Переходим в режим 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>
Красным шрифтом - Ваша картинка. И привыкайте оставлять <!-- комментарий -->(правила хорошего тона, да и самим пригодиться).
Кн. Просмотр. Если нет проблем, удаляем картинку из статьи (щелчок по ней и меню удалить).
В шаблоне находим закрывающие квадратные скобки ( ]]> ) и перед ними пишем правила вывода нашей кнопки:
Я сослался на страничку Контакт (открыл болг, в нем стр. Контакт, в строке браузера скопировал ее код и вставил его в значение атрибута href= ). Жмем Сохранить шаблон и Закрыть. Все. Справа от Вас фиксированная кнопка.
До встречи.
В шаблоне находим закрывающие квадратные скобки ( ]]> ) и перед ними пишем правила вывода нашей кнопки:
/*кнВопрос*/
#vopros{
position:fixed;
width:20px;
height:200px;
top:550px;
left:90px;
z-index:2; /*что бы не пряталась под другими элементами*/
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>
До встречи.
Владимир, здравствуйте!
ОтветитьУдалитьЯ сегодня впервые на Вашем блоге. Мне захотелось установить у себя кнопочку "Задать вопрос". Но я измучилась пока искала куда же показывает старуха Шапокляк. Оказывается кнопочка спряталась под картинки. А видна становится когда они заканчиваются. Может знаете, как ее установить сверху?
Привет, Галина. Конечно, знаю. Насколько я понял: кнопка прячется на моем блоге? Проверил в трех браузерах. Все ОК. На всякий случай в CSS нужно для нее написать правило: z-index2; Спасибо. Исправил в статье и шаблоне.
УдалитьКак и Вас у меня есть блог про здоровье, заходите: http://banja1.blogspot.ru/p/blog-page_8425.html
Кстати, Вы первый комментатор на моем блоге. Первым 10 обещал подарок. Ждите.
В IE тоже проверяли, Владимир? Я сейчас вошла на Ваш блог, а кнопочка, которая должна бы быть поверх Шапокляк (Вы сами сказали, что поправили), все равно внизу. Как же исправить?
УдалитьЗа подарок спасибо огромное: море позитива и удовольствий. Можно я сделаю из них слайдер и на своем блоге выставлю с рассказом про Ваш блог?
Мне здесь очень нравится. И хочется, чтобы мои читатели тоже знали про Вас и Ваш "Зри в корень".
Ваш браузер не понимает что z-index2 подняться на уровень вверх. Обновите версию или лучше перейдите на другой. Рекомендую гугловский Chrome.
УдалитьМоре позитива и удовольствий это хорошо, а по сему "таможня дает добро" на слайдер. Пусть кто то еще посмотрит.
Надеюсь, Вы догадались их посмотреть в полноэкранном режиме.
Все! Здорово: кнопка "Задать вопрос" и в IE поверх картинки! Видимо, после вставки z-index2.
УдалитьВо всех браузерах кнопка не прячется,а находится сбоку от картинки. Поиграйте цифрами top: и left:
УдалитьЭтот комментарий был удален автором.
ОтветитьУдалить