2008-02-04

Перекройка шаблона Blogger или N шагов к настоящему

После того как я зарегистрировал площадку на сервере blogspot, встал вопрос о «прокачке» шаблона. Стандартное оформление не впечатлило. Пришлось немного поупражняться с напильником. По закону жанра ответы были найдены в google.
Дружеский совет: сохраняйте локальные копии шаблона до изменения и после его успешного применения.
Далее следует краткий эпос о том, как шаблон эволюционировал за последний месяц, а именно столько просуществовал этот блог :)

1. Для начала советую ознакомиться с заметкой Михаила Конника. Там есть много вкусного и полезного. Мною были почерпнуты ценные байты про перевод статей на другие языки (а точнее на english) и устранение NavBar.

2. Исходя из тематики блога, часто приходится публиковать консольные команды и терминальный вывод. Ознакомиться с необходимой инструкцией можно тут. У меня стиль оформления кода описан так:
pre.listing { 
border: 1px solid #aaaaaa;
overflow: auto;
padding: 10px;
font-family: courier new;
font-size: 9pt;
background: #e9edeb;
}

Также пост Дмитрия Конищева помог прикрутить компонент «Читать далее».

3. Следующим пунктом будет монтирование новомодного облака меток. How-to на русском брал здесь. Даже менять ничего не пришлось. Цвет тегов вписался в шаблон.

4. Социальные кнопки прикручивал, руководствуясь статьей Юрия Евстигнеева.
Единственное, пришлось потом поменять высоту footer'a:
.post-footer { 
background: #ffffff;
height: 85px;
margin:0;

5. Поиск по блогу и последние комментарии установил двумя кликами. Эти штуки брал отсюда (называется (Recent comments widget и Search widget).

6. Роботам, коллекционирующим адреса почтовых ящиков было отказано в приеме. Симпатичные иконки для разных серверов (в моем случае для GMail) брал тут.

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

8. Лента планеты блогов о *NIX транслируется через стандартный RSS-компонент blogger'а.

9. Кнопки были перемещены всем скопом на дно страницы. Все они имеют разрешение 85x15 точек и не отвлекают посетителей. К тому же не уродуют внешний вид блога. По крайней мере хочется надеяться на это :)

10. Так были изменены стили оформления комментариев.

11. Ссылка на содержание блога родилась благодаря этой заметке.

12. Виджет "похожие посты" внедрил по инструкции Hoctro.

Успехов!

10 комментариев:

  1. Воспользовался некоторыми советами,опубликованными у Вас в блоге.Спасибо))Единственно не понравилось вставка кода.Ява скрипт между тегами < pre class = " listing" > < / pre > исполняется.

    ОтветитьУдалить
  2. Могу посоветовать эту заметку. Там приводится описание мощного решения для постинга кода.

    ОтветитьУдалить
  3. Спасибо за линк, добавил ссылку на Ваш блог в свой блогролл.

    ОтветитьУдалить
  4. Вам спасибо, за линк :)

    ОтветитьУдалить
  5. Спасибо, огромное, почти, при своей перекройки блога, были те же шаги.
    Тоже поставил ссылку на Ваш блог.

    ОтветитьУдалить
  6. Анонимный21.03.2009, 12:45

    Добрый день!
    Немного не понял как сделать возможность публикации кода.
    1. Куда вставлять этот блок:
    pre.listing {
    border: 1px solid #aaaaaa;
    overflow: auto;
    padding: 10px;
    font-family: courier new;
    font-size: 9pt;
    background: #e9edeb;
    }

    2. Помимо блока я так понял нужно выполнить инструкции по ссылке?

    Спасибо!

    ОтветитьУдалить
  7. Да, необходимо сперва прочитать инструкцию по ссылке. Там все подробно описано. Я лишь привел вариант оформления блока с кодом.

    ОтветитьУдалить
  8. Анонимный21.03.2009, 15:15

    А в какую секцию вставлять блок оформления, в секцию Post, там же где блок оформления цитат? :)

    ОтветитьУдалить
  9. Анонимный24.03.2009, 18:30

    Спасибо за заметку!
    Кое что прикрутил к своему блогу благодаря Вашей статье.

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