Кнопка вверх для Blogger (Blogspot)

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

<!-- MrScrollUp.Start -->
<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 id="MrScrollUp" style="display:none;"><div class="MrScrollUp1"></div><div class="MrScrollUp2"></div></div>
<!-- MrScrollUp.End -->

 

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

 

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

 

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

 

<a style="display:scroll;position:fixed;bottom:0px;right:20px;" href="#" title="Вверх"> <img border="0" alt="Back to TOP" src = "https://1.bp.blogspot.com/-Qt9ZJhK--f0/VrmEHki1k8I/AAAAAAAAB4Y/WDa9fJO2f5o/s1600/%25D0%25BA%25D0%25BD%25D0%25BE%25D0%25BF%25D0%25BA%25D0%25B0%2B%25D0%25B2%25D0%25B2%25D0%25B5%25D1%2580%25D1%2585.gif"/></a>

 

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

 

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

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

 

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

 

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

 

 

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

 

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

 

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

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

Я даю согласие на сбор и обработку своих персональных и не персональных данных согласно действующей на сайте — политике конфиденциальности.
* Нажимая на кнопку "Отправить", "Подпишись" или "Комментировать" Вы соглашаетесь с пользовательским соглашением.

Комментарии 4

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Яндекс.Метрика