Итак, я создал блог. Пока что мне многое нравится, энтузиазм мой не остыл, хочется написать что-нибудь интересное и полезное.
В первую очередь, хорошо бы обустроить рабочее пространство блога, сделать так, чтобы все было удобным и функциональным, по возможности.
Этим мы и займемся сейчас.
1. Коррекция внешнего вида, шаблона.
При регистрации я выбрал один из стандартных шаблонов. В целом, он мне нравится. Сильно заморачиваться по поводу дизайна пока что не хочется. Но есть один недочет, который меня смущает. Гаджет "Постоянные читатели", при клике на одного из читателей очень некрасиво себя ведет: появляется полоса прокрутки по вертикали, а по горизонтали прокрутки нет, и текст не до конца виден. Вот так это было:
Вывод - надо изменить ширину левой колонки, а возможно и всего блога в целом.
Захожу по цепочке ссылок: Настроить - Макет - Изменить HTML.
Для внесения данных произвольных правок без знания HTML/CSS не обойтись. В начале шаблона идет таблица стилей. Я нашел все блоки, которые отвечали за ширину блога. В частности, блоки #outer-wrapper, #main-top, #main-bot, #wrap2 имели ширину 700px, я решил увеличить эту общую ширину на 200px, т.е. поставил для них width:900px;
Соответственно на 100px увеличиваю ширину левой колонки и основного контента:
#main {
width:530px;
}
#sidebar {
width:250px;
}
Изначально эти ширины равнялись 430px и 150px.
Предварительный просмотр показал, что блог раздвинулся по ширине, как я и планировал. Теперь гаджет "Постоянные читатели" имеет достаточную ширину и все слова видно полностью.
Однако появилась проблема с фоновыми рисунками газетной страницы. Эти рисунки были шириной 700px, и они создали у правого края такую вот более темную желтую границу, пересекающую текст:
Из этого следует, что мне нужно как-то изменить эти фоновые рисунки.
2. Использование произвольных рисунков с таблицах стилей шаблонов Blogspot.
Итак, задача такая. В таблице стилей есть фоновые рисунки шириной 700px. Например, вот этот:
background:#FFF3DB url("http://www2.blogblog.com/scribe/bg_paper_top.jpg") no-repeat top left;
т.е., сам рисунок расположен по ссылке:
http://www2.blogblog.com/scribe/bg_paper_top.jpg
Необходимо сделать аналогичный рисунок шириной 900px, закачать его на некий сервер и поменять ссылку в таблице стилей.
Немного подумав, я нашел такой способ. Лучше всего использовать сервер Google, раз уж это не автономный блог. Чтобы все было на Google, так надежнее. Я нашел у Google сервис под названием "Веб-альбомы Picasa". Этот сервис позволяет хранить в Интернете свои фотографии, а также любые другие картинки. Я зашел туда под своим Google-аккаунтом и понял, что это подходящий вариант. Я увидел, что там уже хранится мои рисунки, которые я использовал в этом сообщении (см. выше). Т.е. это удобное централизованное хранилище рисунков, которые могут понадобиться для работы с блогом.
Далее дело техники. Открыл в браузере все необходимые рисунки, которые нужно расширить на 200px. Сохранил их на жесткий диск. Увеличил ширину до 900px в графическом редакторе, не меняя при этом высоту. Загрузил их в фотоальбом Picasa, скопировал ссылки этих рисунков. Например, вышеупомянутый рисунок
http://www2.blogblog.com/scribe/bg_paper_top.jpg
после изменения размеров я назвал
bg_paper_top_900.jpg
а в альбоме Picasa он сохранен и доступен по ссылке
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIsjP7pFqRydOp6qPjOeuNdkcHeHaxnNcFUlFRol0fu88eMI31_kd8ORIF4Fc8-hbL31j24L7HkkgeF6rrVd6hPwcab8hfclEscS6SYO8XYhMXeoQ4B2DXs6S2HR_LNwSWC9RVtE0rx54/
Вот эту замысловатую ссылку я и заменил в таблице стилей в соответствующем месте:
background:#FFF3DB url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIsjP7pFqRydOp6qPjOeuNdkcHeHaxnNcFUlFRol0fu88eMI31_kd8ORIF4Fc8-hbL31j24L7HkkgeF6rrVd6hPwcab8hfclEscS6SYO8XYhMXeoQ4B2DXs6S2HR_LNwSWC9RVtE0rx54/") no-repeat top $startSide;
Аналогично с остальными рисунками, требующими расширения.
После этого сохранил шаблон. Теперь внешне все выглядит замечательно, как я и хотел на данный момент. Темно-желтая полоса отодвинулась к правому краю страницы.
3. Некоторые косметические правки.
Еще мне хочется увеличить заметность ссылки на комментарии после сообщений. Для этого снова редактирую HTML-код шаблона.
Включаю галочку "Расширить шаблоны виджета" над редактором шаблона.
Нахожу код, отвечающий за вывод ссылки на комментарии:
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
Доступа к классу comment-link у меня нет, по-крайней мере, я не придумал сразу, где его найти. Методом логических рассуждений, предполагаю, что надо вставить атрибут style в открывающий тег <a>. Так и делаю:
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' style='font-size:16px; font-weight:bold; text-decoration:none; color:red'>
Сохраняю, все отлично сработало.
Теперь ссылка на комментарий у меня жирным шрифтом размером 16px, без линии подчеркивания, красным цветом. Красный цвет бросается в глаза и неплохо вписывается в дизайн блога, так что оставляю. Все-таки, комментарии - это важная часть блога, они не должны остаться незамеченными.
Еще я нашел в настройках, что по умолчанию стоит Тихоокеанский часовой пояс. А мне лучше переключиться на Московское время. Нахожу в панели управления:
Настройки - Форматирование - Часовой пояс
Выбираю время по Гринвичу +3 часа, Москва. Сохраняю настройку.
4. Изменение тега <title>
Тег <title> наиболее важен для SEO-оптимизации. В смысле, он важен не только для роботов, но я для людей. Потому что если человек найдет блог через поисковую систему, например, Google или Яндекс, в поисковой выдаче он первым делом увидит заголовок сайта - то, что содержится в теге <title>. Важно сделать так, чтобы <title> содержал краткое описание страницы, то которое нужно по смыслу.
По умолчанию, Blogspot в теге <title> на первое место ставит название блога. У меня название длинное и довольно общее по смыслу: "Жизнь в Интернете и не только..." Если человек увидит такой заголовок в поисковой выдаче, он вряд ли поймет, о чем конкретная статья, стоит ли переходить на этот блог.
Поэтому мне нужно сделать так: если мы на главной странице, то пусть показывается название блога. А если мы на странице конкретного сообщения, пусть показывается заголовок сообщения. Немного побродив по Интернету, нашел такой рецепт: вместо кода
<title><data:blog.pagetitle/></title>
необходимо поставить код:
<b:if cond="'data:blog.pageType"></b:if>
<title><data:blog.pagename/></title>
<b:else><title><data:blog.pagetitle/></title></b:else>
Интуитивно понятно, что это условные операторы, которые понимает Google.
Мне стало интересно, что это за язык (API), можно ли изучить его полнее, чтобы свободно редактировать блог. Если что-то узнаю, это будет темой для следующих сообщений.
5. Статистика посещений.
Мне нравится статисткиа LiveInternet.ru. Хочу поставить ее на свой блог. Для этого, как обычно, зарегистрировался в сервисе статистики, получил код счетчика. Далее нужно вставить его в блог. Просто вставить в шаблон не получилось. Решение оказалось гораздо удобнее:
В панели управления идем по адресу Макет - Элементы страницы.
Кликаем "Добавить гаджет" в боковой панели.
Выбираем тип гаджета HTML/JavaScript.
Вставляем код счетчика в поле "Содержание".
Заголовок оставляем пустым. Сохраняем.
Передвигаем мышкой гаджет в нужное место.
Готово.
На этом базовые настройки завершены. Это то, что я хотел сделать для начала. Заодно ознакомился с возможностями настойки блогов Blogspot, хотя еще вчера я не имел об этом понятия :)
