Как заново настроить блог на Blogger/Blogspot после смены шаблона

В последнее время я несколько раз меняла шаблоны на своих блогах на Блогспоте, поэтому мне приходилось заново настраивать некоторые виджеты, удалять лишние ссылки и прочее, и прочее, и прочее. Поэтому я решила сделать для себя пост-памятку, чтобы потом не бегать по закладкам и гугло-яндексу в поисках нужной информации. Возможно, и вам пригодится эта инструкция по настройке блога на Blogspot/Blogger платформе. 

Смену шаблона можно сравнить с ремонтом в квартире, в ходе которого вся мебель сдвигается в одну комнату и накрывается полиэтиленом. Картины и часы, украшающие интернет спрятаны в коробки. Живые цветы тоже эвакуированы. А порой и плинтуса сняты. После того, как ремонт сделан новый шаблон установлен, хозяину или хозяйке квартиры блога предстоит все вернуть на место. Я расскажу вам, как это делаю я. Если вы тоже будете что-то настраивать у себя, то не забывайте сохранять шаблон и ставить галочку в пункте "Расширить шаблоны виджета". 

Пункт первый: оптимизационно-обязательный 
Оптимизируем мета-теги

При смене шаблона необходимо заново оптимизировать мета-теги "title" и "description", с которыми в Blogger/Blogspot не все так просто. Я еще не так часто меняла шаблоны, чтобы запомнить наизусть, что именно нужно добавить в код шаблона, поэтому пользуюсь следующими инструкциями: 

1. Оптимизация заголовков страниц блога (это про "title")

2. SEO-оптимизация мета-тега "Description"

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

Пункт второй: сравнительно обязательный
Русифицируем виджет от Linkwithin 

Сейчас сложно представить себе блог, в конце каждой статьи которого нет ссылок на похожие посты. Для того, чтобы и в моем блоге такая радость была, я использую сторонний виджет Linkwithin. Устанавливать этот виджет заново обычно не приходится. Обычно, но не всегда: например, когда я сменила шаблон здесь, на Одноносчанах, виджет из пяти похожих постов больше не убирался в основную колонку, поэтому мне пришлось заново установить его, уменьшив количество отображаемых постов с пяти до четырех. 

Что точно необходимо сделать после смены шаблона, так это указать текст, который будет открывать виджет. По умолчанию этот текст выглядит так: "You might also like:". И хотя интуитивно каждый понимает, о чем говорит этот текст, но текст на русском выглядит более уместно. Для того чтобы заменить красивые английские буквы на не менее симпатичные русские, в код шаблона нужно вставить следующую строку: 

<script>linkwithin_text='Ваш текст:'</script>

"Ваш текст:" надо заменить на то, что вам больше нравится. Можно написать: "Читайте также:", а можно и "Похожие посты:".  Хозяин - барин. Лично я выбрала такой вариант:

<script>linkwithin_text='Читайте также:'</script>

Эту строчку я вставляю перед закрывающим тегом </head>  в коде шаблона.

Пункт третий: общественно-полезный и обязательный
Социализируемся с помощью кнопок

Свой набор кнопок социальных сетей еще никому не помешал, поэтому после смены шаблона нужно заново его установить. Проверенные на себе инструкции находится здесь и здесь. Я использую сейчас первый вариант, но только вам решать, какой вам больше по сердцу.

В этом же пункте можно установить кнопку "Retweet". Я ее установила в правый верхний угол поста. Не могу порадовать вас русскоязычной инструкцией, как это сделать, потому что пользовалась зарубежными источниками: один и два. 

На самом деле все просто: нужно решить, где именно будет располагаться кнопка в посте, выбрать нужный код кнопки, а потом либо вставить его перед <data:post.body/>, либо после <div class='post-header-line-1'/>.

Сам код кнопки у меня выглядит так:

<div style='float:right; padding:10px;'>
<script type='text/javascript'>
tweetmeme_url = &#39;<data:post.url/>&#39;;
tweetmeme_source = &#39;tshavandina&#39;;
</script>
<script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/>
</div>

На месте выделенного красным цветом tshavandina должно стоять ваше имя пользователя в Твиттере. Выделенный зеленым css-код float:right; padding:10px;  означает, что кнопка находится справа (float:right;) и отстоит от окружающих элементов на 10 пикселей (padding:10px;). В некоторых вариантах кода вместо padding используется margin. В чем между ними разница, я понимаю пока только где-то в глубине души. Где-то очень-очень глубоко.

Апдейт: решила по совету умных людей добавить и кнопку "Гугл плюс" на страницы своего блога. Для этого воспользовалась отличной статьей, которая позволяет прямо на месте настроить внешний вид кнопки и сама генерирует код для нее.

Одну кнопку я поставила рядом с кнопкой "Retweet" вверху поста: для этого добавила в код, опубликованный выше строчку  <g:plusone size="tall" expr:href="data:post.url"/> прямо после открывающего тега <div>. Получилось вот что:

<div style='float:right; padding:10px;'>
<g:plusone size="tall" expr:href="data:post.url"/>
<script type='text/javascript'>
tweetmeme_url = &#39;<data:post.url/>&#39;;
tweetmeme_source = &#39;tshavandina&#39;;
</script>
<script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/>
</div>

Вторую кнопку добавила в конце к кнопкам социальных сетей, вставив тот же код (<g:plusone size="standard" expr:href="data:post.url"/>) сразу после кода кнопки Одноклассников. 

Пункт четвертый: вроде бы обязательный, но не опробованный до конца
Удаляем внешние и внутренние ссылки из шаблона Blogger

Как известно, блоги на Блогспоте просто кишат разными внешними ссылками, которые жизнь не портят, не зудят и не чешутся, но могут помешать вашему блогу занять достойное место в поисковой выдаче и получить заслуженные награды "пузомерки". Раньше я удаляла только загадочную подписку Atom, но вчера нашла, пожалуй, самую полную инструкцию "Как удалить внешние и внутренние ссылки из Blogger/Blogspot".

Я не уверена, что однажды займусь тщательной чисткой ссылок в блоге. Я видела много неоптимизированных блогов, которые прекрасно существуют и процветают, и даже получают достойные места в выдаче и заслуженные награды, но может ради эксперимента... когда-нибудь... после того, как переделаю все свои дела. А вот убрать подписку Atom, которой я никогда не пользовалась в других блогах можно очень просто. Достаточно удалить из кода шаблона строку <b:include name='feedLinks'/>. И всё - Росатом больше не будет подглядывать за вашим блогом.

Пункт пятый: иногда случается
Восстанавливаем древовидные комментарии в Blogspot/Blogger

Когда некоторое время назад Блогспот наконец представил древовидные комментарии, я с ужасом поняла, что они не везде работают. Некоторые неродные шаблоны не поддерживают этого нововведения, но это не значит, что сделать ничего нельзя. Чтобы воспользоваться долгожданными древо- и кустовидными комментариями, нужно найти в коде шаблона строки:

<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>

Это я не сама придумала, а зарубежные специалисты, написавшие статью "Threaded Comments For Blogger".

Пункт шестой: декоративно-полезный
Оформляем ссылку "Читать далее..."

Для этого знакомимся со статьей "Красиво оформляем ссылку "Дальше>>". А перед тем, как начать играться с цветовым оформлением кнопки я предлагаю вам прочитать...

Пункт седьмой: радующий глаз своей цветовой гармонией
Выбираем цветовую гамму для блога

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

Я не знаю, как это делают профессиональные дизайнеры, но вот как попробовала это сделать я. Я решила подобрать цвета, используя картинку в шапке блога. Предположим, что в шапке блога у вас находится такая картинка:

...и вы хотите, чтобы цвета вашего блога гармонично сочетались с ней. Идем на сайт Whatsitscolor.com и загружаем нашу картинку или вводим адрес, по которому она находится. И вот что нам выдает этот сервис:

Я нашла еще один генератор цветовой палитры по изображению -   Color Palette Generator. Здесь результат был следующим:

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

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

Это инструкция не является полной, так как я не упомянула о настройках формы подписки и некоторых других загадочных вещах, но это в другой раз... когда-нибудь потом...однажды. Например, завтра. Или через месяц.

Иллюстрация: http://buzz.blogger.com/2010/11/welcome-google-apps-users.html