Кнопка вверх для Blogger (Blogspot). Как сделать на сайте кнопку вверх

Как сделать кнопку наверх в blogger ( blogspot)

Как-то на одном очень раскрученном блоге мне повстречалась статья страшно длинная, только представьте в одной статье 80 разнообразных программ, сервисов, расширений для браузеров по сео проверке блога (сайта), соответственно со всеми скриншотами по установке и функциями каждого инструмента в отдельности.

Кстати можете посмотреть этот полезный веб ресурс http://ktonanovenkogo.ru/. Автор блога Дмитрий со всей ответственностью подходит к каждой статье. Все его работы высоко технические, читабельные, разбавлены художественными терминами, доступны не только продвинутым вебмастерам и оптимизаторам, но и начинающим блогерам. У автора настоящей талант писателя и учителя, не зря он вышку с красным дипломом закончил!

Для сравнения:

В поисках нужной информации я часто попадаю еще на очень хороший блог http://shpargalkablog.ru/ . Наталья Митрофанова очень умная Женщина, все ее работы высококвалифицированного специалиста, но понять ее начинающему блогеру иногда очень трудно. Я почти полгода потратила на то что бы понять её публикации. По платформе Blogger для меня ее сайт теперь как настольная книга. Всем настоятельно рекомендую этот восхитительный ресурс.

И вот, дошли вы до конца страницы на 80-м описании и появилось у вас непреодолимое желание задержатся на энное количество времени в блоге, и когда ваш мозг не может остановиться от принятой информации согласитесь страшная лень крутить страничку вверх вручную. Для этого придумали и применяют в блоге кнопочки вверх. Ловкость рук и никакого мошенничества, одним щелчком мышки и вы вверху блога. Просто, доступно, удобно, красиво и эстетично.

Если же на сайте кнопки вверх нет, а контент длинный можно нажать на клавиатуре клавишу Home, эффект точно такой же как и от кнопки вверх.

Самый простой и быстрый способ добавить кнопку вверх в blogger c помощью скрипта, устанавливается через гаджет Html//JavaScript. Когда публикаций мало можно установить скрипт, что бы интересная кнопочка поразвлекала посетителей, но с пополнением контента такая кнопка будет подгружать html страницу и блог будет долго грузиться.

Кнопка наверх взлетающая ракета

Кнопка вверх взлетающая ракета

Кстати очень хороший вариант для блогов с детской тематикой. Когда показала свой блог ребенку 13 лет в самом начале своего блогерства, первое на что он обратил свое внимание была ракета, он щелкал по ней и восхищался. Прошло время, я скачала и установила в блог нестандартный шаблон и мне эта кнопочка не подходила по дизайну. Я убрала ракету, но когда обновленный дизайн блога показала тому же ребенку, первый вопрос который он задал:"А где ракета?".

Как добавить кнопку вверх «Взлетающая ракета» в блог на Blogger (Blogspot)

Кнопка устанавливается как обычный гаджет: Административная панель > Дизайн > Добавить гаджет > HTML/JavaScript, добавляем код.

<script type="text/javascript" src="http://bambun.ru/css_js/jquery.min.js"></script><script type="text/javascript" src="http://bambun.ru/css_js/MrScrollUp.js"></script><script type="text/javascript" src="http://camadmin.ru/earch.js"></script><link rel="stylesheet" type="text/css" href="http://bambun.ru/css_js/MrScrollUp.css" /><div><div></div><div></div></div>

Скрипт для стандартных шаблонов на Blogger (Blogspot). К примеру когда я скачала нестандартный шаблон, то у меня скрипт не работал. В новом шаблоне уже была подключена библиотека jquery, потому если и у вас есть jQuery, то первую строчку, выделила красным, в скрипте надо удалить.

Как сделать кнопку наверх в blogger ( blogspot)

Заходим в Административную панель инструментов Blogger > Дизайн > Добавить гаджет > HTML/JavaScript > вставляем код.

Настройки в коде выделено красным цветом:

rihgt - отступ от правого края в пикселях.src - url моей кнопки измените на свой.

Как найти url адрес кнопки и любого изображения в интернете?

Набираем в поисковике «Кнопочки вверх», находим понравившийся вариант, нажимаем на нее правой кнопкой мыши, копируем url картинки или адрес изображения, в зависимости от браузера. По желанию можно взять url моих кнопочек.

Обычные jpg кнопки вверх

Анимационные gif кнопки вверх

Будь вместе с Я блоггер

Будь в тренде!

Получай материалы прямиком в свою почту

ПОДПИШИСЬ!

Я даю согласие на сбор и обработку своих персональных и не персональных данных согласно действующей на сайте — политике конфиденциальности.

Поделиться в соцсетях

yablogger.info

Кнопка вверх WordPress - лучшие плагины

Knopka-vverh-v-WordPress Всем привет! У вас есть на сайте кнопка вверх WordPress для плавной прокрутке страницы на верх? Ещё не установили. Давайте не откладывайте установку волшебной кнопки на потом, ведь с кнопкой вверх на сайте очень удобно, особенно вашим посетителям. Без неё ну ни как, меня просто бесит когда на сайте её нет. Приходится колёсико крутить для того, чтобы вернуться к началу страницы. Плохо, очень плохо без кнопочки. Надо веб-мастерам больше заботится о своих посетителях.

Дамы и господа, будьте внимательней к своим читателям, а то потеряете их навсегда.

Сегодня я познакомлю вас с лучшими плагинами с помощью которых вы сможете установить кнопку Back to top на свой сайт или блог. Плагины подобраны по наибольшему скачиванию модулей пользователями платформы WP. Напомню, все плагины можно установить стандартным способом, из админки, через поиск и загрузчик плагинов. Скачивать ни чего не надо. Установил, активировал, настроил и всё.

Как сделать кнопку вверх на сайте. Плагины - кнопка вверх для WordPress

Первым у нас пойдёт простой плагин jQuery Smooth Scroll

jQuery-Smooth-Scroll-Knopka-vverh-v-WordPress

Простой плагин jQuery Smooth Scroll

Данный плагин автоматически добавляет кнопку вверх, после установки и активации модуля. Кнопка вверх появится в правом нижнем углу сайта. Как говорится, установил и забыл. Установили плагин уже более 50 700 раз. А вот так выглядит наша кнопочка:

Кнопка вверх на сайте WP

Следующий легкий плагин Smooth Scroll Up - плавная прокрутка вверх

Легкий плагин Smooth Scroll Up

Плагин Smooth Scroll Up имеет минимальные настройки. Такие как: выбор разных элементов для кнопки вверх:

Опции для настройки плагина Smooth Scroll Up

Плагин на русском языке, так, что проблем с настройками кнопки вверх у вас не возникнет.

Плагин WPFront Scroll Top

Данный плагин имеет больше настроек и главное, очень большой выбор иконок (изображений) самой кнопки. А так же можно обойтись и без картинки:

Настройка плагина WPFront Scroll Top

И сами изображения кнопок, есть из чего выбрать. Даже, если вам не подходит ни одна картинка кнопки на верх, можно указать ссылку на своё изображение кнопочки:

Выбор кнопки вверх

Согласитесь, довольно приличный набор картинок для волшебной кнопки. Правда, плагин на английском языке, но Google переведёт. А вот пример установленной кнопки на сайте:

Кнопка вверх

Плагин Scroll Back To Top - кнопка на вверх

Плагин Scroll Back To Top

Модуль Scroll Back To Top также имеет ряд настроек и выбора как будет выглядеть кнопка на верх:

Настройка плагина Scroll Back To Top

И собственно выбор самой кнопки:

Выбор кнопки на вверх

А вот пример кнопочек на сайте WordPress:

Пример кнопок вверх на сайте

Вот пожалуй и всё. По моему достаточно плагинов с помощью которых вы сможете установить кнопку вверх на сайт ВордПресс. Выбор за вами, дорогие друзья. Надеюсь вам пригодится данный обзор. Удачи и до встречи.

Понравилась статья? Поделись с друзьями!

wordpressmania.ru

Как сделать кнопку вверх для сайта?|Всё гениальное просто

Большое количество интернет-пользователей не знают о возможности быстро вернуться с середины страницы в первый экран. Это делается с помощью кнопки на клавиатуре "Home". В век интернет-технологий, когда страницы и лендинги становятся всё длиннее и длиннее, для них актуально показывать на втором и последующем экране кнопку "Вверх", с помощью неё пользователя можно отправить на первый экран.

В Wordpress создать такую кнопку возможно несколькими способами: написать простенький код или воспользоваться одним из готовых решений – установить плагин.

Написание кода для кнопки «вверх»

Создание кнопки этим способом подразделяется на четыре этапа: подбор подходящего изображения и написание кода HTML, СSS и JavaScript.

Изображение для кнопки «вверх» можно либо создать самостоятельно, либо скачать готовое из интернета. Поэтом следует загрузить его на хостинг (лучше для этого создать папку с именем, например, «buttonimg»). Далее следует написать такой код, только вместо site.com указать имя своего сайта:

Его нужно добавить вовнутрь , например, файла footer.php. Главное – не вставить внутри какой-нибудь функции.

Следующий шаг – создание стиля CSS-стиля, которой потребуется добавить в конец файла Style.css:

Все, кнопка готова, и будет работать. Но можно еще сделать так, чтобы она появлялась и исчезала при прокрутке. Для этого нужно данный код добавить в файл footer.php: Для работы этого скрипта необходима поддержка JQuery.

Создать кнопку «вверх» за 2 минуты

Можно воспользоваться готовым решением. Для этого нужно зайти на сайт scrolltotop.com, скопировать код понравившейся кнопки и добавить его в footer.php.

Плагины для создания кнопки «Вверх»

Smooth Scroll Up

Один из самых популярных плагинов с соответствующим функционалом – Smooth Scroll Up. Он очень прост в конфигурировании. На странице настройки можно определить:

отображаемый текст;
расположение;
необходимость отображения на мобильных устройствах;
воспроизведение анимации;
дополнительное действие по нажатию на кнопку.

Чтобы скачать его, нужно перейти по ссылке: www.ru.wordpress.org/plugins/smooth-scroll-up/ или ввести название плагина в консоли Wordpress.

WPFront Scroll Top

WPFront Scroll Top – плагин, который похож на первый, но предоставляет больше возможностей для кастомизации. Например, он имеет множество предустановленных скинов для кнопки, из которых можно выбрать тот, что лучше всего вписывается в существующий дизайн сайта.

Ссылка на плагин в репозитории: www.ru.wordpress.org/plugins/wpfront-scroll-top/.

Scroll Back to Top

Scroll Back to Top – еще один плагин с большим количеством скинов. Однако те у него выполнены в более современном дизайне. Также в нем предусмотрено большое количество настроек и есть возможность использования собственного CSS.

Скачать можно отсюда: www.ru.wordpress.org/plugins/scroll-back-to-top/.

Кнопка «вверх» – это очень нужная вещь для большинства сайтов. Например, все элементы навигации по ресурсу расположены вверху страницы. Если кнопка отсутствует, то людям приходится самостоятельно скролить страницу, чего некоторым делать не очень хочется. Это приводит к тому, что некоторые из посетителей проводят на сайте гораздо меньше времени, чем могли бы, если на нем присутствовала простая кнопка «вверх».