Шаблон блогу на всю ширину екрану на blogger (blogspot)

Шаблон блогу на всю ширину екрану на Blogger (Blogspot)

Питання з яким стикаються багато, хто вперше вирішив зробити дизайн Blogger блогу самостійно, це як розтягнути шаблон на всю ширину екрану - зробити його, як би гумовим, щоб на всіх моніторах з різними розширеннями блог був на весь екран і виглядав однаково. Робиться це дуже просто - необхідно змінити, а якщо бути зовсім точним, додати три значення властивостей в код шаблону. І справа зроблена. Але щоб заповнити деякі прогалини розберемо трохи докладніше.

Застосовувати цей трюк найкраще на самому початку роботи над дизайном блогу, щоб вже на основі такого шаблону підігнати всі інші блоки і елементи.

Отже з'ясуємо ситуацію грунтовно. У нас звичайний (стандартний) шаблон, і на широких моніторах виглядає він приблизно ось так:

А ми хочемо зробити щоб він виглядав ось так - однаково на всіх моніторах:

Для цього, як завжди в подібних випадках, йдемо в адмінку (панель управління) свого Blogger блогу, відкриваємо "Шаблон" -> "Змінити HTML" і знаходимо за допомогою комбінації клавіш Ctrl + F наступний рядок:

content-outer. content-fauxcolumn-outer. region-inner

Під нею будуть записані властивості стилів без значень і повністю цей запис буде виглядати так:

content-outer. content-fauxcolumn-outer. region-inner min-width: $ (content.width);
max-width: $ (content.width);
_width: $ (content.width);
>

Наші дії прості як ніколи: змінюємо $ (content.width) на 100%. Має вийти так

content-outer. content-fauxcolumn-outer. region-inner min-width: 100%;
max-width: 100%;
_width: 100%;
>

Тепер все - зберігаємо і радіємо.

При внесенні даних змін, можливо буде потрібно також підігнати ширину інших блоків блогу, таких як: ліва колонка - column-left-outer. права колонка - column-right-outer і центральна частина - column-center-outer. а можливо й інших, вказуючи величину ширини цих блоків також в процентному вираженні.
По-цьому роблячи шаблон "гумовим" не забувайте про всіх блоках.

Спасибо большое за статтю. Дотримуючись її інструкціям підганяю шаблон свого блогу. На жаль, немає можливості перевірити, як все виглядає на різних екранах, тому буду вдячна, якщо перевірите на коректність.

Трохи не зрозуміла з цього моменту:
"Підігнати ширину інших блоків блогу. Вказуючи величину ширини цих блоків також в процентному вираженні."
Теж ставити 100%?

Це відноситься до того, що коли ви робите шаблон на весь екран (це і є 100%) а ширина колонок прописана в пікселах, то колонки залишаються однакового розміру, тобто не «тягнуться", якщо ж вказати в "%", то вони також будуть міняти розмір щодо ширини екрану, але це вже адаптивна верстка і тут не все так просто.

Відсотки - це відносна величина і вона вважається від розмірів вікна браузера, тобто 100% - все вікно, якщо ширина блогу вказана як 100%, то внутрішні його блоки не можуть бути теж 100%, вони вже будуть частиною від цих 100. (30%, 40% і т.п.)