Кнопка Наверх страницы.

Продолжим работу с конструктором. В предыдущей статье мы угождали конструктору, работали с его тегами секций и виджетов.

Сегодня попробуем дать ему готовое решение: прямо в коде разместим ссылку на верх страницы. В качестве ссылочного элемента часто используют картинку со стрелкой или кнопку с надписью "Наверх".

Можно использовать любую, подберите по вкусу. Картинку лучше иметь в базе данных (БД) блога. Для этого вставьте эту картинку прямо в эту статью (потом удалите).




Переходим в режим HTML и копируем тег вставки картинки <img .... />

Идем  Шаблон => Изменить шаблон, Ctrl + F, вводим </body> и перед ним вставляем в контейнер div картинку.
Код:
<div id='verh'>
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-hU4vdfhehnTAYBjhvpv32NSQhv4uXdf07BgCo65uler1orVTGGAkB85QLibDr-B6XfUjT9Wz2jLGZXwBCNp7KOAO5uUupvmasa1drEFc9eDnH9mUBEengJVXjbNaMo5uhccEwwQNGD39/s1600/naverh.gif'/>
</div>
</body>
Красный шрифт - адрес Вашей картинки в БД блога.
Кнопка Просмотр. Все ОК. Наша картинка вывелась в самом низу страницы, слева. Лучше Сохранить шаблон.
Спозиционируем ее в правый, нижний: Шаблон => Изменить шаблон. Где писали CSS код для часов (перед двойными квадратными скобками) печатаем код:

 #verh{
position:absolute;
bottom:500px;
right:80px;
}
      ]]>  <!--комментарии, по моему, излишни-->
Цифрами можно поиграть, поставьте как Вам нравится. Сохранить шаблон.

Исходная, вспомогательная картинка в статье больше не нужна,  ее удаляем.
Осталось сделать из картинки ссылку. Для этого нужно установить якорь в то место куда посылает ссылка. В нашем случае это шапка блога.
Вставка якоря в заголовок: Шаблон => Изменить шаблон. Ищем тег <header> и за ним ставим якорь:

<header>

<a name='shapka'></a>
 

Делаем из картинки ссылку. В шаблоне находим код вставки нашей картинки (перед </body>) и корректируем его ( добавляем выделенное красным):


<div id='verh'>
<a href='#shapka'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-hU4vdfhehnTAYBjhvpv32NSQhv4uXdf07BgCo65uler1orVTGGAkB85QLibDr-B6XfUjT9Wz2jLGZXwBCNp7KOAO5uUupvmasa1drEFc9eDnH9mUBEengJVXjbNaMo5uhccEwwQNGD39/s1600/naverh.gif'/></a>
</div>


Просмотр. Если все ОК, то Сохранить шаблон

Можете проверить, все работает. Кнопка делалось в этой статье параллельно с написанием и результат справа. Щелкайте по улитке!

Вывод: необязательно работать с тегами шаблона. Можно в шаблоне писать и свой код.
Можно обойтись и без этой кнопки. Как?
До встречи.