Динамические шаблоны 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. Добавьте вот такие стили:
Нажмите Apply to Blog.
Вот и всё, виджеты должны заработать. Откройте свой блог и убедитесь. Вот как это работает в тестовом блоге: http://ffbs-widgets.blogspot.com/.
Получилось?
Действуйте на свой страх и риск. Всё, что вы увидите дальше, является, так сказать, плохой практикой, потому что оно может перестать работать в любой момент, или даже ваш блог может начать отображаться и работать неправильно. Вас предупреждали!
Итак, наша цель - отображать виджеты, когда пользователь раскрывает заметку в любом из видов (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/.
Получилось?
Редактировать и сохранить код в динамических шаблонах можно, но мороки много. У меня получилось
ОтветитьУдалитьДавай поподробнее, интересно.
Удалитьhttp://sv9t.ru/obhod-zapreta-blogspot-na-redaktirovanie-kod
УдалитьХм, виноват, этот метод устаревший. Сейчас кнопка "изменить HTML" активна и все нормально. Я обычным редактированием CSS поменял цвет шрифта. Правда заметил, что много нет стилей CSS присутствующих в динамическом шаблоне, нешел их в отдельном css и остальные в js прописаны.
УдалитьНу да, отредактировать шаблон теперь можно, просто это ни на что не влияет :)
УдалитьНу например, находим в шаблоне место, где как будто бы выводится тело поста (у меня таких мест нашлось три), добавляем туда что-нибудь, да хоть "!!!", сохраняем. Открываем блог, а наших !!! нигде нет. Может, есть какая-то хитрость, но я её не нашёл.
Хм, да он просто восстанавливает все. Пробовал оптимизировать title, все вернул как и прежде
ОтветитьУдалитьКруто конечно... но лучше бы Вы гаджет HTML взломали, без него как без рук :-(
ОтветитьУдалитьКруто конечно... но лучше бы Вы гаджет HTML взломали, без него как без рук :-(
ОтветитьУдалить