четверг

Как изменить ширину колонок в шаблоне для Blogger

Сразу оговорюсь, что этот пост для непродвинутых пользователей и новичков в Bloggere, не знакомых близко с языком HTML.
Так как этот блог у меня получился такой сугубо деловой, так сказать, не очень хотелось его засорять разнообразными личными мыслями. Так и появился своеобразный дневничок о всяком женском (и не только) - Подруга.

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

          Создание еще одного (как минимум) блога на своем аккаунте существенно сэкономит вам время и нервы при  выборе дизайна блога.
         Когда я занималась созданием своей личной (иногда ооочень личной) странички, в Bloggere еще не было чудесной закладки под названием Дизайнер шаблонов. Поэтому, чтобы все не выглядело серым и под одну гребенку, я начала активно искать шаблоны для блога в интернете. Скажу вам, что это довольно-таки нудное занятие, пересмотреть все шаблоны и даже для начала мысленно примерить их под свой формат. Но когда ты уже ставишь этот шаблон на свой сайт, это занятие помимо нудности, становится еще и опасным. Возникает риск не только не воспользоваться новым шаблоном, но и потерять старый.
Поэтому не забываем сохранить резервную копию основного блога или эксперементируем на альтернативной версии. Это правило подходит и в том случае, если вы планируете воспользоваться шаблонами Блоггера. Не боясь случайно сохранить какие-либо ненужные или непонравившиеся изменения, вы можете смело творить на запасном блоге.
           На плюсах Дизайнера шаблонов останавливаться не буду, а хочу поговорить об одном минусе бесплатных шаблонов из сети. Это разное отображение его в разных браузерах и точно присвоенная ширина колонок, которая не регулируется под именно ваши тексты или колонки. Мой шаблон был красив и идеален для меня, но названия разделов упорно не вмещались в колонку и выглядело это примерно так:

Согласитесь все-таки ужасно...
Для тех, кто столкнулся с такой проблемой, пишу путь ее решения.
Заходим в "Дизайн", далее нам нужна закладка "Изменить HTML", ставим галочку в пункте "Расширить шаблоны виджета".
А вот тут по примеру своего личного блога, я вам нарисовала схематически, как и что обзывается на этом загадочном языке HTML в абракадабре, которую мы видим в окошке "Изменить шаблон".
Теперь ищем нужные нам пукты в табличке "Изменить шаблон" (поиск для несведущих можно сделать комбинацией клавиш Ctrl+F).
Это может быть
  • header wrapper - шапка блога
  • outer wrapper - можно его назвать, разметочный блок
  • main wrapper - ваша главная рабочая область (в Блоггере это основная часть, где размещаются ваши посты)
  • sidebar - боковая колонка (их в Вашем блоге может быть несколько, обычно там распологаются гаджеты , о том, что они из себя представляют Вы сможете ознакомиться в другом моем посте. А в двух словах - это разные полезные инструменты блога - от разделов до счетчика посещений).
  • body - я бы просто нарекла это фоном или телом самого шаблона
Далее определяемся, что из вышеперечисленного нам нужно исправить в ширину и находим параметр width (для неознакомленных с английским языком -это и есть ширина) и изменяем его число на нужное количество пикселей.

Моя неорганизованная колонка выглядела на языке HTML вот таким образом:
#sidebar1 {
height:100%;
margin-top:45px;
text-align:left;
vertical-align:top;
width:250px;
float:left;

специально для вас выделила жирным шрифтом то, что мне нужно было поменять.
          Но, внимание! Расширив одну колонку, я столкнулась с тем, что мой основной рабочий блок сполз вниз страницы из-за несоответствия ширине самого блога. Следите за этим! В данном случае вам просто стоит отрегулировать также ширину рабочей области (под "кодовым" названием main wrapper.
Вот это и все!
Дерзайте!

2 комментария:

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

    ОтветитьУдалить
  2. Заходим в "Дизайн", далее нам нужна закладка "Изменить HTML" -

    подскажите пожалуйста, а ГДЕ именно это "Изменить HTML" ????

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