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

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

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

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

Для начала откройте панель управления Блоггера и перейдите на закладку Template; нажмите Edit HTML, а потом кнопку Proceed.
При работе с динамическими шаблонами нам недоступна большая часть функционала шаблонизатора. То есть, изменить шаблон и даже сохранить его вы сможете, но это ничего не изменит в поведении интерфейса. Но нам много и не надо. Добавьте в секцию <head>...</head> две строки:

<link href='http://static.graddit.com/css/graddit.css' rel='stylesheet' type='text/css'/>
<script src='http://static.graddit.com/js/graddit-extras.js' type='text/javascript'/>

Это стили и несколько скриптов, расширяющих функционал виджетов Graddit. Нам, правда, нужна только функция gradditBloggerDynamicViewsRatingsHack. Теперь перейдите в самый конец шаблона и перед закрывающимся тегом </body> вставьте этот вызов:

<script type='text/javascript'>setTimeout(function(){gradditBloggerDynamicViewsRatingsHack();},1000);</script>

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

<script type='text/javascript'>setTimeout(function(){gradditBloggerDynamicViewsRatingsHack(true);},1000);</script>

Сохраните шаблон и закройте редактор. Нажмите кнопку 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/.
Получилось?

Оцени и поделись
{[['']]}


Ещё больше полезного:

8 комментариев:

  1. Редактировать и сохранить код в динамических шаблонах можно, но мороки много. У меня получилось

    ОтветитьУдалить
    Ответы
    1. Давай поподробнее, интересно.

      Удалить
    2. http://sv9t.ru/obhod-zapreta-blogspot-na-redaktirovanie-kod

      Удалить
    3. Хм, виноват, этот метод устаревший. Сейчас кнопка "изменить HTML" активна и все нормально. Я обычным редактированием CSS поменял цвет шрифта. Правда заметил, что много нет стилей CSS присутствующих в динамическом шаблоне, нешел их в отдельном css и остальные в js прописаны.

      Удалить
    4. Ну да, отредактировать шаблон теперь можно, просто это ни на что не влияет :)
      Ну например, находим в шаблоне место, где как будто бы выводится тело поста (у меня таких мест нашлось три), добавляем туда что-нибудь, да хоть "!!!", сохраняем. Открываем блог, а наших !!! нигде нет. Может, есть какая-то хитрость, но я её не нашёл.

      Удалить
  2. Хм, да он просто восстанавливает все. Пробовал оптимизировать title, все вернул как и прежде

    ОтветитьУдалить
  3. Круто конечно... но лучше бы Вы гаджет HTML взломали, без него как без рук :-(

    ОтветитьУдалить
  4. Круто конечно... но лучше бы Вы гаджет HTML взломали, без него как без рук :-(

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