Динамические шаблоны Blogger и виджеты

Динамические шаблоны Blogger выглядят хорошо, но они поддерживают всего лишь несколько официальных виджетов. Сегодня мы немного поработаем над динамическими шаблонами и посмотрим, как в них можно добавить сторонние виджеты (на примере рейтингов Graddit, разумеется).

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

Итак, наша цель - отображать виджеты, когда пользователь раскрывает заметку в любом из видов (Classic, Flipcard, Magazine, Mosaic, Sidebar, Snapshot и Timeline).

Для начала откройте панель управления Блоггера и перейдите на закладку Template; нажмите Edit HTML, а потом кнопку Proceed.

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




Или вот этот, если вы хотите чтобы отображались ещё и похожие страницы:



Сохраните шаблон и закройте редактор. Нажмите кнопку Customize - нам нужно добавить несколько стилей, без которых виджеты будут отображаться неверно. Выберите Advanced и нажмите Add CSS. Добавьте вот такие стили:

.article .article-content .ffbs_rate img {
  padding: 0;
  border: 0;
  border-image: none;
  -webkit-border-image: none;
  vertical-align: middle;
}

.article .article-content .ffbs_stats {
  font-size: 10px;
}

.article .article-content a {
  border: 0;
}

Нажмите Apply to Blog.

Вот и всё, виджеты должны заработать. Откройте свой блог и убедитесь. Вот как это работает в тестовом блоге: http://ffbs-widgets.blogspot.com/.
Получилось?

Интересно почитать

• Виджет рейтингов для tumblr
• Рейтинг-виджет от graddit
• Новые виджеты graddit для голосования