Главная x Blogger виджеты

Кнопка вверх на CSS для HTML сайтов Blogger, WordPRess и др.


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

Кнопка вверх для обычных тем blogger

Примечание! Данная кнопка не будет работать в новых темах blogger. Итак приступаем к установке нового виджета. Переходим в раздел Тема - Изменить HTML

 1). Здесь после тега <head> вставьте код:

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" type="text/javascript"/>

2). Ищем строку ]]></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;z-index:999999;}#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}

3). Теперь приступаем к установке скрипта.

3.1). Первый вариант кнопки вверх с плавным завершением поднятия страницы. Найдите строку </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'/>
Сохраняете шаблон и проверяете работу нового виджета.

3.2). Теперь код для второй кнопки с эффектом ударения и отскока страницы сайта. Все в том же месте перед строкой </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

1). Проделываем тоже самое, что указано в первом пункте по установке кнопки для обычных тем.

2). Ищем строку ]]></b:skin>  перед, которой вставляем этот CSS код:

.smoothscroll-top {
    position:fixed;
    opacity:0;
    visibility:hidden;
    overflow:hidden;
    text-align:center;
    z-index:99;
    background-color:#2ba6e1;
    color:#fff;
    width:47px;
    height:44px;
    line-height:44px;
    right:25px;
    bottom:-25px;
    padding-top:2px;
    border-radius:5px;
    transition:all 0.5s ease-in-out;
    transition-delay:0.2s;
}
.smoothscroll-top:hover {
    background-color:#3eb2ea;
    color:#fff;
    transition:all 0.2s ease-in-out;
    transition-delay:0s;
}
.smoothscroll-top.show {
    visibility:visible;
    cursor:pointer;
    opacity:1;
    bottom:25px;
}
.smoothscroll-top i.fa {
    line-height:inherit;
}



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

3.1). Кнопка с обычным эффектом:
<div class="smoothscroll-top">
    <span class="scroll-top-inner">
        <i class="fa fa-2x fa-arrow-circle-up"></i>
    </span>
</div>
<script type='text/javascript'>
//<![CDATA[
$(function(){
 
    $(document).on( 'scroll', function(){
 
        if ($(window).scrollTop() > 100) {
            $('.smoothscroll-top').addClass('show');
        } else {
            $('.smoothscroll-top').removeClass('show');
        }
    });
 
    $('.smoothscroll-top').on('click', scrollToTop);
});
 
function scrollToTop() {
    verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0;
    element = $('body');
    offset = element.offset();
    offsetTop = offset.top;
    $('html, body').animate({scrollTop: offsetTop}, 600, 'linear');
}
//]]>
</script>


3.2). Кнопка с эффектом ударения:
<div class="smoothscroll-top">
    <span class="scroll-top-inner">
        <i class="fa fa-2x fa-arrow-circle-up"></i>
    </span>
</div>
<script type='text/javascript'>
//<![CDATA[
$(function(){
 
    $(document).on( 'scroll', function(){
 
        if ($(window).scrollTop() > 100) {
            $('.smoothscroll-top').addClass('show');
        } else {
            $('.smoothscroll-top').removeClass('show');
        }
    });
 
    $('.smoothscroll-top').on('click', scrollToTop);
});
 
function scrollToTop() {
    verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0;
    element = $('body');
    offset = element.offset();
    offsetTop = offset.top;
    $('html, body').animate({scrollTop: offsetTop}, 600, 'linear').animate({scrollTop:25},200).animate({scrollTop:0},150) .animate({scrollTop:0},50);
}
//]]>
</script>

Сохраните тему.

Новая кнопка Вверх и Вниз для блога на Blogger

Друзья предлагаю вам испытать новую кнопку скроллинга страниц блога Вверх и Вниз. Теперь вашим читателям будет еще проще при чтении публикаций. Новый виджет отображает сразу две кнопки одна из них отвечает за скроллинг вверх, а другая соответственно за скроллинг вниз. Посмотреть ДЕМО. Для установки виджета скачайте файл с установочными кодами, дальнейшие инструкции смотрите на видео:

Кнопка вверх на CSS для HTML сайтов

Так же можно сделать кнопку с плавной прокруткой страницы только с помощью HTML и CSS без использования javascript:

Код кнопки: 
<a class='ontop' href='#'> ⇧ </a>
html{scroll-behavior:smooth; transition: ease 3s;}
.ontop{position:fixed; background:#F22613; color:#fff; bottom:80px; right:20px; padding:8px; border-radius:5px; width:20px;}
.ontop:hover{background:#333;}

Виджет скроллинг блога в процентах


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

Для установки этой функции необходимо перейти в раздел Шаблон - Изменить HTML нажать CTRL+F и найти код ]]></b:skin> перед которым нужно вставить следующий код:

#scroll {
  display:none;
  position:fixed;
  top:0;
  right:15px;
  z-index:500;
  padding:3px 8px;
  background-color:#369fcf;
  color:#fff;
  border-radius:3px;
  font-size:14px;  
}
#scroll:after {
  content: " ";
  position: absolute;
  top:50%;
  right:-10px;
  height:0;
  width:0;
  margin-top:-6px;
  border:6px solid transparent;
  border-left-color:#369fcf;
}

Затем ищем код </head> и после него вставляем: 
<div id='scroll'></div>

И финальный аккорд находим </body> и перед ним вставляем:

<script type='text/javascript'>
//<![CDATA[
var scrollTimer = null;
$(window).scroll(function() {
   var viewportHeight = $(this).height(),
       scrollbarHeight = viewportHeight / $(document).height() * viewportHeight,
       progress = $(this).scrollTop() / ($(document).height() - viewportHeight),
       distance = progress * (viewportHeight - scrollbarHeight) + scrollbarHeight / 2 - $('#scroll').height() / 2;
    $('#scroll')
        .css('top', distance)
        .text(' (' + Math.round(progress * 100) + '%)')
        .fadeIn(600);
    if (scrollTimer !== null) {
        clearTimeout(scrollTimer);
    }
    scrollTimer = setTimeout(function() {
        $('#scroll').fadeOut(600);
    }, 1000);
});
//]]>
</script>

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


2 Коммент.
Поделиться в социальных сетях:
Facebook Twitter Vkontakte

Рекомендуем

2 Коммент.

avatar
Chitaytedetyamknigi
января 05, 2022

Установил кнопку "вверх-вниз", работает, но стрелочек нету, просто два кружочка белые.

Ответить
avatar
Mark Korvin
января 05, 2022

Подключите иконки fontawesome 4.7
https://www.shablonu-dlya-blogger.ru/2017/01/Ikonki-font-awesome-css-kak-podkljuchit.html

Ответить