Новая кнопка скроллинга вверх для сайта - блога.


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

Итак приступаем к установке нового виджета. Переходим в раздел Шаблон - Изменить HTML ищем там код ]]></b:skin>  перед которым вставляем этот 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}#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}

Теперь приступаем к установке кода первого варианта кнопки вверх с плавным поднятием страницы. Находите код </body> и перед ним вставляете  следующий код:


<div id='easy-top'/>

<script type='text/javascript'>

//<![CDATA[

$(function(){$(window).scroll(function(){$(this).scrollTop()>600?$("#easy-top").fadeIn(100):$("#easy-top").fadeOut(0)}),$("#easy-top").click(function(){$("html, body").animate({scrollTop:0},{duration:2e3,easing:"easeOutQuint"})})});

//]]>

</script>

<script src='https://cdn.rawgit.com/Arlina-Design/redvision/master/easing.js' type='text/javascript'/>
Сохраняете шаблон и проверяете работу нового виджета.

Теперь код для второй кнопки с эффектом ударения и отскока страницы сайта. Все в том же месте где </body> вместо кода выше вставляете следующий код:


<div id='easy-top'/>

<script type='text/javascript'>

//<![CDATA[

$(function(){$(window).scroll(function(){$(this).scrollTop()>600?$("#easy-top").fadeIn(100):$("#easy-top").fadeOut(0)}),$("#easy-top").click(function(){$("html, body").animate({scrollTop:0},{duration:2e3,easing:"easeOutBounce"})})});

//]]>

</script>

<script src='https://cdn.rawgit.com/Arlina-Design/redvision/master/easing.js' type='text/javascript'/>
Сохраняем шаблон смотрим на работу второго варианта.

Вот и все, если, что непонятно форма комментариев вашем расположении. В завершение добавим небольшой анонс следующей темы. В общем в ней будет идти речь о том, как добавить \ установить на сайт или блог кнопки социальных сетей для подписки на ваши группы, сообщества или страницы.


Коммент.

BLOGGER: 5
Loading...
Имя

Бесплатные шаблоны WordPress Блог Все для blogger Все для WordPress Графический дизайн Заказ сайта Заработок в интернете Инструменты для сайта Контакты Купить шаблон blogger Наши услуги Новичкам Оптимизация сайта Партнерки для сайтов Перевод статьи Плагины для WordPress Полезные сайты Полезные сервисы Полезные статьи Разделы сайта Сайты - блоги Шаблоны для Blogger Шаблоны для Joomla Шаблоны для PrestaShop Шаблоны для Ucoz Шаблоны на русском Шаблоны blogger 2016 Шаблоны blogger бесплатно Шаблоны blogger магазин Шаблоны Bootstrap 3 Шаблоны Magento best blogger templates
false
ltr
item
Шаблоны для сайтов и блогов: Новая кнопка скроллинга вверх для сайта - блога.
Новая кнопка скроллинга вверх для сайта - блога.
Blogger - blogspot, как установить новые, стильные кнопки скроллинга страниц сайта - блога вверх с прикольными эффеками..
https://3.bp.blogspot.com/-TtYsGpd6tmE/VhIzWysWgrI/AAAAAAAAh1Y/VS4CB_gVF6Y/s640/%25D0%25BA%25D0%25BD%25D0%25BE%25D0%25BF%25D0%25BA%25D0%25B0%2B%25D1%2581%25D0%25BA%25D1%2580%25D0%25BE%25D0%25BB%25D0%25BB%25D0%25B8%25D0%25BD%25D0%25B3%25D0%25B0%2B%25D0%25B2%25D0%25B2%25D0%25B5%25D1%2580%25D1%2585%2B%25D1%2581%25D1%2582%25D1%2580%25D0%25B0%25D0%25BD%25D0%25B8%25D1%2586%2B%25D1%2581%25D0%25B0%25D0%25B9%25D1%2582%25D0%25B0%2B-%2Bblogger.png
https://3.bp.blogspot.com/-TtYsGpd6tmE/VhIzWysWgrI/AAAAAAAAh1Y/VS4CB_gVF6Y/s72-c/%25D0%25BA%25D0%25BD%25D0%25BE%25D0%25BF%25D0%25BA%25D0%25B0%2B%25D1%2581%25D0%25BA%25D1%2580%25D0%25BE%25D0%25BB%25D0%25BB%25D0%25B8%25D0%25BD%25D0%25B3%25D0%25B0%2B%25D0%25B2%25D0%25B2%25D0%25B5%25D1%2580%25D1%2585%2B%25D1%2581%25D1%2582%25D1%2580%25D0%25B0%25D0%25BD%25D0%25B8%25D1%2586%2B%25D1%2581%25D0%25B0%25D0%25B9%25D1%2582%25D0%25B0%2B-%2Bblogger.png
Шаблоны для сайтов и блогов
http://www.shablonu-dlya-blogger.ru/2015/10/knopka-skrollinga-vverh-dlja-sajta.html
http://www.shablonu-dlya-blogger.ru/
http://www.shablonu-dlya-blogger.ru/
http://www.shablonu-dlya-blogger.ru/2015/10/knopka-skrollinga-vverh-dlja-sajta.html
true
5286106991494805428
UTF-8
Похожих постов не найдено Отобразить все Читать дальше Ответить Отмена Удалить By Главная Страницы Пост. Отобразить все Рекомендуем Тег Архив Поиск Все посты По вашему запросу не найдено ни одного поста Вернуться на главную Воскресение Понедельник Вторник Среда Четверг Пятница Суббота Вс Пн Вт Ср Чт Пт Сб Января Февраль Март Аперль Май Июнь Июль Август Сентябрь Октябрь Ноябрь Декабрь Янв Фев Мар Апр Май Июнь Июль Авг Сен Окт Ноя Дек только что минуту назад $$1$$ мин. назад час назад $$1$$ час. назад Вчера $$1$$ дней тому назад $$1$$ недель тому назад более 5 недель Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy