BlogoHelp :: On-line помощь при ведении блога на Blogger.com (Blogspot)

Создаем «Хлебные крошки» (Breadcrumb) на Blogger

среда, 1 февраля 2012 г.

«Хлебные крошки» или Breadcrumb — замечательный и очень полезный элемент навигации, который также может отлично исполнять функцию базовой перелинковки для блога. Нельзя сказать, что его нужно обязательно использовать на всех подряд проектах - тут, считаю, автор решает самостоятельно. Данные рассуждения уже были частично затронуты в статье про хлебные крошки в WordPress. Суть их заключается в следующем: с одной стороны формат блога, в частности и проектов на blogspot, не подразумевает вывод в качестве «хлебных крошек» какой-то сложной структуры - здесь вы найдете ссылку на главную, перечень тегов + заголовок текущей страницы. Все эти элементы пользователь может добавить самостоятельно, да и, скорее всего, они у вас уже есть.

С другой стороны благодаря подобной навигационной цепочке (пожалуй самое «научное» название данного элемента) не только улучшается структурированность шаблона, его юзабилити, но также некоторые элементы внутренней поисковой оптимизация сайта. Хуже, как говорится, от этого все равно не будет.

К сожалению, разработчики Blogger данный элемент не предусмотрели. Чем они руководствовались догадаться не сложно, об этом я уже успел сказать выше — Blogspot это не платформа для построения большого корпоративного портала или новостного сайта с глубокой иерархией страниц. Максимально что можно сделать для «хлебных крошек» это вывод нескольких ярлыков (тегов) перед названием текущей страницы. Рассмотрим каким образом это реализовывается:

1. Идем в редактор шаблона - выбираем Изменить HTML (Edit HTML) и ставим галочку «расширить шаблон виджета» (expand the widget template).

2. Находим фрагмент кода

<b:include data='top'  name='status-message'/>

и вставляем перед ним:

<b:include  data='posts' name='breadcrumb'/>код1

Здесь следует заметить, что в некоторых шаблонах блок кода, который мы ищем, может быть найден сразу в нескольких местах. Если это так, то вам придется попробовать поочередно добавить код сначала перед одним, а потом перед другим html блоком. Хотя, в принципе, можно сразу между двумя разместить.

3. Далее находим

<b:includable  id='main' var='top'>

и вставляет перед ним:

<b:includable id='breadcrumb'  var='posts'>

  <b:if  cond='data:blog.homepageUrl != data:blog.url'>

  <b:if cond='data:blog.pageType  == "static_page"'>

  <div  class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl'  rel='tag'>Home</a></span> »  <span><data:blog.pageName/></span></div>

  <b:else/>

  <b:if cond='data:blog.pageType  == "item"'>

  <!-- breadcrumb for the post  page -->

  <b:loop values='data:posts'  var='post'>

  <b:if  cond='data:post.labels'>

  <div class='breadcrumbs'  xmlns:v="http://rdf.data-vocabulary.org/#">

  <span  typeof="v:Breadcrumb"><a expr:href='data:blog.homepageUrl'  rel="v:url"  property="v:title">Home</a></span>

  <b:loop  values='data:post.labels' var='label'>

  <b:if cond='data:label.isLast  == "true"'>

  » <span  typeof="v:Breadcrumb"><a expr:href='data:label.url'  rel="v:url"  property="v:title"><data:label.name/></a></span>

  </b:if>

  </b:loop>

  »  <span><data:post.title/></span>

  </div>

  <b:else/>

  <div  class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span>  » <span>Unlabelled</span> »  <span><data:post.title/></span></div>

  </b:if>

  </b:loop>

  <b:else/>

  <b:if cond='data:blog.pageType  == "archive"'>

  <!-- breadcrumb for the label  archive page and search pages.. -->

  <div class='breadcrumbs'>

  <span><a  expr:href='data:blog.homepageUrl'>Главная</a></span> »  <span>Archives for <data:blog.pageName/></span>

  </div>

  <b:else/>

  <b:if cond='data:blog.pageType  == "index"'>

  <div class='breadcrumbs'>

  <b:if cond='data:blog.pageName  == ""'>

  <span><a expr:href='data:blog.homepageUrl'>Главная</a></span>  » <span>All posts</span>

  <b:else/>

  <span><a  expr:href='data:blog.homepageUrl'>Главная</a></span> »  <span>Posts filed under <data:blog.pageName/></span>

  </b:if>

  </div>

  </b:if>

  </b:if>

  </b:if>

  </b:if>

  </b:if>

  </b:includable>

По умолчанию приведенный HTML код отображает в «хлебных крошках» последний ярлык (тег), то есть получается что-то вроде: "Главная - последний тег - текущий пост". Если вы уберете из него строки, подсвеченные красным цветом (ту, что посредине - оставить), тогда в меню отобразятся все теги для данной записи - как это показано на рисунке выше.

4.Сохраните шаблон, далее можно перейти к редактированию стилей шаблона. Для этого заходим в раздел Шаблон - кликаем "Настроить" - выбираем "Дополнительно" (Advanced) и "Добавить CSS" (Add CSS ), где пишем:

.breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:95%;
line-height: 1.4em;
border-bottom:3px double #e6e4e3;
}

Проверяем результат. Кстати в данном скрипте «Хлебные крошки» также отображаются и на страницах архивов (тегов) для большего удобства посетителей. Вообще большинству пользователей в структуре типичного блога «без наворотов» запутаться не так уж сложно и без «хлебных крошек». Тем не менее, я настаиваю, что в большинстве случаев они как минимум не помешают. Если вы со мной согласны, может смело использовать приведенный выше алгоритм установки.

P.S. Если вы хотите начать зарабатывать на Форексе, тогда бездепозитный форекс бонус поможет начать свой путь с минимальными затратами, а точнее бесплатно.
Стильные мужчины не меньше женщин обращают внимание на аксессуары, магазин копий швейцарских часов поможет подобрать для вашего имиджа соответствующие красивые часы.
Компания Pool.ua с целью улучшения Украины предлагает создавать фонтан в городе, парке, торговом и развлекательном центрах, с использованием водных шоу.

Как вам пост?

Древовидные комментарии в Blogger

четверг, 19 января 2012 г.

Как и обещали разработчики после BlogWorld они выпустили очередное и достаточно внушительное обновления движка. На этот раз "досталось" комментариям - наверное самому ожидаемому аспекту системы. Что ж теперь официально система Blogger поддерживает древовидные комментарии. Все пользователи смогут писать ответы для конкретной записи и будет намного понятнее кто и для кого оставил определенный комментарий.

Вообще многие пользователи системы достаточно часто жаловались на отсутствие древовидных комментариев, которые есть в ЖЖ и Worpdress. Кое-кто из-за этого даже перешел на форму комментариев Disqus хотя в ней и без этого много плюсов. К счастью, сейчас все проблемы с древовидными комментарием в Blogspot решены. Выглядеть это будет приблизительно так:

Как же активировать древовидные комментарии? - спросите вы. А не нужно ничего делать! Если у вас уже указано в настройках комментариев отображение "Встроенной" формы и для RSS фида блога установлен вариант "Полный", тогда все начнет работать автоматически.
Дабы проверить все эти параметры заходите в админку Blogspot. Сначала посмотрим фид - открываем раздел "Настройки" - "Другое", где есть параметр "Разрешить фид блога". Напомню, что должен быть установлен "Полный", то есть весь пост уйдет в RSS.

Дальше переходим в пукнт меню "Настройки" - "Сообщения и комментарии". Здесь в параметре "Расположение комментария" должно быть указано значение "Встроенный" - это значит, что форма с ответами будет располагаться на той же странице, что и заметка блога, а не открываться в новом окне.

Собственно, попробовал на одном из тестовых блогов Blogspot установить все нужные параметры и действительно опция древовидных комментариев появилась сама собой. После того как нажмете "Ответить" форма комментирование перегрузится под соответствующим комментарием и там же потом появится запись.

Что еще более круто - все ответы можно показывать и скрывать -для этого видите на картинке выше ссылку "Ответы" с небольшой иконкой слева от нее. Очень удобно и красиво все это выглядит. Кстати, если вам интересно можете также почитать про древовидные комментарии wordpress - как это реализовывается для еще одной популярной блоггерской CMS.

Древовидные комментарии для нестандартных шаблонов

Как видите, все просто и легко, но если вы используете стандартные базовые шаблоны. Если же у вас свой нестандартный макет, то придется немного с ним "пошаманить". Первый делом зайдите в админку блога и проверьте все параметры, о которых я говорил выше - встроенная форма комментирования, полный rss фид. Если после этого никакие древовидные комментарии не появились - тогда вам потребуется дополнительная настройка. Есть несколько методов для ее реализации.

Но перед началом работы обязательно сделайте бэкап блога. В новом интерфейсе для этого нужно зайти в раздел "Шаблон" и в правом верхнем углу появится кнопка "Резервное копирование и восстановление" - кликаете и в открывшемся окне выбираете "Загрузить шаблон полностью".

Теперь переходим непосредственно к вариантам установки древовидных комментариев для нестандартных шаблонов:

1. Самый простой и быстрый способ - "сбросить" (переустановить) все виджеты к настройкам по умолчанию. ВНИМАНИЕ! Сделав это вы навсегда потеряете все дополнительные настройки и хаки, которые вносили в HTML код вашего шаблона блога. Понятно, что для новых и не очень больших проектов это не критично, но в большинстве случае лучше этого не делать.

Дабы сбросить настройки виджетов в состояние по умолчанию заходим в раздел "Шаблон", кликаем по кнопке "Изменить HTML". Перед вами откроется окно с кодом шаблона, где внизу будет ссылка "Восстановить шаблоны виджетов по умолчанию". Если же вы случайно ее нажали для теста, после чего все настройки были утеряны - не стоит паниковать, вы сможете восстановить из файла бэкапа, который сохранили ранее.

2. Если вы не хотите переустанавливать все виджеты в шаблоне, тогда просто нужно будет отредактировать немного кода вручную. Снова заходим в меню "Шаблон" - "Изменить HTML", а также отмечаем галочку "Расширить шаблоны виджета". После этого находим в коде строку

<b:include data='post' name='comments'/>

и заменяем все(!) ее вхождения на этот код:

<b:if cond='data:post.showThreadedComments'>

<b:include data='post' name='threaded_comments'/>

<b:else/>

<b:include data='post' name='comments'/>

</b:if>

Сохраняете шаблон. После этого древовидные комментарии должны появиться в блоге. Если что-то пошло не так, тогда попробуйте сделать все еще разок. Увы, 100% гарантии что все будет хорошо работать для нестандартного шаблона никто дать не может. Кстати, по умолчанию Blogger будет загружать 200 самых старых комментариев, а увидеть остальные поможет специальная ссылка, позволяющая показать еще более ранние записи.

P.S. Дабы интернет сайт приносил пользу вашему бизнесу необходима SEO раскрутка сайта в поисковых системах - это позволит получить дополнительных клиентов.
Выбирая имя для будущего малыша неплохо было бы узнать значение имен женский или мужских, которые вам больше всего нравятся и среди который делаете выбор.
В Киеве номера отелей достаточно дорогие и не всегда хорошие, а квартиры посуточно в Киеве можно найти значительно дешевле в любом месте города и весьма удобные.

Ярлыки: Возможности системы , комментарии , новые функции

Как вам пост?

Интеграция Google Analytics в Blogger

суббота, 14 января 2012 г.

Тема статистики блога на страницах данного проекта затрагивалась уже неоднократно. Не так давно я писал о встроенной статистике (включая виджет-счетчик) которая появилась у Blogger. При всех своих достоинствах данную статистику сложно назвать детальной и подробной, она скорее носит "обзорный" характер. Да, с ее помощью вы можете узнать примерное представление о трафике, посещаемости, но не более того. Поэтому продвинутые пользователи как и прежде продолжили использовать мощную аналитику от стороннего «производителя» (вроде Google Analytics, Ли.ру или Яндекс.Метрика). Собственно в заметке про статистику блога на Blogspot я также успел о некоторых из них рассказать.

Вообще думаю, что полноценная «сторонняя» система статистики заслуживает больше внимания - у нее больше потенциал, возможности, функции. Вероятно, разработчики понимая это, решили для всех пользователей Blogger облегчить процесс интеграции (что немаловажно для новичков) блога со статистикой Google Analytics.

Теперь, если у вас уже имеется аккаунт Google Analytics, вам достаточно зайти в настройки Blogger → Другое (Settings → Other) и указать в поле Google Analytics ваш ID:

Если вы не знаете где найти ваш ID, вот небольшая инструкция:

1) Зайдите в GA. Если у вас уже отслеживаются там какие-то сайты, нажмите в профиле одно из сайтов «Изменить»:

На открывшейся странице скопируйте ID.

2) Если у вас не добавлено не единого сайта, добавьте первый (ваш блог), в процессе ваш ID (Web Property ID) будет показан вам неоднократно.

P.S. Кстати, если у вас используется нестандартный шаблон, вам стоит проверить присутствует ли в коде следующая секция:

<b:include  name='google-analytics' data='blog'/>

Если нет, добавьте ее в любое место до закрывающего тега </body>. Потому, что иначе ничего работать не будет. В целом, как видите, добавление статистки Google Analytics реализовано максимально просто, каждый пользователь даже с минимальным опытом работы в Blogger сможет это сделать.

P.P.S. Вебмастерам-новичкам предстоит многому научиться начиная от вопроса как создать сайт заканчивая seo продвижением его в поисковиках и монетизацией.
Всем, кто посещает Киев на пару дней по работе в командировке квартиры посуточно киев очень пригодятся дабы не платить большущие деньги за номера в отелях при невысоком их качестве.