
Признаюсь, что не эту тему хотела поднять. Но если уж это юбилейный пост, пусть он будет таким, каким вы его видите. Хотя информации в сети, как установить кнопку вверх на блоге пруд пруди, я сделала свою подборку этих стрелок. И дарю вам, мои дорогие читатели, 10 вариантов кнопочек на вкус и цвет.
1.Красная кнопка

http://s019.radikal.ru/i628/1408/ed/c46142277b4d.png
2.Зелёная кнопка

http://s020.radikal.ru/i708/1408/6b/e361972f8aee.png
3.Синяя кнопка

http://s017.radikal.ru/i421/1408/95/d8493e2236ec.png
4.Анимированная кнопка

http://s019.radikal.ru/i634/1408/2a/17c62fc3f6ad.gif
5.Кнопка в стиле котэ

http://s019.radikal.ru/i618/1401/11/dbacc5f6df13.png
6.Глянцевая кнопка.

http://s019.radikal.ru/i606/1408/8c/9fa5e8543103.png
7.Серая кнопка.

http://i038.radikal.ru/1408/4e/7ae19510ec96.png
8.Голубая глянцевая кнопка

http://s017.radikal.ru/i409/1408/8c/323e6b0f3dd3.png
9.Кнопка в стиле Web

http://s019.radikal.ru/i639/1408/8b/359f1a2aba66.png
10. Большая кнопка.

http://s019.radikal.ru/i622/1408/df/3d555e53c795.png
Если определились с выбором, копируйте код расположенный ниже и вместо слов ваша ссылка вставляйте адрес выбранного варианта. Если есть свои стрелочки, код тоже сгодится.
Код
<script type="text/javascript" > var smoothJumpUp = function() { if (document.body.scrollTop>0 || document.documentElement.scrollTop>0) { window.scrollBy(0,-50); setTimeout(smoothJumpUp, 20); } } </script> <div id="topcontrol" style="position: fixed; z-index: 100500; bottom: 5px; right: 5px;
cursor: pointer; opacity: 1; " title="вернуться в начало"> <a href="javascript:smoothJumpUp()"> <img src="ваша ссылка"/> </a> </div>
Когда всё готово заходим в панель администратора-добавить гаджет-HTML/JavaScript и устанавливаем туда этот код. Переместите гаджет в самый низ страницы. Сохраните расположение и просмотрите результат.
Ещё вариант, появляющейся при прокрутке страницы кнопки на jQuery. Код устанавливаем так же в гаджет.
<style type="text/css"> #w2b-StoTop {-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px; width:100px;background-color: #EEEEEE;background-color: rgba(238, 238, 238, 0.6);filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#99EEEEEE',EndColorStr='#99EEEEEE');text-align:center;padding:5px;position:fixed;bottom:10px;right:10px;cursor:pointer;color:#444;text-decoration:none;border:1px solid #C9C9C9;} </style> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> <script type='text/javascript'> $(function() { $.fn.scrollToTop = function() { $(this).hide().removeAttr("href"); if ($(window).scrollTop() != "0") { $(this).fadeIn("slow") } var scrollDiv = $(this); $(window).scroll(function() { if ($(window).scrollTop() == "0") { $(scrollDiv).fadeOut("slow") } else { $(scrollDiv).fadeIn("slow") } }); $(this).click(function() { $("html, body").animate({ scrollTop: 0 }, "slow") }) } }); $(function() { $("#w2b-StoTop").scrollToTop(); }); </script> <a href='#' id='w2b-StoTop' style='display:none;'>Вверх </a>.
Удачи всем нам.
оформите подписку на новые шпаргалки
ПОЗДРАВЛЯЮ С 100 СТАТЬЕЙ, ЭТО ЗАМЕЧАТЕЛЬНАЯ И ВЕЛИКАЯ ЦИФРА! ОТ ВСЕЙ ДУШИ ЖЕЛАЮ ПРОЦВЕТАНИЯ И УСПЕХОВ ВАШЕМУ БЛОГУ!!!!
ОтветитьУдалитьА ЕЩЕ, БОЛЬШОЕ СПАСИБО ЗА ЭТУ ТЕМУ, Я ТАК ДАВНО ХОТЕЛА СДЕЛАТЬ КНОПОЧКУ, НО РУКИ НИ КАК НЕ ДО ХОДИЛИ))) ПРИКАРМАНИЛА СЕБЕ ВАШУ КИСКУ:)
Вика, спасибо за такую полезную информацию! :) Мне уже пригодилась! :))
ОтветитьУдалитьХорошего тебе дня! :)
Девчонки это вам спасибо. Аня, с киской небольшая накладка. Переведи в PNG, лучше будет смотреться.
ОтветитьУдалитьЗдравствуйте Вика. С удовольствием поздравляю Ваш блог с юбилеем! С удовольствием читаю Ваши шпаргалки, беру на заметку, использую. Спасибо Вам!
ОтветитьУдалитьВика, привет! С первым юбилеем тебя и твой блог! Радывай))) нас своими шпаргалками по чаще!!!
ОтветитьУдалитьЛюдмила Геннадьевна, спасибо Вам за добрые слова.И за поздравления.
ОтветитьУдалитьИрина, приятно принимать поздравления. Очень. Спасибо тебе и всем моим читателям. Огромное.
ОтветитьУдалитьВика поздравляю тебя с 100! И спасибо за твой труд и вклад в блогостроении. Судя по количеству отзывов, твои статьи помогают блоггерам в оформлении и ведении блогов, а это самая благодарная награда. Так держать!
ОтветитьУдалитьОля, спасибочки. Твоими бы устами... А ты бы не скромничала. Твоей работоспособностью остаётся только удивляться.
ОтветитьУдалитьВика, спасибо! Кнопочку установила! Красота)))
ОтветитьУдалитьТанюшка Таня, Пожалуйста. Пользуйтесь.
ОтветитьУдалитьКнопка с котом это просто luxury! она мне очень подойдет для нового сайта. Спасибо Вика! Поздравляю с первой сотней, желаю яркого развития твоих блогов и добрых, взаимных, любимых читателей!
ОтветитьУдалитьАксинья. Спасибо за поздравления и пожелания. Удачи тебе тоже.
ОтветитьУдалитьВсе норм, только открытая внешняя ссылка получается.
ОтветитьУдалитьЭтот All-blogspot очень хитер :>
Рамазан, но у меня и правда не открывается ваша карта. Вы какой код установили-тот что опубликовали у себя в блоге?
ОтветитьУдалитьЯ тут имел ввиду кнопку вверх.
ОтветитьУдалитьА карта использую первый вариант.
Я понял в чем проблема. Оказывается в браузере chrome не открывается. В яндексе все работает.
ОтветитьУдалитьДа, Рамазан. Я в хроме работаю. Тоже была такая мысль.
ОтветитьУдалитьВика,здравствуйте!Большое спасибо!взяла у Вас киску,всё хорошо...но возможно ли эту кнопку разместить с левой стороны?
ОтветитьУдалитьСветлана, многим эта киса по душе пришлась. Чтобы сделать слева поменяйте в коде значение right: 5px; на left. Ну и с отступом 5px придётся поиграться. Возможно другое.
УдалитьА как сделать, чтобы кнопка была не всё время, а появлялась, только когда немного прокрутить страницу вниз (как у вас на блоге)? Спасибо.
ОтветитьУдалитьBlogAdmin, Поиграйтесь с этим параметром scrollTop>0), допустим так scrollTop() > 1000)
ОтветитьУдалитьВика, изменил значение scrollTop>0) на scrollTop() > 1000) — не получилось, всё по-прежнему. Пробовал также менять scrollTop>0) на scrollTop>1000). Шаблон сохранять не забывал. :)
ОтветитьУдалитьBlogAdmin, тут нужен код на jQuery. Дописала пост, добавила ещё вариант. И ещё один есть в этом сообщении.
ОтветитьУдалитьhttp://www.shpargalochki.ru/2015/10/knopka-vverh-kak-v-VK-dlja-Blogger.html
Виктория, это опять я! Все корректно работает!!! Все очень нравится, спасибо за Ваш труд для нас- чайников)))))))
ОтветитьУдалитьЛюдмила, Главное просто устанавливается. И блог веселее стал.
Удалить