Как удалить гаджет (виджет) в Blogger

Опубликовано:
Есть несколько способов удаления гаджетов (виджетов) в Blogger. Имейте ввиду, что тренироваться и отлаживать гаджеты лучше предварительно на тестовом блоге. Так же нужно помнить, что сторонние гаджеты не гарантируют стабильной работы и могут вызвать   надоедливую  ошибку типа bX-xxxxx, поэтому перед установкой сделайте резервную копию своего актуального шаблона. В тяжёлом случае (ошибки при работе в редакторе шаблона) резервная копия восстановит работоспособную версию шаблона.

Об официальных и сторонних гаджетах

Официальные гаджеты - все гаджеты из раздела Основные и три гаджета (Постоянные читатели, Википедия, Форма для связи) из раздела Другие гаджеты:

Официальные гаджеты Blogger

Гаджеты от сторонних разработчиков


Полное описание официальных гаджетов представлено в статье "Путеводитель по гаджетам Blogger". В ней перечислены все идентификаторы основных гаджетов.

Рассмотрим удаление гаджета на примере стороннего гаджета Fish (рыбки):

Гаджет рыбки
Гаджет Рыбки

Удаление ненужных гаджетов (виджетов)

Способ первый*.
В админ-интерфейсе на вкладке Дизайн открываем гаджет и удаляем встроенной кнопку "удалить":

Удаление гаджета через интерфейс Blogger

Что делать, если кнопка "удалить" отсутствует? См. примечание внизу.

Способ второй.
В админ-интерфейсе на вкладке Шаблон открываем редактор шаблона (Изменить HTML) и в списке виджетов выбираем нужный гаджет. В данном случае это Gadget1:

Редактор шаблона Blogger

Редактор шаблона покажет гаджет в свёрнутом виде.

Гаджет в редакторе шаблона Blogger

Маркер возле шкалы нумерации строк по нажатию развернёт код гаджета полностью.

Ваша задача в данном случае - удалить полностью весь гаджет: то есть всё, что находится внутри тегов <b:widget ....> и </b:widget>. Это можно сделать аккуратно как в свёрнтом виде, так и развёрнутом.
После удаления не забудьте сохранить изменения в шаблоне.


*Примечание к первому способу удаления.
Отсутствие кнопки "удалить":

В виджете нет кнопки удалить

Такой гаджет является заблокированным. Отвечает за это атрибут locked тега widget:


Он может иметь два состояния:
  • true (истинно)
  • false (ложно)

Соответственно, чтобы в настойках гаджета появилась кнопка "удалить", атрибут locked должен ровняться false.

Полезные ссылки:

Ярлыки:

Ручная установка LinkWithin

Опубликовано:
LinkWithin - достаточно известный виджет похожих сообщений. Пользуется большой популярностью среди пользователей Blogger.
Поскольку с декабря в Blogger не работает автоустановщик, то виджет похожих сообщений LinkWithin придётся ставить руками в шаблон.

Установка LinkWithin в Blogger

Сначала получаем код на официальном сайте виджета www.linkwithin.com.

Получаем код LinkWithin

Заполняем email, ссылку на блог и выбираем кол-во тамбнейлов (превью) в виджете похожих сообщений. Платформой нужно выбрать other - другая. У кого тёмный шаблон в блогк, может поставить последнюю галочку.

Нажимаем Get Widget!  и получаем код такого вида:
<script>
var linkwithin_site_id = 509897;
</script>
<script src="http://www.linkwithin.com/widget.js"></script>
<a href="http://www.linkwithin.com/"><img src="http://www.linkwithin.com/pixel.png" alt="Related Posts Plugin for WordPress, Blogger..." style="border: 0" /></a>
Обратите внимание на состав кода.
В первом скрипте мы можем найти свой id (уникальный номер в системе) в LinkWithin.

Теперь переходим в админ-панель Blogger, в Шаблон - Изменить HTML и через поиск по шаблону (нажать на любом месте кода + комбинация ctrl+F, в появившемся окошке ввести запрос) находим низ (футер) поста. Как правило, это <data:post.body/>, либо <div class='post-footer-line post-footer-line-3'> или <div class='post-footer'>. Проверить нужно сначала опытным путём, введя в шаблон абракадабру и посмотреть, появилась она в желаемом месте или нет.

Помещаем код, полученный на сайте LinkWithin в условие только на страницах сообщений, то есть внутри постов (скриншот кликабелен), затем в футер поста:

Установка LinkWithin в Blogger

И сохраняем шаблон.

Готово:

Демонстрация LinkWithin

Русификация LinkWithin

В скрипте параметра после var linkwithin_site_id = 509897; добавить: linkwithin_text='Похожие сообщения:';
То есть код полностью будет выглядеть вот так:
<b:if cond='data:blog.pageType == "item"'>
<script>
var linkwithin_site_id = 509897;
linkwithin_text='Похожие сообщения:';
</script>
<script src="http://www.linkwithin.com/widget.js"></script>
<a href="http://www.linkwithin.com/"><img src="http://www.linkwithin.com/pixel.png" alt="Related Posts Plugin for WordPress, Blogger..." style="border: 0" /></a>
</b:if>
Процесс настройки внешнего вида виджета LinkWithin описан в статье "Customize LinkWithin Stylesheet - Add Some colors!".
Html-цвета для текста ссылок, надписи и фона в виджете можно сгенерировать здесь.

Ярлыки:

Параллакс эффект в Блоггере

Опубликовано:
Боромир объясняет нам концепции Блоггера

Не секрет, что всё модное в веб строительстве доходит до Блоггера с изрядной задержкой. Происходит ли это из-за тяжкого наследия платформы в виде весьма ограниченного языка для создания шаблонов или Гуглу попросту интереснее и выгоднее заниматься Гуглеплюсом вместо Блогспота — сказать трудно, но факт остаётся фактом. Кто-то с этим мирится, кто-то выбирает другие платформы, но только не мы! Мы предпочитаем закатывать солнце вручную изобретать в любых сколько угодно стеснённых условиях.

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

Признаться, идею к данной статьи подсказала другая блог-платформа (medium.com). Если там открыть несколько постов, то можно заметить, что при прокрутке страницы текст как бы наползает на картинки с постепенным их затенением. Как оказалось, повторить такой эффект на так уж и сложно. Приступим.

Что нам понадобится:

Не будем вас отсылать за примерами на тестовый блог, для удобства разместим всё прямо здесь. Прокрутите статью немного вниз.

Вы увидите, как картинка замедляется, а текст снизу не неё наползает. Интересный эффект, не так ли? Разберёмся, как его повторить.

Для начала, убедитесь, что jQuery подключен. Затем добавьте следующие стили в шаблон:

  .parallaxed-wrapper {
    width: 100%;
    position: relative;
  }

  .parallaxed {
    position: relative;
    z-index: 1;
  }

  .parallaxed-overlay {
    position: relative;
    z-index: 2;
    background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(255,255,255,0.2) 3%, rgba(255,255,255,1) 15%, rgba(255,255,255,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(3%,rgba(255,255,255,0.2)), color-stop(15%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,1)));
    background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.2) 3%,rgba(255,255,255,1) 15%,rgba(255,255,255,1) 100%);
    background: -o-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.2) 3%,rgba(255,255,255,1) 15%,rgba(255,255,255,1) 100%);
    background: -ms-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.2) 3%,rgba(255,255,255,1) 15%,rgba(255,255,255,1) 100%);
    background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.2) 3%,rgba(255,255,255,1) 15%,rgba(255,255,255,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 );
  }

Теперь в конец статьи, где вы хотите показать данный эффект (либо в шаблон после post.body, если нужно, чтобы эффект работал во всех статьях сразу) добавьте такой скрипт:

<script type="text/javascript">
  (function() {
    var startTopPosition = 150;
    var scrollBy = 0.6;
    var parallaxed = $('.parallaxed');
    $(document).scroll(function(event) {
      var scrollEvent = event;
      parallaxed.each(function(event) {
        var element = $(this);
        var parent = element.parent();
        var posTop = element.parent('.parallaxed-wrapper').offset().top - $(window).scrollTop();
        var posLeft = element.offset().left;
        var scrolledToBottom = $(window).scrollTop() + $(window).height() == $(document).height();
        if (posTop < startTopPosition && !scrolledToBottom) {
          var newTop = (startTopPosition - posTop) * scrollBy;
           element.css({top : newTop});
          if (posTop < -parent.data('height') * scrollBy) {
            element.css({visibility : 'hidden'});
          } else {
            element.css({visibility : 'visible'});
          }
          element.parent().css({height : parent.data('height') - newTop / scrollBy / 2});
        } else if (posTop > startTopPosition) {
          element.css({visibility : 'visible', top : 0});
          element.parent().css({height : 'auto'});
        }
      });
    });
  })();
</script>
Когда всё будет готово, со значениями переменных, выделенных красным цветом, можно будет поиграть, чтобы добиться нужного именно вам эффекта.
startTopPosition = 150 говорит о том, что эффект начинает действовать, как только картинка будет на расстоянии менее 150 пикселей от верхей границы экрана;
var scrollBy = 0.6 - коэффициент замедления.

Теперь про разметку статьи. Да, чтобы это всё заработало при составлении статьи нужно будет учитывать, что на что и в какой момент будет накладываться. Сама картинка должна иметь класс parallaxed и быть обёрнута в элемент с классом parallaxed-wrapper, вот так (пример из данной статьи):

<div class="parallaxed-wrapper" data-height="400">
  <img class="parallaxed" width="100%" src="http://2.bp.blogspot.com/-VxiU5uJQRgw/UvqmdwB5YdI/AAAAAAAAAlA/B2S8AouijUs/s1600/open.jpg"/>
</div>

Далее обратите внимание на data-атрибут обёртки: data-height="400" — в общем случае он должен быть равен высоте картинки, но может и отличаться от неё. Это значение так же влияет на то, как будет проявляться эффект. За обёрткой следует элемент с классом parallaxed-overlay, включаеющий в себя один или несколько элементов, которые будут перекрывать картинку. Посмотрите исходный код данной страницы, чтобы понять, о чём идёт речь.

Вот и всё, наш простенький эксперимент завершён. Параллаксьте, гуглеплюсьте, задавайте вопросы в комментариях.


Ярлыки: