18 марта 2013 г.

Кнопка "Наверх"

Хочу рассказать вам об одной очень простой и полезной фишке для блога - кнопке "Наверх".

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

Я хоть и пользуюсь катом, но все же кнопочку поставила. Понравилось, что она появляется, только при движении вниз.

Кнопку "Наверх" можно заметить в моём блоге в правом нижнем углу, если начать пролистывать страницу. 
Примечательно, что она отражается на всех страницах и постах блога.


Чтобы добавить код кнопки:
  1. Идём в Настроить-Шаблон-Изменить HTML.
  2. Находим строчку </body> (горячие клавиши функции "Поиск" - "Ctrl+F") . 
  3. Сразу под строчкой </body> вставляем вот такой код:



4. Сохраняем шаблон.


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

Слово "Наверх" также можно заменить на то, что вам больше нравится)

Я так и сделала - изменила цвет шрифта, фона и обводки на более подходящий под дизайн моего блога. И заключила слово "Наверх" в теги <b></b> (жирный шрифт).


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

В верхней части кода есть вот такие строчки:

background-color: #EEEEEE;background-color: rgba(238, 238, 238, 0.6) - цвет фона

text-align:center;padding:5px;position: fixed;bottom:10px;right:10px; cursor:pointer;color:#444 - цвет текста

text-decoration:none;border:1px solid #C9C9C9 - цвет бордюра (обводка)

Меняя то, что выделено красным, вы можете настроить цвета кнопочки под свой блог.

111 комментариев :

  1. Лена,очень нужный пост. Обязательно попробую)))спасибо!!!

    ОтветитьУдалить
  2. ой, как полезно, спасибо)))

    ОтветитьУдалить
  3. Ага, я тоже несколько недель назад ебе такую штучку сделала. Только у меня стрелочка.

    ОтветитьУдалить
  4. Лена, спасибо!
    Кнопочка "на верх" у меня в блоге получилась. Только я так и не нашла "Находим строчку (горячие клавиши функции "Поиск" - "Ctrl+F"body".
    Я добавила гаджет "HTML/JavaScript".
    А сделать шрифт жирным у меня не получилось.

    ОтветитьУдалить
    Ответы
    1. Попозже еще поковыряюсь в настройках)

      Удалить
    2. Открыв "Изменить HTML" нужно нажать Ctrl+F (это функция поиска текста на странице), и в открывшемся окошечке ввести "< / body>". Нажать "Enter" или "Найти". Выделится искомое слово)

      Удалить
    3. Спасибо!
      Только я не могла в дизайне найти, а в шаблоне нашла.

      Удалить
  5. Лена, спасибо! Хочу такую кнопку :)

    ОтветитьУдалить
    Ответы
    1. Лена, твоим способом добавить кнопку, не получилось. Добавила через "HTML/JavaScript", на "HTML/JavaScript" есть редактор, в нем я просто слова "На верх" выделила жирным. Спасибо за подсказку :)

      Удалить
  6. Лен, спасибо! Уже добавила!
    п.с. только не в дизайне, а шаблоне меняется..."Идём в Дизайн-Изменить HTML."
    Наташа

    ОтветитьУдалить
  7. Спасибо за пост! У меня получилось))

    ОтветитьУдалить
  8. Полезная функция весьма. Спасибо за информацию. Только слово наверх вместе пишется.

    ОтветитьУдалить
    Ответы
    1. Да, верно, изначально был вариант на верх блога, убрала блог, слитно поставить забыла. Спасибо, что показали

      Удалить
    2. У себя уже тоже поставила кнопочку)) Спасибо!!!

      Удалить
    3. "На верх блога" не есть "гуд", лучше "в начало страницы". :о)

      Удалить
  9. сколько полезного для себя я нашла! Спасибище огромное!

    ОтветитьУдалить
    Ответы
    1. МАМАДАРАГАЯ! Как мне было страшно влазить в HTML! Но всё получилось! Наверное более чайникового чайника чем я представить уже не возможно, Я прям счастлива на сегодня! Леночка, СПАСИБО!

      Удалить
    2. Лен, я вот не поняла, почему в копируемый текст на этой страничке я могу внести изменения? я думала он должен быть, как бы сказать, постоянным что ли

      Удалить
    3. Наташа, в коде указаны цвета - их можно менять, это же не алгоритм) Так все настраивается в шаблонах.

      Удалить
    4. да, но на своей странице менять.А я на Вашей чего-то меняю, это же НЕ МОЯ страница

      Удалить
    5. а, это специальная форма, чтобы сразу поменять и вставить. Короче, все нормально) меняется только у вас в браузере, у меня - нет)

      Удалить
    6. Ну, слава Богу! А то вся я извелась от непонимания. Можно я потом на "ты" буду?..

      Удалить
    7. Теперь захожу к себе и... любуюсь кнопочкой НАВЕРХ, красота!

      Удалить
  10. О, я давно пользуюсь этой кнопочкой :) Очень удобно!

    ОтветитьУдалить
  11. Лена, спасибо огромное! для такого чайника, как я, очень полезный пост! ))) у меня всё получилось с первой попытки. цветом-формой кнопочки потом поиграю - сейчас некогда, но радует, что уже всё работает!)))

    ОтветитьУдалить
  12. Лена! Благодаря тебе я успешно не спала сегодня всю ночь, чтобы доделать-таки кнопки-меню)))))Я рада, что осилила. Но у меня возник вопрос. Напишу его сюда, т.к. в соответствующем посте ты можешь его не найти уже))
    Я установила свои кнопки (меню под шапкой), но почему-то около каждой из них я вижу жирную точку!! Эта точка мне не дает покоя. Когда захожу с мобильного - точек никаких нет))) Посмотри, пожалуйста, если не трудно у меня
    )))) Может быть они что-то значат, и на самом деле не видны моим гостям?
    Если же видны...Не знаешь ли ты, ЧТО нужно убрать в коде или где, чтобы от них избавиться)
    вот)))

    ОтветитьУдалить
    Ответы
    1. они видны, да. Попробуй переустановить шаблон - можно другой попробовать. Или может какой-нибудь гаджет влиять - если криво встал, только методом тыка и проб, больше не знаю способов)

      Удалить
    2. странно, у тебя отображается маркированный список таким образом. Ты код один в один копировала?

      Удалить
    3. Точно, у меня же ярлыки с таким же точками)) видимо, какая-то взаимосвязь с ними есть. Буду еще ковырять))

      Удалить
    4. хотя...у тебя ведь тоже они есть)) значит не взаимосвязь)) А код копировала один в один. А шаблон у меня обычный, simple

      Удалить
    5. Всё!!!! Я его добила)))
      Убрала в начале каждого скрипта li в угловатых скобках и точки исчезли ;)

      Удалить
  13. Спасибо большое Лена, кнопочку поставила! И как тебе удается такие вещи придумавать?

    ОтветитьУдалить
    Ответы
    1. Юль, да это не я, я просто в инете нахожу

      Удалить
    2. но надо же придумать это чтобы найти :))

      Удалить
  14. Спасибо, Елена. Нужная штука. Теперь и у меня есть эта кнопка. :).

    ОтветитьУдалить
  15. Лена, спасибо огромное!!! Все получилось с первого раза!

    ОтветитьУдалить
  16. Благодарность моя огромная!
    Мне давно такой кнопочки не хватало)

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

    ОтветитьУдалить
    Ответы
    1. почему то не вставилась ссылочка КНОПКИ НАВЕРХ

      Удалить
    2. Да, это тоже вариант. Единственное - советовала бы сохранить кнопочки у себя в веб-альбоме, чтобы не зависеть от другого сайта.

      Удалить
  18. а у меня не получается добавить кнопку..буду думать

    ОтветитьУдалить
  19. Лена, спасибо большое!
    У меня получилось сделать жирненькие буковки, а вот цвет и рамочку не склалось...Подскажешь свой код - мне бирюзовый подходит О-)

    ОтветитьУдалить
    Ответы
    1. Гала, у меня не получается вставить в комментарии код, напиши мне на почту, пжл, я тебе отправлю.А сумочка еще не дошла? чет я волнуюсь)

      Удалить
  20. Все получилось, отредактировала цвет и шрифт! Спасибо!

    ОтветитьУдалить
  21. Сейчас часто пишу и просматриваю свой блог с планшета. И такая кнопочка очень облегчает жизнь. Может и моим читателям будет полезна.

    ОтветитьУдалить
  22. Ой, большое спасибо, обязательно попробую.

    ОтветитьУдалить
  23. Лен, спасибо большое! Все сделала, все работает, давно хотела такую кнопку, только где цвет изменить не нашла :)

    ОтветитьУдалить
    Ответы
    1. Ириш, я сейчас дополню по цвету, поняла, что актуально.

      Удалить
    2. Спасибище, тебе дорогая

      Удалить
  24. Лена, спасибо за пост, уже воспользовалась :)
    Давно хотела такую кнопочку, но простенькую, что бы не бросалась в глаза, как раз как у вас.

    ОтветитьУдалить
  25. Леночка, спасибище, все получилось!

    ОтветитьУдалить
  26. Лена! Большое спасибо! У меня тоже все получилось.
    Очень полезная информация!)))

    ОтветитьУдалить
  27. Зашла тут на днях в один блог, а там такая кнопочка. И думаю:"Вот, блин, класс какой. Надо бы, чтобы кто рассказал, как ее сделать" А тут ты, Леночка, со своим постом к месту. Теперь тоже сижу и балдею, какой у меня удобный блог)))

    ОтветитьУдалить
  28. Здорово)) И у меня теперь есть такая кнопочка)) Спасибо, спасибо!!

    ОтветитьУдалить
  29. Лена, большое спасибо за пост! Теперь у меня есть такая полезная кнопочка)Цвет изменила при помощи такой таблицы может кому пригодится)


    ОтветитьУдалить
  30. Лена, спасибо, очень полезные блого-уроки :))

    ОтветитьУдалить
  31. Я тоже себе сделала, спасибо большое!

    ОтветитьУдалить
  32. Леночка, спасибо огромное за инструкцию! Очень полезная вещь, эта кнопочка!себе установила, все работает прекрасно!

    ОтветитьУдалить
  33. Спасибо большое!!!!
    Я вообще-то не очень люблю изменять особенно стандартное что-то, и если мне удобно, но эта кнопка нужная!!!! очень нужная!!! так что я ее поставила.
    Спасибо Вам!!!

    ОтветитьУдалить
  34. Лена,спасибо большое!С Вашими подсказками,всё страшное(!) становится доступным.Начинаешь верить в себя больше.Рискнула сделать свой блог после чтения статей,Ваших и Ваших клубных подруг.Вдохновляете и помогаете.Всем-Спасибище!

    ОтветитьУдалить
  35. Спасибо огромное!!! Я новичек среди блоггеров - ваша подсказка оказалась как нельзя кстати!!!!!!

    ОтветитьУдалить
  36. спасибо за совет
    Хочу пригласить на конфетку моего магазина товаров для рукоделия"МОИ ПУГОВКИ"
    http://moipugovki.ru/ezhemesyachnaya-sladost-lotereya/

    ОтветитьУдалить
  37. Лена, спасибо за пост))) подскажи пожалуйста, какая строчка в коде отвечает за быструю прокрутку? я себе эту стрелочку установила сразу, как создала блог, но вот только не пойму как сделать подъем побыстрее)) спасибо http://m-margarita-v.blogspot.ru/

    ОтветитьУдалить
    Ответы
    1. Рита, мне кажется скорость не задается в этом коде.

      Удалить
  38. Спасибо большое!!! У меня получилось!

    ОтветитьУдалить
  39. Лена, большой тебе поклон :))) Спасибо, у меня все получилось, теперь так здорово :)

    ОтветитьУдалить
  40. Лена, спасибо огромное! Попробовала-получилось,но не сразу. Утащила себе часть поста, конечно же с ссылкой на оригинал, и добавила свои коментарии для таких вот "чайников" как я. Надеюсь не заругаешь))

    ОтветитьУдалить
  41. Это СПАСИБО! Это хорошо и хорошо весьма! Давно ищу такую кнопочку! Нужно обязательно к себе утащить ;)))

    ОтветитьУдалить
  42. Огромное Спасибо! Блог становится похож на нормальный! Я и не подозревала что вообще есть "кат".
    И за это открытие спасибо!

    ОтветитьУдалить
  43. Лена, подскажите пожалуйста. Я сделала все как описано в сообщении, но моя кнопка "Наверх" не кликабельна. :( почему так получилось?

    ОтветитьУдалить
    Ответы
    1. Сохраняю шаблон, обновляю страницу и вижу кнопку "Наверх", но она все еще не кликабельна. а через время обновляю страницу и кнопки вообще нет. Почему могут быть такие сбои? :((((

      Лена, а можно еще маленький МК о том, как сделать выдвигающиеся ссылки архива на боковой панельке? :)

      Удалить
    2. Александра, можно попробовать найти другой код в инете, Их много, может именно этот идет в конфликт с вашим шаблоном.
      ПО выдвигающимся ярлыкам - да, сделаю)

      Удалить
  44. Елена, спасибо большое!!!
    Очень страшно было, если честно, даже дыхание затаила, когда код вставляла))) Но получилось! Осталось только с цветом и шрифтом разобраться)))
    СПАСИБО, ещё раз!!!

    ОтветитьУдалить
  45. Елена добрый день! Воспользовалась вашим советом и сделала себе на сайт такую кнопочку! спасибо! а подскажите еще как можно сделать чтоб в низу каждого сообщения высвечивались похожие сообщения, как это у вас сделано.

    ОтветитьУдалить
    Ответы
    1. Ирина, в Как сделать блог успешным есть об этом - раздел Наполнение блога.

      Удалить
    2. спасибо Елена! пошла изучать!!!

      Удалить
  46. Очень полезный пост! Я сразу, "не отходя от кассы" такую кнопочку и сделала. Спасибо!

    ОтветитьУдалить
  47. Этот комментарий был удален автором.

    ОтветитьУдалить
  48. Елена, спасибо за полезную статью)) Тоже себе сделала такую кнопочку.
    Только твой алгоритм действий нужно чуть исправить: код для кнопки нужно вставлять не под строчкой /body , а перед ней. Иначе ничего не получится.

    ОтветитьУдалить
  49. Спасибо больше за скрипт, очень удобно и легко настраивается. Всем советую.

    ОтветитьУдалить
  50. Лена, знаю, что пишу не в тему. Но! Как прикольно у тебя на боковой панельке скачут ярлыки. Я минут пять релаксировала проводя мышкой вверх-вниз, вверх-вниз. Я бы в тотел командер такое вставила...Класс!!! Восхищение и уважение! С намеком, что может когда-нибудь и нас научишь)
    Спасибо за твои блоггер уроки, некоторыми воспользовалась, все получается с первого раза и работает на Ура!!

    ОтветитьУдалить
  51. Видимо я самая глупенькая. Создала вчера блог. Второй день пытаюсь с ним разобраться. И вот опять... я не понимаю какой код нужно вставлять? :(

    ОтветитьУдалить
  52. Спасибо большое, Елена! Нашла ваш блог по совету одной девушки вступать в Клуб Друзей от Елены Гришиной. Отметилась, стала ПЧ, а потом начала изучать и остальные посты. Очень понравились Bloger уроки, даже в специальном разделе разместила ссылку на них Это интересно некоторые сразу же постаралась использовать в своем блоге http://psv-handmade.blogspot.com Заходите в гости, буду очень рада!

    ОтветитьУдалить
  53. Лена, спасибо вам большое. Теперь и у меня все как у людей. Отдельное спасибо за вдохновение - я приведенный вами скрипт переделала немного, чтобы вместо кнопки с текстом отображалось выбранная картинка. Сначала хотела в комментариях написать как, но потом поняла, что мой мыслительный поток здесь все запрудит. Так что пришлось отдельным постом.

    ОтветитьУдалить
  54. Леночка! Я почти ничего не поняла из того, что Вы тут понаписали, но кнопку каким-то образом сделать удалось. Благодарю сто тыщ раз! Эта кнопочка кажется мне мега-полезной)))

    ОтветитьУдалить
  55. ps С удовольствием становлюсь Вашим постоянным читателем и почитателем )))

    ОтветитьУдалить
  56. Лена, огромное Вам человеческое СПАСИБО! У самой все руки не доходили (хотя, если честно, просто не могла себя заставить - лень победила), каждый раз откладывала на потом написание кода. А тут у Вас в готовом виде. Не могу словами описать свою признательность. Талантливый человек талантлив во всем - это точно про Вас.

    ОтветитьУдалить
  57. Клааааааас!!! как же мне не хватало этой кнопки! СПАСИБО!

    ОтветитьУдалить
  58. Спасибо! Только я не стала менять шаблон, а вставила кнопку через Дизайн/хтмл

    ОтветитьУдалить
  59. Спасибо за информацию! Очень удобная кнопочка, раз попробовать и без нее уже никак! )

    ОтветитьУдалить
  60. Елена, спасибо большое! Не могу без этой кнопки в других блогах, теперь она есть и у меня.

    ОтветитьУдалить
  61. Большое спасибо, Елена. Очень ценная информация.

    ОтветитьУдалить
  62. Большое спасибо, Елена. Очень ценная информация.

    ОтветитьУдалить
  63. Огромное спасибо! Даже для ооочень начинающего блоггера вполне доступно! С цветами только разобраться осталось... ))

    ОтветитьУдалить
  64. Ураа, получилось!! Давно мечтала о такой кнопочке, потому как у меня частенько бывают длинные посты-спасибо огромное!

    ОтветитьУдалить
  65. Спасибо за возможность установить эту чудо-кнопку!

    ОтветитьУдалить
  66. Благодарю вас за пост, очень полезная кнопочка.
    Только код надо ставить не после body, а ДО /body .
    Иначе кнопочка прячется за статьей и гаджетами.

    ОтветитьУдалить
  67. ввожу /body, а у меня пишет, что нет соответствий (((

    ОтветитьУдалить

Я с большим удовольствием читаю ВСЕ ваши комментарии! Спасибо!!!