Кнопка вверх на CSS для HTML сайтов Blogger, WordPRess и др.

Здравствуйте дорогие вебмастера и блоггеры. Есть для вас новые печеньки, в виде кнопки скроллинга страниц вверх для вашего сайта или блога. Не так давно, у нас уже была идентичная тема, о том, как установить на сайт - блог кнопку вверх, но кнопка вверх в той теме не обладает такими функциями, как сегодняшние две кнопки, вернее она одна, но с разными эффектами. В общем сейчас мы запостим два разных кода к одной и той же кнопке, вы же выберите себе тот код, функция которого понравится вам больше всего. Первый код делает скроллинг страницы вверх плавным, а второй код более быстрым и в конце происходит эффект ударения страницы и ее сотрясения. В общем прикольная штука. Прежде, чем ставить эту кнопку на свой сайт - блог удалите свои старые кнопки.
Так же добавим, что этот виджет может подойти и для других платформ не только для blogger.

Кнопка вверх для обычных тем blogger

Примечание! Данная кнопка не будет работать в новых темах blogger. Итак приступаем к установке нового виджета. Переходим в раздел Тема - Изменить HTML

 1). Здесь после тега вставьте код:



2). Ищем строку ]]>  перед, которой вставляем этот CSS код:

CSS
/* Back to top */
#easy-top{background:rgba(0,0,0,.5);text-align:center;position:fixed;bottom:15px;right:15px;cursor:pointer;width:38px;height:38px;line-height:38px;border-radius:4px;padding:4px;display:none;-webkit-transform:translateZ(0);box-sizing:initial;transition:all .3s ease-out;z-index:999999;}#easy-top:hover{background:rgba(0,0,0,.9)}#easy-top:before,#easy-top:after{-webkit-backface-visibility:hidden;box-sizing:initial;}#easy-top:before{content:'';height:8px;width:8px;display:block;border:3px solid #fff;border-left-width:0;border-bottom-width:0;transform:rotate(-45deg);-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);-ms-transform:rotate(-45deg);position:absolute;top:15px;left:18px}#easy-top:after{content:'';height:16px;width:3px;display:block;background:#fff;position:absolute;top:17px;left:22px}#easy-top:hover:after{border-color:transparent transparent rgba(0,0,0,.9)transparent}

3). Теперь приступаем к установке скрипта.

3.1). Первый вариант кнопки вверх с плавным завершением поднятия страницы. Найдите строку и перед ней вставьте следующий код:

JS

Сохраняете шаблон и проверяете работу нового виджета.

3.2). Теперь код для второй кнопки с эффектом ударения и отскока страницы сайта. Все в том же месте перед строкой