Мастер класс "Детальная настройка Linkwithin"

Всем привет!
Сегодня я расскажу Вам как сделать в блоге ссылки на похожие сообщения 
при помощи Linkwithin.

Детальная настройка Linkwithin.

Для тех, кто еще не знаком с этим "чудом"
проведу краткое введение что это такое и как его едят.

Итак, Linkwithin - это сайт, где можно создать виджет , который позволяет выводить в конце сообщения ссылки с превью на похожие сообщений блога. Этих ссылок-картинок может быть от 3 до 5-ти. Располагаются они под каждым сообщением блога. Виджет анализирует что Вы написали в сообщении, какие ярлыки поставили и выдает под ним ссылки на похожие по смыслу сообщения из Вашего же блога.
Такие ссылки - очень полезная штука. Они увеличивают посещаемость блога и усиливают желание посетителей побродить, почитать, посмотреть, возможно, прокомментировать. Это как нескончаемый лабиринт, который заманивает остаться в Вашем блоге надолго.

Пройдитесь по моему блогу и увидите, что внизу каждого сообщения, над комментариями присутствуют такие себе симпатичные квадратики с картинками,  которые призывают заглянуть еще на какую-нибудь статью Домика Зайкиных вязалок. :)

Детальная настройка Linkwithin. Вид ссылок в сообщениях блога

Мастер классов по данному виждету в сети предостаточно.
Но есть неудобство - при стандартной установке Linkwithin в блог картинки-ссылки присутствуют под каждым сообщением и видны как на главной странице блога, так и на странице с самим сообщением.
Меня такой вариант не устроил. Наличие этих ссылок-картинок на главной странице очень загромождает блог и мешает его нормальной загрузке. Я, например, жду загрузку Главной страницы блога 1-2 секунды несмотря на мое, довольно неплохое, интернет-соединение.

Побродив по сети и прочитав кучу информации, я собрала все воедино и добилась желаемого.

У меня в блоге ссылки на главной странице отсутствуют!

Все чистенько, грузится в разы быстрее, обилия картинок нету и ничто не мешает посетителям скролить страничку просматривая блог в целом.

Детальная настройка Linkwithin. Отсутствие ссылок на главной странице

В этом пошаговом мастер классе я расскажу 

как убрать ссылки с главной страницы блога, но оставить их на страницах сообщений

 и как заменить стандартную надпись от Linkwithin "You might also like" 
на "Прочитать также:" или на любую другую.

Готовы? Начинаем!

Шаг 1

Идем на сайт Linkwithin

Заполняем поля в голубом окошке слева:
E-mail
Blog Link - Копируем адрес блога
Platform - выбираем Blogger
Width - выбираем количество сообщений, которые будут показываться (у меня 5)

Если у Вас блог со светлым текстом на черном фоне, то ставим галочку "My blog has light text on a dark background".

Жмем Get Widget

Детальная настройка Linkwithin. Мастер класс. Шаг 1

Шаг 2

Попадаем на страницу с инструкциями.
Ее можно прочесть и сделать так как там написано, НО...
У меня на этапе № 2 этой инструкции, Linkwithin намертво зависал и никакого добавления не происходило.
А еще учтите, что при стандартной установке этого виджета Вы получите все иконки-картинки на главной странице и замечательную надпись "You might also like"над ней.

Но мы же не этого добиваемся?
Поэтому просто жмем на слова "Install Widget".

Детальная настройка Linkwithin. Мастер класс. Шаг 2

Шаг 3

Попадаем уже в меню Blogger.
Именно в этом меню Linkwithin замер и отказался устанавливаться нормальным способом. Впрочем, ему же хуже :)
Здесь, жмем на слова "Редактировать содержание:"

Детальная настройка Linkwithin. Мастер класс. Шаг 3-1

Когда откроется окошко редактирования кода, переписываем из него 7 циферок в конце второй строчки - var linkwithin_site_id = ххххххх;

Детальная настройка Linkwithin. Мастер класс. Шаг 3-2

Все, закрываем эту страничку и сайт Linkwithin.

Шаг 4

Открываем панель управления Blogger на вкладке "Шаблон"
Жмем кнопку "Резервное копирование и восстановление" в правом верхнем углу

Детальная настройка Linkwithin. Мастер класс. Шаг 4-1

В открывшемся окошке жмем "Загрузить шаблон полностью"

Детальная настройка Linkwithin. Мастер класс. Шаг 4-2

И сохраняем xml шаблон блога где-нибудь на компьютере.

Этот шаг можно пропустить, если Вы понимаете ЧТО Вы делаете или уже не в первый раз редактируете шаблон. В противном случае, эти небольшие манипуляции помогут Вам вернуть внешний вид и настройки блога, если что-то пойдет не так.

Шаг 5

Возвращаемся к панели управления Blogger, вкладка "Шаблон"

Жмем "Изменить HTML"

Детальная настройка Linkwithin. Мастер класс. Шаг 5-1

Откроется вот такое окошко.
Да-да, блоггер изменил внешний вид панели управления HTML-шаблона, поэтому теперь мы не ищем галочку "Расширить шаблоны виджета", а методично и скрупулезно открываем все скрытые строки путем нажатия мышкой на черные стрелочки возле номеров строк
Я рекомендую начинать открывать скрытые строки с конца! Для этого опускаем ползунок окна справа вниз и начинаем клацать по черным стрелочкам мышкой. Почему снизу? Ну так удобнее :) Меньше надо скроллить мышкой.
Обязательно убедитесь что открыли все скрытые строки. Пролистайте все окошко с кодами вверх-вниз пару раз!

Детальная настройка Linkwithin. Мастер класс. Шаг 5-2

Шаг 6

Теперь ставим курсор в окно с кодами и нажимаем на клавиатуре Ctrl+F.
Вверху окна откроется строка поиска, в которую копируем вот этот код

<div class='post-footer'>

и нажимаем Enter. Найденный HTML код будет подсвечиваться желтоватым.

Детальная настройка Linkwithin. Мастер класс. Шаг 6

Если поиск в окне HTML-кодов НЕ работает.
У меня было так, что я не могла найти нужную строку, а автор МК по которому я что-то пыталась установить, утверждал, что строка есть абсолютно в любом блоге. Решив, что это проблемы с поиском я нашла вот такой выход:
а) Кликаем в окне правой клавишей мыши и выбираем "Выделить все"
б) Жмем на клавиатуре Ctrl+C

Детальная настройка Linkwithin. Мастер класс. Если поиск не работает

в) Открываем программу MS Exсel и поставив курсор в первую ячейку нажимаем Ctrl+V. Весь наш html код появится в таблице.
г) Жмем Ctrl+F, откроется окно поиска, куда вставляем искомую строку. Нажимаем "Найти далее" или "Найти все" и радуемся хорошей работе поисковика. Если использовать команду "Найти все", то у Вас высветятся ссылки на все строки, которые содержат нужные нам коды. Можно просто нажать на ссылку и перейти к коду. Удобно очень для навигации.

Детальная настройка Linkwithin. Мастер класс. Если поиск не работает

Детальная настройка Linkwithin. Мастер класс. Если поиск не работает

д) после того как нужный код найден, смотрим на номер строки в Exсel, открываем блоггер и ищем строчку с таким же номером. Там 100% будет нужный нам код.

Детальная настройка Linkwithin. Мастер класс. Если поиск не работает

Шаг 7

!!!Читаем очень внимательно!!!

Перед кодом <div class='post-footer'> нам надо вставить вот этот код:
-----------------------------------начало кода-----------------------------------
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script>
var linkwithin_site_id = ххххххх;
(function () {
var elem = document.createElement(&#39;script&#39;);
elem.type = &#39;text/javascript&#39;;
elem.src = &#39;http://www.linkwithin.com/widget.js?rand=&#39; + Math.random();
document.getElementsByTagName(&#39;head&#39;)[0].appendChild(elem);
})();
</script>
<a href='http://www.linkwithin.com/' rel='nofollow'><img alt='Blog Widget by LinkWithin' src='http://www.linkwithin.com/pixel.png' style='border: 0'/></a>
<script>linkwithin_text=&#39;Прочитать также:&#39;</script>
</b:if>
-----------------------------------конец кода-----------------------------------
При этом надо заменить ххххххх  - на Ваш ID (циферки, которые мы записали в Шаге 3)
Прочитать также: - заменить на свой текст или оставить как есть, если Вам нравится.

 rel='nofollow' - этот элемент можно вообще удалить, но из Таниной статьи в блоге  "Блог ради блога" я вынесла информацию, что внешние ссылки - зло злющее. Поэтому у меня атрибут nofollow есть и Вам рекомендую его оставить :)

Детальная настройка Linkwithin. Мастер класс. Шаг 7

 Нажать  "Сохранить шаблон" и наслаждаться приростом посещаемости страниц, увеличению количества ПЧ и чистенькой и лёгенькой главной страницей!!!
п.с. Последний скрин я не обновляла под новый редактор HTML-шаблонов, по причине глюков в моем блоге, поэтому у Вас кнопка "Сохранить шаблон" будет вверху страницы :)

Совет по облегчению правки HTML кода:
1.Откройте на компьютере файл - Блокнот (Пуск-Программы-Стандартные-Блокнот)
2. Скопируйте туда код из Шага 7 этого мастер-класса.
3. В своем Блокнот-файле замените ххххххх на свой ID (цифры из Шага 3 этого МК)
4. Замените текст Прочитать также: , если есть желание.
5. Скопируйте измененный Ваш код из Блокнота и вставьте перед <div class='post-footer'> в html-редакторе блога.
6. Нажмите "Сохранить шаблон".

Спасибо, что дочитали до конца!

Если будут вопросы - пишите в комментариях или как Вам удобно. 

Контакты для связи слева вверху страницы блога.

При составлении этого МК мною обработаны и использованы следующие материалы:
BloggerForum
BlogoHelp
Блог ради Блога