0

Инсталиране на Progress Scrollbar в Blogger

Progress Scrollbar в Blogger
Здравейте, всички! Преди месец ви запознах как да инсталирате в блога си Rainbow Progress Bar, онази бързо зареждаща се с цветовете на дъгата лента в горната част на блога. От нейното състояние правим извод за бързината на зареждане на страницата в блога ни.


    Но ако искате блога ви да изглежда по-добре, по-красив, ви съветвам да инсталирате и Progress Scrollbar.

    Какво представлява лентата за превъртане Progress Scrollbar?

    Подобно на Rainbow Progress Bar лентата за превъртане Progress Scrollbar е хоризонтална, но едноцветна линия, чиято дължина нараства с напредване скролирането по страницата. Колкото по-близо до края на страницата е потребителят, толкова е по-дълга е тази хоризонтална едноцветна линия. Когато сме в края на страницата линията Progress Scrollbar изпълва цялата ѝ ширина.



    Инсталиране

    Тези от вас, които се интересуват от инсталирането на Progress Scrollbar, могат да следват съветите ми по-долу.

    ➤Отворете панела на Blogger ➔ Кликнете върху менюто Теми ➔ Редактирайте HTML;

    ➤Ще добавим три кода на чист JavaScript на три места на Темата.

    Кодове

    Код преди </body>


    С този и следващия код ще осигурим появяването на Progress Scrollbar в тялото на блога. Копирайте и инсталирайте без промяна.

    <script type='text/javascript'>
    //<![CDATA[
    // Progress Scrollbar
    $(document).ready(function(){var n=function(){return $(document).height()-$(window).height()},o=function(){return $(window).scrollTop()};if("max"in document.createElement("progress")){(r=$("progress")).attr({max:n()}),$(document).on("scroll",function(){r.attr({value:o()})}),$(window).resize(function(){r.attr({max:n(),value:o()})})}else{var e,t,r=$(".progress-bar"),i=n(),c=function(){r.css({width:(e=o(),t=e/i*100,t+="%")})};$(document).on("scroll",c),$(window).on("resize",function(){i=n(),c()})}});
    //]]>

    </script>



    Код преди <body>


    <progress value='0' max='1'>
    <div class='progress-container'>
    <span class='progress-bar'></span>
    </div>

    </progress>


    Код преди </head>

    Този код определя стиловете на Progress Scrollbar, които можете да промените според вашето желание и дизайна на блога си.


    <style type='text/css'>
    /* Progress Scrollbar */
    progress{position:fixed;left:0;top:0;width:100%;height:3px;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;background-color:transparent;color:#f39c12;z-index:1000}
    progress::-webkit-progress-bar{background-color:transparent;z-index:10}
    progress::-webkit-progress-value{background-color:#f39c12;z-index:10}
    progress::-moz-progress-bar{background-color:#f39c12;z-index:10}
    .progress-container{width:100%;background-color:transparent;position:fixed;top:0;left:0;height:3px;display:block;z-index:10}
    .progress-bar{background-color:#f39c12;width:0%;display:block;height:inherit;z-index:10}

    </style>


    ➤В червено е маркирана дебелина на лентата Progress Scrollbar;

    ➤В синьо са маркирани местата в кода, с които се определя цвета на Progress Scrollbar. Съобразете се с дизайна на блога си;

    Съветите ми днес може да не са много важни, но се надявам да са полезни.


    За въпроси моля, в коментарите. А може и на тази страница. Ще съм благодарна да оцените моя труд и кликнете върху звездичките по-долу. Или гласувайте за блога ми на:

    BGtop

    Здраве за всички вас! Не забравяйте да правите добро на други хора!

    Няма коментари :

    Публикуване на коментар


    Copyright © БЛОГ ЗА БЛОГОВЕ©2016- | All Rights Reserved
    Използването на Blogzablogove.com означава, че сте съгласни с нашата Политика на конфиденциалност и защита