Как натянуть свою "шкурку" на шаблон

ШкуркиСегодня мы поговорим о скинах (англ. skins), в простонародье "шкурках".

Каждому из нас, блогеров, хочется выразить в блоге свою индивидуальность, сделать его полностью своим, непохожим на другие, отражающим нашу суть. Стандартные шаблоны, предлагаемые в Blogger (Blogspot) в этом нам, увы, не помогают. Что ж, будем их дорабатывать под наши нужды!

Что по сути из себя представляет "шкурка"? "Шкурка" - это набор элементов, которые нужно расположить в правильном порядке. На Blogger основных элементов 6: 1. шапка (header), 2. середина (main), 3. подвал (footer), 4. список страниц, вкладок (tabs), 5.общий фон (background) и 6. градиентная заливка фона вверху (gradient). Номера я проставил по степени значимости и востребованности.

Шаблон по частям

Если ваш скин имеет все эти элементы отдельно - хорошо. Если нет, то вам придется "поработать ножницами", чтобы разобрать его на составляющие. В принципе, каждый из этих элементов не является обязательным. Любой из них можно не задействовать. А можно и оставить тот, что предоставлен исходным шаблоном.

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

Теперь переходим непосредственно к натягиванию различных элементов "шкурки". Идем по порядку.

Сначала шапку. Заходим в модуль редактирования шаблона (Дизайн->Изменить HTML) и ищем в шаблоне блок кода, начинающийся с ".header-outer". Сразу под ним вставляем строки вида "background: url(<ссылка на картинку фона шапки>); width: <...>px; height: <...>px;". Выглядеть это будет примерно так:
.header-outer {
  background: url(https://lh6.googleusercontent.com/PQSU/header.jpg); 
  width: 1028px; /* ширина картинки */
  height: 200px; /* высота картинки */
/* прочие строки кода */
}
Затем середину (в идеале это полоска высотой в 1 пиксель, которая будет размножена по вертикали). Ищем в шаблоне блок кода, начинающийся с ".main-outer". Сразу под ним вставляем строки вида "background: url(<ссылка на картинку фона середины>); width: <...>px;". Выглядеть это будет примерно так:
.header-outer {
  background: url(https://lh6.googleusercontent.com/PQSU/main.jpg); 
  width: 1028px; /* ширина картинки */
/* прочие строки кода */
}
Потом подвал. Ищем в шаблоне блок кода, начинающийся с ".footer-outer". Сразу под ним вставляем строки вида "background: url(<ссылка на картинку фона подвала>); width: <...>px; height: <...>px;". Выглядеть это будет примерно так:
.footer-outer {
  background: url(https://lh6.googleusercontent.com/PQSU/footer.jpg); 
  width: 1028px; /* ширина картинки */
  height: 46px; /* высота картинки */
/* прочие строки кода */
}
Не забываем про вкладки. Ищем в шаблоне блок кода, начинающийся с ".tabs-outer". Сразу под ним вставляем строки вида "background: url(<ссылка на картинку фона вкладок>); width: <...>px; height: <...>px;". Выглядеть это будет примерно так:
.tabs-outer {
  background: url(https://lh6.googleusercontent.com/PQSU/tabs.jpg); 
  width: 1028px; /* ширина картинки */
  height: 35px; /* высота картинки */
/* прочие строки кода */
}
Для указания фонового изображения ищем строку, описывающую элемент Body Background и меняем ссылку в url(...) на свою:

Аналогично поступаем с градиентной заливкой Ее описывает элемент Body Gradient Cap. Здесь, как и в середине, используется картинки толщиной в один пиксель. Только там речь шла о горизонтальной полоске высотой в пиксель, то тут мы имеем дело с вертикальной полоской шириной в пиксель:

Теперь вновь возвращаемся в Дизайнер шаблонов, переходим на вкладку регулировки ширины и подгоняем ширину столбцов шаблона под наш перекроенный дизайн.

Вот, собственно, и все. Этого вполне достаточно для того, чтобы "костюмчик" наделся. А вот, чтобы "костюмчик" сидел как надо, предстоит еще серьезная процедура подрезок, утяжек и утрясок. Впрочем, я подгонку даже на стандартных шаблонах делаю. Но это уже совсем другая история...

Комментариев: 17

  1. Тимофей, именно такой статьи я так долго ждала! Хочется немного украсить свой блог, но знаний не хватает. Буду читать внимательно и приставать к Вам с вопросами.

    ОтветитьУдалить
    Ответы
    1. Рад, если моя статья показалась Вам интересной и полезной :-) Надеюсь и в дальнейшем оправдать ваши ожидания.

      А вопросы... Вопросы только приветствуются. Ведь только зная чаяния читателей я могу писать действительно востребованные статьи!

      Удалить
  2. Тимофей, а скажите пожалуйста, Вы страницу Содержание вручную заполняете или у Вас специальный гаджет?
    Я установила у себя в блоге гаджет, но мне не очень нравится, как это оформлено. А вот как у Вас сделано, мне нравится.

    ОтветитьУдалить
    Ответы
    1. С этим вопросом можно было и в личку. Он никак не относится к этой статье.

      Но раз уж Вы его здесь задали... "Содержание" я заполняю вручную. У меня не так много статей, чтобы это доставляло бы мне какие-то неудобства.

      Удалить
  3. Сложно как всё! ё-моё, я же ничего в этом не понимаю..но буду разбираться!

    ОтветитьУдалить
    Ответы
    1. Появятся вопросы по написанному - я к Вашим услугам.

      Удалить
  4. Хочу задать вопрос.
    В приведенных кодах всех элементов (шапка, средина, подвал, вкладки, фон и градиент) во всех урл стоят графические файлы. Верно ?

    Эти урл нужно свои находить ?

    ОтветитьУдалить
    Ответы
    1. Да, это графические файлы.

      Что на счет находить, не понял вопроса. Каждый блогер подбирает собственную структуру оформления. И, логично предположить, что у каждого свой набор графических файлов.

      Удалить
  5. и почему такакя полезная статья находится на второй странице Гугла? Самый лучший материал...Спасибо

    ОтветитьУдалить
    Ответы
    1. Ну, Google же не список ссылок, правда ведь? По какому-то запросу ссылка на эту статью будет на второй странице, по какому-то на первой, а по какому-то и на сто двадцать первой :gigi:

      Удалить
  6. вы можете помочь в установке. На тестовом блоге кучу ошибок наделал. Может вы как-нибудь сделаете?

    ОтветитьУдалить
    Ответы
    1. Я, конечно, могу все сделать сам. Но, разумеется, не бесплатно ;-)

      Удалить
    2. посокльку я новичок, мой баланс всего 5 долларов(( Картинки для шаблона я сделал. Если вас устраивает, то помогите пожалуйста

      Удалить
    3. Благодарю за такую щедрость, но нет. За такие деньги я не работаю.

      Удалить
  7. Тимофей здравствуйте. Не в тему этот коммент, но возможно Вы мне можете помочь или подсказать в чем проблема. Буквально вчера в моем блоге боковая панель съехала вниз. В ближайшее время никаких изменений в HTML code не вносила. Посмотрите пжлст http://www.bc-cci.com/ Заранее благодарю.

    ОтветитьУдалить
    Ответы
    1. Иногда разработчики Blogger вносят изменения в свои шаблоны. Если Вы ранее что-то в коде шаблона меняли вручную, то эти внесенные разработчиками изменения могут быть внесены частично, так как замещающий скрипт не нашел нужного куска кода для замещения. Это неполное пропатчивание могло перекорежить Ваш сайт.

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

      Удалить
  8. спасибо большое за быстрый ответ. Будем ждать :-)

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

Хотите подписать свой комментарий, но у вас нет аккаунта? Выберите в выпадающем списке Имя/URL.
Вы сможете вписать свои имя или ник. Поле для указания URL можно оставить пустым.

Тэги, допустимые в комментариях