Шаблон для Блоггера "Invert Grid Video"

Опубликовано:

Единственный видео шаблон для Блоггера, который без лишних усилий поддерживает не только YouTube. Кто пытался разместить в блоге видео из других сервисов, знает, о чём речь. Открывайте живой пример и удивляйтесь.
Видео шаблон для Блоггера

Здесь и слайдер, и анонсы, и виджеты самых популярных, похожих и случайных постов, и всё с пропорциональными картинками лучшего качества. А ещё многоуровневое меню и пейджер. И адаптивный дизайн, который будет работать на мобильных устройствах:
Видео шаблон для Блоггера, версия для мобильных Видео шаблон для Блоггера, версия для планшетов
Благодаря интеграции с tnail.me поддерживается видео из YouTube, RuTube, Vimeo, Vine и ещё десятка других видеосервисов.
Оригинальный шаблон подвергся глубокой переработке, все нужные скрипты, бывшие сломанными, минифицированными или обфусцированными, починены, развёрнуты в читаемый вид и дополнены всем нужным для работы с встраиваемым видео. API ключ для работы с tnail.me будет активен до 1 января 2016 года, т.е. время всё проверить есть, затем нужно будет получить свой ключ и прописать его в шаблоне.
Несколько замечаний:
  • слайдер показывает только записи с меткой "видео", но это можно легко изменить;
  • виджеты метки и популярные посты в футере (подвале) не показываются в мобильной версии (для экранов меньше 600px);
  • пейджер на главной показывает 6 последних записей - это число выставляется в шаблоне и должно совпадать с настройками блога, иначе пейджер будет работать некорректно, это связано с некоторым ограничениями Блоггера;

Как изменить порядок статей в Блоггере

Опубликовано:

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

Способы решения зависят от того, что именно нужно сделать:
  • частично изменить порядок только для статей, отображаемых на главной; то есть, если у вас 100 статей, и в настройках блога указано отображать 10 последних на главной, то вот для этих 10 последних и будет изменён порядок;
  • полностью изменить порядок для всех статей в блоге; в этом случае главная всегда будет отображать первые N постов по возрастанию даты публикации (N задаётся в настройках блога) и для того, чтобы достичь последней статьи, нужно пролистать блог до конца;

Частичное изменения порядка

Вообще, способов это сделать несколько, но вам стоит серьёзно рассматривать только один — использование Flexbox. Flexbox — это набор CSS правил (что такое CSS) для организации блоков HTML страниц. Есть и другие CSS и JS трюки, но Flexbox сочетает одновременно простоту и отсутствие недостатков, сопровождающих другие подходы. Если есть желание, можем обсудить это подробнее в комментариях или отдельной статьёй. Единственный минус Flexbox — это отсутствие или неполная поддержка в старых браузерах, таких как IE8, IE9 или старые версии браузера на телефонах под управлением Android. Суммарно этими браузерами пользуется около 5% читателей, на такие цифры принято не обращать внимания.
Приводить полное описание Flexbox в рамках данной статьи не имеет смысла, это слишком объёмная тема. Применительно к нашей задаче вам стоит помнить, что нет универсального подхода, позволяющего изменить порядок статей для любого шаблона. В частности, это не сработает для динамических шаблонов или шаблонов, уже так или иначе меняющих порядок статей (как, например, этот). Мы рассмотрим изменения, которые нужно будет внести в самый базовый шаблон Simple, это даст вам понимание принципов, которым нужно следовать. Перед внесением изменений в свой шаблон обязательно сделайте копию!
Итак, помимо прочего, при использование Flexbox можно изменить порядок следования блоков внутри элемента-контейнера. В случае с Simple контейнером является элемент, содержащий внутри себя все статьи. Откройте шаблон в редакторе, найдите строку "blog-posts". Вы увидите что-то вроде
<b:if cond='!data:mobile'>
    <!-- posts -->
    <div class='blog-posts hfeed'>

      <b:include data='top' name='status-message'/>

      <data:defaultAdStart/>
      <b:loop values='data:posts' var='post'>
      ...
здесь написано, что если это не мобильная версия, то внутри элемента-контейнера div с классами blog-posts и hfeed нужно отобразить все статьи. Далее не так очевидно, но каждая статья тоже будет отображена в своём блоке — div элементе с классом date-outer. Это всё, что нам нужно знать. Далее необходимо добавить несколько CSS правил для классов blog-posts и date-outer. Для стандартных шаблонов делать это лучше в Дизайнере: Затем в первой колонке выбрать "Дополнительно", а вторую пролистать в самый низ и выбрать "Добавить CSS":

Если так сделать не удаётся, то можно добавлять стили прямо в шаблон в секцию <b:skin> или в любое место (ну почти) между тэгами <style>...</style>.

Добавить нужно следующие стили:

.blog-posts,
   .date-posts {
     display: -webkit-box;
     display: -webkit-flex;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-orient: vertical;
     -webkit-box-direction: reverse;
     -webkit-flex-direction: column-reverse;
         -ms-flex-direction: column-reverse;
             flex-direction: column-reverse;
   }

   .date-outer,
   .post-outer {
     -webkit-box-flex: 0;
     -webkit-flex: 0 0 auto;
         -ms-flex: 0 0 auto;
             flex: 0 0 auto;
   }

Отдельно стоит заметить, что шаблон Simple группирует статьи за одну дату внутри единственного контейнера date-outer. Благо, он дополнительно оборачивает их в контейнер с классом date-posts, а каждый пост — ещё в post-outer. А с этим уже можно работать схожим образом, что и отражено в стилях.

После того, как вы примените стили к блогу, порядок статей на главной странице изменится. Также изменится он и при отображении статей по меткам. Проблемы могут быть с мобильным шаблоном. Если порядок при мобильном просмотре (добавьте к адресу блога ?m=1) не изменился, возможно, вам поможет смена мобильного шаблона с "По умолчанию" на "Дополнительно": в настройках выберите Шаблон, затем во второй колонке "На мобильных" кликните на иконку с изображением шестерёнки; в разделе "Выберите мобильный шаблон" укажите "Дополнительно". Сохраните и проверьте результат, должно заработать.

Если у вас нестандартный шаблон и вы не можете найти классы контейнера статей и самих статей, пишите в комментариях с указанием адреса блога, постараюсь помочь.

Полное изменение порядка

Во-первых, задумайтесь, действительно ли нужно вам это делать. Вы пишете роман? Возможно, Блоггер — это не то, что вам требуется. Как ваши читатели будут попадать на последний пост, будет ли им удобно? Как к таким трюкам отнесутся поисковые роботы? Если вы твёрдо уверены, то приступим. Решение есть, даже несколько. Кстати, ни одно из них не будет изящным, быстрым или универсальным.

За исключением первого варианта, описанного ниже, общим подходом к решению поставленной задачи является манипуляция с фидом (лентой) блога. У каждого блога на платформе Блоггер есть лента сообщений, доступная по адресу ВАШ_БЛОГ/feeds/posts/default, которая, в зависимости от настроек, содержит частично или полностью все ваши статьи. Остаётся только выбрать их в нужном порядке и отобразить на главной странице блога, попутно подменив ссылки на следующие/предыдущие посты. По желанию это же можно сделать и для фильтров по меткам. Если вы знаете JS и не прочь погрузиться в документацию Блоггера, то этой информации вам уже должно быть достаточно. Для всех же остальных существуют готовые реализации данного механизма. Мне тоже лень заново изобретать колесо, так что я просто пройдусь по нескольким решениям. А ещё я не буду приводить здесь код, который вам нужно вставлять в шаблон, но дам ссылки на первоисточники. Причина проста: если авторы оригинальных решений найдут ошибки или просто захотят что-то изменить, они сделают это у себя в блогах. Если я буду копировать код сюда, он навсегда останется старым. Приступим.

Вариант 1

Весьма изощрённый, но не лишённый изворотливости способ, предложенный неким финским блогером. Суть его заключается в следующем:

  1. если в адресе страницы присутствует параметр order=ASC, то все посты на этой странице ставятся в обратном порядке при помощи JS;
  2. затем находятся ссылки "Следующие" и "Предыдущие" и к ним добавляется параметр order=ASC, чтобы при листании по страницам порядок соблюдался;
  3. Пока что всё это по результату сильно напоминает то, что мы делали для частичного изменения порядка. Так как же сделать его полным? Для этого вместо главной страницы, где показываются только последние статьи, рекомендуется использовать возможности поиска, добавив к адресу блога такой хвост (пример из блога автора):
    /search?updated-max=2011-02-14T08%3A08%3A00%2B02%3A00&max-results=7
    что позволит получить первые статьи, начиная с указанной даты (ставьте дату первой своей записи) блоками по 7.

Великолепно! И позволяет не мешать тем, кто хочет читать блог с обычным порядком статей, ведь без параметра order=ASC всё будет работать как обычно. Минус только в том, что на главной странице блога статьи так и не будут начинаться с самой первой. Кстати, это можно исправить перенаправлением на нужную страницу с помощью того-же JS. Ну и разумеется, с большой вероятностью всё это не будет работать на нестандартных шаблонах, потому что код опирается всё на те же классы контейнеров (blog-posts и другие). Подгонку под другие шаблоны нужно делать самостоятельно.

Вариант 2

Тот же автор, но на этот раз всё серьёзно, с использованием ленты, с отображением развёрнутой версии на отдельной странице. Впрочем, всё это можно проделать и прямо на главной странице.

  1. скрипт загружает последние 500 записей из фида. 500 - это ограничение блоггера, которое, впрочем, может быть преодолено, но это не совсем просто;
  2. затем находит нужную часть из 7 (у автора, число можно менять) статей, формирует HTML и вставляет на страницу. Под нужной частью я имею в виду поддержку листания по страницам - она тоже есть;

Недостатки: каждая загрузка страницы с 7 статьями в фоне загружает все(!) записи блога. Ну или 500 последних, если у вас их больше. Накладные расходы огромны. Плюс нет никакой информации о комментариях, и придётся изрядно повозиться, если в блоге больше 500 записей.

Вариант 3

Хроноблог — любопытное решение в виде гаджета, превращающего блог в набор статей, отображаемых по одной, начиная с самой первой. Поясню: вы добавляете специальный гаджет, который точно так же читает ленту (помним про накладные расходы) и показывает только один пост на главной странице. С возможностью листать назад и вперёд на одну запись. Гаджет запоминает, где остановился читатель и при открытии блога в следующий раз возвращает читателя к правильной статье. Более того, никакой возни с шаблоном — перейдите по ссылке, задайте желаемые параметры в форме (адрес блога, текст меток, размеры) и нажмите кнопку "Add Chronoblog to your blog" и гаджет будет добавлен в ваш блог автоматически (после вашего согласия, разумеется).

Вариант 4

Самый трудозатратный вариант — проставить порядок статей вручную. Это можно сделать, задав дату публикаций при их написании. Первой публикации ставьте любую дату, а всем последующим — всё более и более ранние. Отображение дат в блоге в этом случае стоит отключить, потому что в них не будет никакого смысла.

Важное замечание. Ни один способ, опирающийся на фид, не будет работать для приватных блогов, потому что лента для них не формируется.

На этом всё. Задавайте вопросы в комментариях. Кстати, у кого-нибудь была реальная необходимость менять порядок статей в блоге? Что это были за случаи?


Ярлыки:

Упрощаем отправку текста из статей в твиттер

Опубликовано:

В статье: как сделать так, чтобы читатели могли быстро твитнуть выделенный текст или цитату из вашего блога

    Существует два подхода к тому, что и как можно сделать в блоге, чтобы посетителям было легче твитить ваши умные мысли:
  1. при выделении текста показать кнопку для отправки умной мысли в твиттер
  2. оформить умную мысль так, чтобы рядом сразу и всегда была кнопка

    Рассмотрим оба варианта подробнее. Кстати, в любом случае вам придётся подключать внешние скрипты и, возможно, стили. Так что если вы не знаете, как это сделать, то самое время ознакомиться. А ещё вам нужно знать, что такое CSS селектор, потому что все решения так или иначе должны быть применены к некоторым элементам страницы, которые будут указаны при помощи этих самых селекторов.

Подход 1: показать кнопку твиттера, если читатель выделил текст

    Существует несколько скриптов, которые позволяют это сделать. Принцип во всех одинаков, но есть различия в гибкости настроек и внешнем виде. Продемонстрируем несколько:
Если постараться, можно найти много подобных решений разной степени гибкости. Недостатком такого подхода является то, что некоторые люди любят выделять текст в процессе чтения и такие всплывающие элементы будут им очень надоедать. Так что будьте готовы к частым и нудным объяснениям, что польза для вашего блога важнее их привычек. Или всё таки нет? В любом случае, последний вариант частично может решить эту проблему.

Подход 2: показывать кнопку твиттера всегда, но только для заранее указанных фрагментов

    Здесь также существует несколько готовых решений.
Недостаток второго подхода очевиден: читатель ограничен в выборе, что можно твитнуть. Зато не будет мешать назойливая кнопка твиттера, всплывающая каждый раз при выделении текста. Помните, некоторым людям удобнее читать, выделяя.

Знаете более удобные варианты автоматизации подготовки цитат для твиттера?

Ярлыки: ,

Шаблон для Блоггера "Straight"

Опубликовано:
Шаблон для Блоггера "Straight"
Красочный шаблон Straight "заряжен" всем необходимым: отзывчивый дизайн, выпадающее меню, блоки подписки через RSS, социальные сети и электронную почту, виджеты лучших и похожих сообщений. Бери и пользуйся!
Оригинал переведён на русский язык, подчищены мелкие огрехи с отображением ссылок.

Скачать шаблон

Совмещаем собственные рейтинги с отзывами Яндекс.Маркета


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

    Конечно, наличие разных взглядов на один и тот же товар - вещь очень полезная. Но где их взять? К счастью, как минимум одно такое место уже есть - это Яндекс.Маркет. Тысячи магазинов, огромное количество товаров и миллионы покупателей. Многие из них оставляют свои отзывы, доступ к которым открыт через API Яндекса. Разумеется, ваше мнение - самое важное, но дополнить его десятками, сотнями, а то и тысячами мини обзоров будет не лишним, тем более, что сделать это очень просто, ведь вся работа по интеграции с Маркетом уже проделана Graddit - сервисом, предоставляющим блогам виджет рейтингов. Так что теперь можно совместить собственные рейтинги с рейтингами и отзывами с Яндекс.Маркета. Без лишних слов, предлагаем перейти на одну из страниц блога, уже использующего эти данные совместно:

    Жёсткий диск для роутера ASUS RT-AC68U.

    Обратите внимание, внизу после статьи с оценками посетителей блога находится секция с отзывами других людей. Отзывов может быть много, так что есть возможность постраничного просмотра, сортировки по дате, оценке или полезности информации. Нужно ли вашим посетителям теперь идти на какой-то другой блог, чтобы прочесть там другие обзоры, когда всё уже есть у вас? Вероятно, это будет пустой тратой времени.

    Итак, что вам нужно будет сделать, чтобы заполучить такой же виджет себе в блог:
    1. запросить ключ доступа к Яндекс.Маркету;
    2. особым образом добавить в посты коды товаров, отзывы о которых нужно загружать;
    3. добавить код виджета себе в блог. Тестовый период - 2 недели бесплатно, затем от $3 в месяц. Для пришедших с Блогопоиска скидка: вместо трёх - $1 в месяц в течение полугода;

    За подробностями пишите на sales@graddit.com.

Шаблон для Блоггера "Timeline"

Шаблон для Блоггера Timeline
Timeline - сверхлегкий шаблон в серых тонах. Минимум анимации, выполнен в стиле "Шкала времени". От оригинала отличается обновленной версией jQuery, плюс убран кое-какой мусор, связанный с поддержкой HTML5 в очень старых браузерах. Переведён на русский язык.

Скачать шаблон

Шаблон для Блоггера "AbstractLine"

Опубликовано:
Изображение создано при помощи pictofon.com
    Двухколоночный шаблон фиксированной ширины (неотзывчивый) в тёмно-голубых цветах. За исключением перевода, от оригинала отличается, в основном, правками множественных проблем со стилями.

    Чтобы добавить блок подписки с лайками фейсбука, твиттера и гугл-плюса, скопируйте код отсюда и вставьте в HTML/JS виджет в дизайнере шаблона.

Скачать шаблон

Шаблон для Блоггера "Xenon"

Опубликовано:
Шаблон для Блоггера "Xenon"
Лёгкий ненагруженный шаблон в тёмных тонах. Две колонки, минимум мусора. Оригинальный шаблон переведён на русский язык, подчищены стили (пропорциональный размер изображений на главной, цвет текста).


Скачать шаблон

Шаблон для Блоггера "Date A Live"

Опубликовано:

Шаблон, заточенный под медийный контент со встроенными виджетами лучших и похожих публикаций, а так же набор кнопок для желающих поделиться понравившейся статьёй в социальных сетях. Оригинальный шаблон переведён на русский язык, до последних стабильных версий были обновлены jQuery и плагин Masonry (для наилучшей динамической расстановки анонсов статей на главной странице), также решены множественные проблемы с неправильным отображением виджетов и других элементов на страницах. В бесплатной версии шаблон имеет 2 колонки и жёстко заданную ширину.


Скачать бесплатную версию


Платный вариант имеет улучшенный отзывчивый дизайн, подстраивающийся под размеры Инструмент от Гугла, проверяющий дружественность дизайна к мобильным устройствам, не находит проблем.
окна браузера. Отлично выглядит как на большом экране, так и на экране мобильных устройств, протестирован в Chrome, FireFox, Safari, IE11, iOS, встроенном браузере Android и мобильном Chrome последних версий.

Гарантия качества! Если шаблон не оправдал ваших ожиданий, деньги будут возвращены без каких-либо вопросов.

Купить за $2.99 - свяжитесь с автором по поводу оплаты.

Шаблон для Блоггера "Diary/Notebook"

Опубликовано:
Шаблон для Блоггера "Diary/Notebook"
Шаблон, стилизованный под записную книжку. Оригинал переведён на русский язык, jQuery и используемые плагины обновлены до последних стабильных версий. Стоит отметить, что в начальном варианте присутствует трансляция из твиттера, но шаблон достаточно старый и API твиттера с тех пор изменился и больше не разрешает трансляцию без создания приложения и авторизации (получения oauth токена), так что все скрипты и стили для работы с твиттером были удалены. Так же учтите, что этот шаблон не будет подстраиваться под размер окна браузера.

Скачать шаблон

Шаблон для Блоггера "SkyBlue"

Опубликовано:
Шаблон для Блоггера "SkyBlue"

Шаблон для Блоггера "SkyBlue". Симпатичный лёгкий отзывчивый дизайн, подстраивающийся под размеры окна. Хорошо подойдёт для портфолио фотографа, любителя поделок или для любого другого типа блога с большим количеством визуального материала.

Оригинальный шаблон подвергся следующим изменениям:
  • перевод на русский;
  • для ссылок проставлен атрибут rel="nofollow";
  • jQuery, а так же все используемые плагины обновлены до последних стабильных версий (modernizr, jQuery Masonry, loadImage);
  • починены проблемы с начальным отображением фотографий на главной;
  • устранены проблемы с отображением даты публикации и некоторых других элементов;

Шаблон для Блоггера "Helix"

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


Отличия от оригинального шаблона:
  • отзывчивый дизайн;
  • правильные пропорции картинок на главной;
  • локализация на русский язык;
  • убраны лишние виджеты (пустые HTML виджеты, например, "Новости");
  • убраны JS плагины spuerfish (меню) maximage (галлереи), backstretch (фоновые изображения);
  • внешние ссылки в подвале получили rel="nofollow"; однако, помните, что совсем удалять их нельзя для соблюдения правил лицензии.