Новое в блоге
Loading...
20 дек. 2011 г.

Как добавить Query Loader (загрузчик) для Blogger

Всем привет! Сегодня в нашей школе очень интересная тема. Добавление скрипта QueryLoader (LazyLoad) для Blogger и настройка его. Что такое QueryLoader (LazyLoad). Немного объясню как смогу. При заходе  посетителя на блог  появляется QueryLoader черный, серый, белый (может быть изменен) экран. Который прикрывает Ваш блог, пока все содержимое, загружается, а это значит, что ваши посетители не увидят фактическую загрузку (некоторые блоги долго загружаются) вашего блога. Вместо  этого, они увидят страницу с баром и проценты от общей загрузки блога. Ой, трудновато описать. Айда смотреть в демонстрационный блог. Замечательный скрипт очень подойдёт для блогов, которые долго загружаются.Чтобы посетителям не скучно было, пусть смотрят проценты загрузки Вашего блога. Это интересней, чем смотреть пока еле-еле появляются части блога.

Добавление скрипта QueryLoader(загрузчик)'LazyLoad'для Blogger и настройка

В этом шаге мы добавим скрипты файлов в Ваш шаблон. Пожалуйста, перейдите  Шаблон -- Изменить HTML и найдите, следующий код: </head> и над ним вставьте следующий script код:
<script src='http://code.jquery.com/jquery-1.5.min.js' type='text/javascript'/>
<script src='http://blogger-loader.googlecode.com/files/queryLoaderpre.js' type='text/javascript'/>
Далее найдите другую строчку: </body> и над ней вставьте код:
<script>
QueryLoader.selectorPreload = &quot;body&quot;;
QueryLoader.init();
</script>
Теперь добавим стили скрипта QueryLoader, найти нужно участок кода: ]]></b:skin> и перед ним вставляем стиль кода:

.QOverlay {
background-color: #000000;
z-index: 9999;
}

.QLoader {
background-color: #CCCCCC;
height: 1px;
}

.QAmt {
color:#FF530D;
font-size:50px;
font-weight:bold;
line-height:50px;
height:50px;
width:100px;
margin:-60px 0 0 -50px;
}

Теперь нажмите кнопку "Просмотр" и если всё окей сохраните шаблон.Теперь У Вас есть супер скрипт Query Loader(загрузчик) для Blogger. Если Вы хотите изменить цвет, вам придется изменить значения в коде CSS :

 background-color: #000000;--цвет фона Query Loader
 background-color: #CCCCCC;--цвет бара загрузчика
 color:#FF530D;--цвет  нумерации показа процентов
Вот и весь процесс. Всего доброго. Прошу не забывайте подписаться, чтобы узнавать о новых скриптах, виджетах и т.д.

Вам может нужно -- как скрыть текст под спойлер или как добавить "хлебные крошки" в блог на Blogspot 

Ух ты кнопочки! Понравилась статья? Поделитесь с друзьями:

17 коммент. :

  1. Кстати, скажи, мой блог быстро загружается? 
    http://www.bvb-russia.com/ Я к тому, что у меня-то Интернет нормальный, а как у тебя происходит загрузка моего блога? Мне стоит ставить виджет этот или нет? Что посоветуешь? :)

    ОтветитьУдалить
  2. Загрузился  нормально.Пока не надо.Это я думаю когда совсем долго ждать приходится.По моему мнению,тебе можно чуть чуть освободить блог от крутящегося шара.ЛАВ ТРАФФИК ФИД ДОСТАТОЧНО БУДЕТ.

    ОтветитьУдалить
  3. Да, но кстати, Live traffic feed вообще заметил некорректно отображает и он не показывает, сколько человека онлайн. Вот зашел на сайт, крутящ.шар показывает, 3 человека из России онлайн, в лайв траффик же данные не отображаются так же, что 3 человека онлайн.

    ОтветитьУдалить
  4. забыл добавить: спасибо за советы по блогу )

    ОтветитьУдалить
  5. Я вчера статью прочитал у иностранцев,советы хорошие как ускорить загрузку блога.Хочу тоже может сегодня напечатать.

    ОтветитьУдалить
  6. думаю, я и др.посетители с радостью ознакомяться. Вещь в любом случае нужная :)

    ОтветитьУдалить
  7. всё нормально, только из-за того что у меня в статье одной есть видео, перед загрузкой она появляется на экране..(

    ОтветитьУдалить
  8. Ну здесь не чего не поделаешь.

    ОтветитьУдалить
  9. Здравствуйте) Проблема у меня...( В общем то всё получилось, но как только я это поставил, у меня перестали работать слайд-картинки( я выяснил, из-за чего. Вот когда первый шаг надо добавить перед скрипт, всё, сразу слайдер залагал( а если убрать этот скрипт, то не будет работать loader этот, зато слайдер как ни в чём не бывало заработает. Главное, именно первый шаг не дружит со слайдером, а последуюие шаги все исправно работают...) Подскажите пожалуйста, что делать в такой ситуации? я вот сайт вам дам (http://topdjays.blogspot.com) пока оставлю loader, чтоб вы увидели ошибку, а если ничего не удастся, тогда удалю query loader и поставлю назад слайдер-картинки, они просто важны мне) Пожалуйста, надеюсь, вы мне поможете, спасибо большое заранее, вы будете героем, если дочитаете до конца)))

    ОтветитьУдалить
  10. перед скриптом вначале допустил ошибочку *

    ОтветитьУдалить
  11.  картинок в слайдере 5 штук, они не двигаются( даже нажимая на стрелки(

    ОтветитьУдалить
  12. Андрей,дочитал конечно ваш комментарий.К большому сожалению слайдер конфликтует с jquery.Он (загрузчик loader) Вам и не нужен,блог загружается быстро.Я сам сталкивался с такой проблемой в другом блоге:http://fangoogle.blogspot.com/ установив кнопку вверх перестал работать слайдер.Пришлось отказаться от кнопки,так как слайдер в этом блоге очень нужен.Вот и Вам нужно сделать выбор.

    ОтветитьУдалить
  13.  жалко(( Тогда остановлюсь всё-таки на слайдере) спасибо большое за ответ) сегодня нашёл ваш сайт и многое поставил виджетов при помощи него))

    ОтветитьУдалить
  14. Андрей заходите ещё,здесь много интересного можете найти.

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

 
Footer