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

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

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

Способы решения зависят от того, что именно нужно сделать:
  • частично изменить порядок только для статей, отображаемых на главной; то есть, если у вас 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 в очень старых браузерах. Переведён на русский язык.

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