пятница, 30 января 2015 г.

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

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






Как установить кнопку на блог:
1. Войти в свой аккаунт Google. Выбрать сервис Blogger, нажав на пиктограмму в виде квадратов в верхнем правом углу браузера.
2. В открывшемся окне войти в окно редактирования блога, нажав по названию нужного блога.
3. В окне редактирования блога нажать на команду Дизайн.
4. В открывшемся окне оформления внешнего вида блога нажать по кнопке Добавить гаджет в выбранном месте.
5. В открывшемся окне Добавить гаджет выбрать гаджет "HTML/JavaScript", нажав по плюсу рядом с гаджетом.
6. В открывшемся окне Настроить HTML/JavaScript  настроить нужные параметры гаджета:
- строку Название оставить пустым;
- в строке Содержание вставить следующий HTML-код:

<a href='#' class='top-button'>Наверх страницы</a>


















Вместо слова "Наверх страницы" можно установить собственный вариант написания (например, наверх).

7. Нажать кнопку Сохранить.
8. В окне редактирования блога нажать на вкладку Шаблон.
9. Во вкладке Сейчас на блоге нажать на кнопку Настроить.
10. В открывшемся окне Дизайнер шаблонов Blogger выбрать вкладку Дополнительно - Добавить CSS.
11. В окне Добавить персонализированную таблицу CSS вставить следующий код:

.top-button{ position:fixed; 
width:140px; /*ширина кнопки*/ 
height:20px; /*высота кнопки*/ 
color:#000; /*цвет текста кнопки*/ 
display:block; background:#EE790F; /*цвет фона кнопки*/ 
z-index:1000; bottom:20px; /*позиция кнопки-отступ от нижнего края страницы*/ 
right:20px; /*позиция кнопки-отступ от правого края страницы*/ 
font-weight:bold; text-align:center; padding-left:5px; padding-right:5px; padding-top:5px; padding-bottom:5px; border:2px solid #eee; /*обводка вокруг кнопки*/ opacity:1.0; /*прозрачность кнопки, значения 0.0-1.0(0.0,0.1,0.2 и т.д. до 1.0)*/ }











12. Нажать на кнопку Применить к блогу.

Комментариев нет:

Отправить комментарий

Related Posts with Thumbnails