воскресенье, 13 сентября 2009 г.

Прокачка блога Blogger

[Внес измениния 09.10.2009]

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

Добавление картинок в блог

В Blogger есть решения такой банальной вещи. Если вы пользуетесь старым редактором Blogger(Меню "Настройки"->"Основные сведения", категория "Общие настройки", "Выбрать редактор сообщений"), то для добавление картинки можно воспользоваться пиктограмой "Добавить изображение" на панели при редактировании сообщений, выбираете картинку со своего рабочего стола и жмем "Загрузить изображение". Просто и элементарно, правда ссылка на такую картинку получается жутко большой.
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/_-jGDMp_Dftg/Sqykv1PbfPI/AAAAAAAAA_o/YoalqyD0HE0/s1600-h/chooser_brouser.jpg"><img style="cursor:pointer; cursor:hand;width: 320px; height: 97px;" src="http://1.bp.blogspot.com/_-jGDMp_Dftg/Sqykv1PbfPI/AAAAAAAAA_o/YoalqyD0HE0/s320/chooser_brouser.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5380856796453502194" /></a>

Почему то в новом редакторе в русскоязычной версии отсутствует опция добавление картинок(возможности нового редактора). Вы можете не уповать на милость хранения картинок в Blogger, а указать свой источник картинок. Например, можете указать ссылку на ваши картинки расположенном в альбоме Picasa.

Галерея картинок

Останавливаться на этой теме не буду, про это можно прочитать в посте "Галерея картинок в блоге Blogger или три дня веселья!".

Как поместить на основную страницу только отрывок поста?

Почти сразу сталкиваешься с проблемой того что на главной странице все посты отображаются полностью, при этом тяжело искать необходимую тему. Можно конечно уменьшить количество постов(Меню "Настройки"->"Форматирование", пункт "Показать"), но это существенным образом не повлияет на удобство, а возможно даже ухудшит его.
Раньше было только 2 решения:
1. Отображать только заголовки
2. Скрывать оставшуюся часть поста стилями css.
Первый вариант не удобный тем, что в одном заголовке тяжело дать описание поста, второй же, тем что прокачивается больший объем трафика, а на медленном интернете это оставляет плохое впечатление о блоге.
Описывать эти решения не буду, так как недавно анонсировали новую возможность Jump Break. К сожалению в русскоязычной версии не добавлена пиктограмма на панель как в новом, так и в старом редакторе. Но вы можете добавить ее вручную:
<!-- more -->
Данная метка указывает на то что часть поста которая находится ниже нее не будет отображаться на основной странице блога.

Подсветка кода

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

Для внедрения в конец тега Head шаблона добавляем 4 секции:
1. Скрипты ядра
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shCore.js' type='text/javascript'/>

2. Стили
<link href='http://alexgorbatchev.com/pub/sh/2.0.320/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/2.0.320/styles/shThemeDefault.css' id='shTheme' rel='stylesheet' type='text/css'/>

3. Скрипты стилистики языков
//ActionScript3
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushAS3.js' type='text/javascript'/>
//C#
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushCSharp.js' type='text/javascript'/>
//CSS
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushCss.js' type='text/javascript'/>
//Java
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushJava.js' type='text/javascript'/>
//JavaScript
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushJScript.js' type='text/javascript'/>
//Python
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushPython.js' type='text/javascript'/>
//Sql
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushSql.js' type='text/javascript'/>
//Xml
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushXml.js' type='text/javascript'/>

Весь список поддерживаемых языков можно посмотреть на сайте разработчиков.

4. Скрипты для возможности подсветки в Blogger и инициализации процесса подсветки
<script type='text/javascript'>SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/2.0.320/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>

При написании поста используем следующую конструкцию:
<pre class="brush: <alias>">//Ваш код</pre>

где, <alias> -краткое имя языка. Список всех кратких имен и соответствующих им языков также можно найти на сайте разработчиков.

Статистика по Feed лентам

Одной из отличных возможностей Blogger есть то что RSS и Atom ленты формируются автоматически. Что делать если вы хотите видеть статистику по данным лентам?

В этом вам поможет один из сервисов Google FeedBurner.

Для внедрения вам необходимо выполнить следующие действия:

1. Заходим на сайт FeedBurner. И в поле
Burn a feed right this instant. Type your blog or feed address here: вбиваем адрес Feed линты своего сайта.

Для моего сайта данная строка будет выглядеть вот так - http://night-fairy-tales.com/feeds/posts/default

Дополнительно указываете
- Feed Title - Название Feed-а, необходимое для того что бы вы различали разные ваши ленты.
- Feed Address - адресс фида. Для своего я указал night-fairy-tales

2. Заходим на свой блог в "Настройки"->"Канал сайта", в поле "URL переадресации канала сообщений" вводим ссылку на ваш канал в FeedBurner(http://feeds.feedburner.com/night-fairy-tales).

Сохранив настройки на сайте FeedBurner вы сможете отслеживать статистику по вашим Feed лентам.

Индексация страниц поисковиком Google
По уполчанию Blogger включает возможность индексирования поисковиком Google. В качестве файла sitemap указывается ваш адрес Feed ленты. После настройки FeedBurner поисковик Google перестает индексировать ваши страницы ссылаясь на ошибки.

Что бы исправить данную ситуацию вам необходимо зайти в Инструменты для веб-мастеров(зарегистировать ваш сайт, если еще он не зарегистрирован), в пункте "Конфигурация сайта"->"Файлы Sitemap" добавить ссылку " atom.xml?redirect=false".

[UPDATED] В процессе исследование выяснил, что такая ссылка добавляет все статьи, но в самом Blogger есть ограничение на 500 постов. И снова методом "тыка" нашел решение. Если хотите решить проблему полностью, то добавляйте следующую ссылку "feeds/posts/default?orderby=updated&redirect=false".

Индексация страниц поисковиком Yandex
[UPDATED] Через время я понял что и Yandex перестал индексировать мои страницы, при этом выдавал ошибку - "Невалидный XML". Поиск по интернету не дал решений, попытки поиграться с ссылками на фиды - тоже. В какой то момент у меня мелькнула мысль, что "Если гора не идет к Магомету то Магомет идет к горе", и я уже задумался, что необходимо сделать сервис который сгенерирует SiteMap для любого блога. Оказывается на просторах интернета уже есть такие реализации, например, http://www.xml-sitemaps.com/. Воспользовавшись первый примером, я получил ссылку на SiteMap, добавил его в Яндекс.Вебмастер, и теперь длог появился в поисковике Yandex :).

4 комментария:

  1. http://sitemapgenerator.ru не советую в использовании, через время просто не генерирует sitemap :(

    ОтветитьУдалить
  2. Столкнулся с исчезновением "/" перед закрывающей ">". Приводит к ошибке в коде.
    http://santoriospb.blogspot.com/2009/12/2.html

    ОтветитьУдалить
  3. проще в яше добавить блог ссылкой на фид и он автоматом впишет его в сайтмэп - http://spid-vich.blogspot.com/feeds/posts/default?orderby=updated

    ОтветитьУдалить
  4. >Вячеслав Троцак
    Пишет, согласен, но при обработки скажет, что произошла ошибка, неверный формат :(...

    >Santorio
    Перейдя по ссылке не могу найти ошибку. Если проблему еще не решил, напиши свою почту, постараюсь помочь

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