Оформление страниц без заголовка сайдбара и колонтитула в blogger



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

При тестировании в разных шаблонах blogger замечу, что оформление у Вас будет отличаться. Есть шаблоны, где установленный код вообще не работает. Хорошо себя проявил шаблон Корпорация "Чудеса". С ним мне было легко работать, "Венецианское окно" со скрипом, но получилось, а вот шаблон "Простой" оказался капризней всех других.

Попутно я экспериментировала оформление страниц разным фоновым цветом, и "Простой" никак не реагирует на изменения основного фона.

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

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

Без заголовка, сайдбара и колонтитула

<style type="text/css">
/*<![CDATA[*/
#header-wrapper,#crosscol-wrapper,#sidebar-wrapper,#footer {height: 0; visibility: hidden; display:none;}
#main-wrapper{float: none; width: 100%; margin 0; padding: 0;}
/*]]>*/
</style>


Код для новых шаблонов

<style type="text/css">
/*<![CDATA[*/
.header,#crosscol,.main-inner .column-right-outer,.main-inner .column-left-outer,.footer-outer, {height: 0; visibility: hidden; display: none;}
.main-inner .columns {padding-left: 0px; padding-right: 0px;}
/*]]>*/
</style>

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

Добавим оформление фона

<style type="text/css">
/*<![CDATA[*/
#header-wrapper,#crosscol-wrapper,#sidebar-wrapper,#footer,#lws_0 {height: 0; visibility; hidden; display:none;}
#main-wrapper{float: none; width: 100%; margin-left: 0; margin-right: 0; margin-top:100px; padding-left: 0; padding-right: 0; background: #ffffff; color: #000000;}
.post {width: 80%; margin: 0 auto; padding: 0;} .post h3 a { text-align: center; padding:15px;}
/*]]>*/
</style>

Для новых шаблонов

<style type="text/css"> /*<![CDATA[*/
.header,HTML8,#crosscol,.main-inner .column-right-outer,.main-inner .column-left-outer,.footer-outer,#lws_0 {display: none;}
.main-inner .columns {padding-left: 0px; padding-right: 0px; background:none;} .content-inner {background: #ffffff; color: #000000; margin-top: 100px;}
.post {width: 80%; margin: 0 auto;}
.post-title {text-align:center; padding:15px;}
/*]]>*/
</style>

В некоторых шаблонах гаджеты под сообщением остаются видны. Зеленым цветом выделен мой ID гаджета. Мы их уберем, вставьте в код ID своего виджета. Выделенное синим цветом-можно вписать код цвета и добавить еще один фон.

Или вместо цвета вставьте url адрес изображения и форму рамки background-image:url (адрес картинки); border:5px solid#ff9900; Пример. PS: Обратите внимание на выделенное жирным шрифтом, все можно настроить.

Код вставляете в редакторе, где пишите посты. Оформляйте страницы сообщений и статические. Написали, перейти по вкладке HTML и вверху вставить код.

Вставить код по вкладке HTML в редактое сообщений blogger
Вставка кода по вкладке HTML
При оформлении можно отключить комментарии к определенной странице. В редакторе справа нажмите параметры не разрешать скрывать существующие или другое значение, затем готово и сохранить. Также понадобится информация как поднять/опустить заголовок.

Статические страницы можно все оформить без сайдбара. Для этого в шаблоне, выше закрывающего тэга </head> вставьте такой код

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<style>
.sidebar,.footer {display:none;}
#main-wrapper{width: 95%; float: none; margin: 0 auto;}
</style>
</b:if>

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

Будут вопросы, отвечу в комментариях. Спасибо, что поделились с друзьями в соц сетях. Всего доброго.

TEXT.RU - 100.00%




Автор статьи ✎ Olga Protasova Выпуск ✹ 9/21/2015 Ярлыки ►


Открыть комментарии →

6 коммент. :

  1. Ольга, такой способ многие используют для продающих страниц. Самое то.

    ОтветитьУдалить
  2. Привет Викуля, я тоже об этом подумала. Можно создать и оформить красивую продающую страничку.

    ОтветитьУдалить
  3. Доброго времени суток, Ольга. У меня такой вопрос: как можно убрать сайдбар на странице 404? Со статическими страницами все понятно, но вот с 404... Она-то ведь подразумевает много вариантов написания адреса. Статическая страница 404 получается без сайдбара на "ура!", а вот с ошибочным поисковым запросом у меня снова попадание на 404 с сайдбаром - ведь указан он в Персонализированное сообщение об ошибке "Страница не найдена". В общем, где нужно работать: в основном коде блога (добавлять скрипты. Какие?), или на самой странице, или...где?
    Вот так, как смог, обрисовал свою проблему :) Надеюсь на вашу помощь.

    ОтветитьУдалить
    Ответы
    1. Здравствуйте Стас. В редакторе оформляете страницу 404 со всеми ссылками и картинками. В "Параметрах" справа отключите комментарии. Переходите по вкладке HTML, в самом верху вставляете код без сайдбара. Копируете весь код страницы (не публикуйте её) и вставляете в настройки поиска "страница не найдена", сохраняете. Для проверки в адресной строке браузера введите свой адрес блога, как у меня на примере ниже, можете перейти по ссылке и посмотреть мою страницу 404 демо блога.

      http://application-1.blogspot.com/blablabla

      Создать страницу 404 для всех битых ссылок блога, используя скрипт. Подробно пишет aldous в своем блоге http://goo.gl/NscuwL

      Удалить
    2. Стас, посмотрела Ваш блог и страницу 404. Сайдбар на месте, пробуйте другие коды. Шаблон у Вас родной, должно получится без сайдбара.

      Удалить

Ув. читатели! Для вставки HTML кода в комментарии, воспользуйтесь в меню Генератором преобразования HTML кода.

 
Технологии Blogger.

Форма для связи

Имя

Электронная почта *

Сообщение *