19 февраля 2011 г.

Как изменить размеры элементов настроек шаблона на Blogger


Всем привет!
Прошлый раз я писал о том, какие и где можно выбрать себе шаблоны на платформе  Blogger. Опубликовал несколько наиболее понравившихся шаблонов с ссылками на сайт производителя.
Но основная загвоздка в том, что все шаблоны (я просмотрел наверно сайтов 15) англоязычные, "заточены" не под нас. Оно и понятно, создана та платформа  Blogger, кажется, англичанами. Отсюда и все наши трудности. Однозначно, без определенных знаний кодировки, хотя бы начальных, ничего не получится и придется довольствоваться теми шаблонами, что заложены в программе Настройки. Конструктор шаблонов в Blogger хороший, ничего не скажешь, но здесь мы теряем в индивидуальности. Вот и получается, если хочешь эксклюзив - или переходи на платный вариант конструирования блога или изучай HTML-коды. Мы пойдем вторым путем!
Сейчас я постараюсь все подробно рассказать и показать, используя и те разработки, которые уже есть на сайтах. Сразу оговорюсь - какая бы не была инструкция подробная, она все равно не вместит в себя все нюансы, возникающие при работе по изменению кодировки шаблонов!
Начнем с азов.
Вот наиболее удачная картинка, иллюстрирующая устройство нашего (любого) шаблона с небольшими отличиями, если, например, у Вас 3 колонки.



body                -                       тело шаблона
wrapper           -                       панель заголовка и описания блога
main                 -                       главная панель блога (там, где мы пишем сообщения)
sidebar             -                      боковая панель блога (колонка, их может быть и 2 и 3)
footer               -                      нижняя панель блога (подвал)


Тело шаблона (body), внутри тела размещен основной элемент outer (для редактирования используется свойство #outer-wrapper), а уже на нем и размещаются элементики блога:
- главная панель блога (редактируется через свойство #main)
- боковая панель блога (редактируется через свойство #sidebar)
- панель заголовка блога (редактируется через свойство #header-wrapper)
- нижняя панель блога (редактируется через свойство #footer)

Для нас наиболее интересно изменение ширины элементов (width), поэтому просто находим эту переменную внутри редактируемого свойства и меняем ей значение, а если у свойства не задана ширина, то просто добавляем её вручную (например width: 300px; ) . Если Вам хочется расширить блог на всю ширину страницы, то просто удалите width из свойства #outer-wrapper (например в шаблоне, как на картинке выше, это удалит  зеленые полоски по бокам), после этого расширьте до нужного размера элементы #main и #sidebar (помните ширину можно задавать не только в пикселях px, но и в процентах % от общей ширины страницы) .
Повторяю - конкретно написать, что надо делать - невозможно, т.к. шаблоны все разные, здесь просто надо сидеть и тупо (нет, тупо не надо) экспериментировать, предварительно сохранив копию шаблона и постоянно использовать функцию "Просмотр":



Если Вы сразу после изменений нажмете "Сохранить шаблон", а потом вас что-то не устроит, то придется долго и нудно искать изменения и не факт, что Вы их найдете. Поэтому, нажав "Просмотр", Вы в новом окне увидите, как ваш шаблон выглядит после изменений. Не понравилось - нажимаете "Убрать изменения" и начинаете снова что-то менять. И только после того, как Вас все устроит в новой редакции шаблона, нажимайте "Сохранить шаблон".
Для того, чтобы быстро найти в шаблоне нужный код, используйте сочетание клавиш "Ctrl + F". В правом верхнем углу, после нажатия этих клавиш, откроется окошко (цифра 1) и в него Вы копируете нужное :


А цифрой 2 показано место в коде шаблона, где появиться нужный тег. Вот вместо него и начинайте вставлять изменения и пробовать.
В своем новом шаблоне я поменял много:
  • убрал заложенное выпадающее меню ( оно было огромное и не открывалось, не знаю, правда, почему)
  • изменил все названия на русские
  • изменил ширину колонок
  • изменил всю ширину блога
Это еще не все. Надо доработать шапку блога (шаблон ограничивает длину текста) и описание блога (проблема та же), не нравиться мне, как работает встроенная RSS подписка, тоже придется изменять. Посмотреть, что пока получилось в изменениях нового блога, можно здесь.

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








0 коммент.:

Отправить комментарий