Оформление страниц без заголовка сайдбара и колонтитула в 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

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

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

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

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

Новый пост: Добавить Блог и файл Sitemap в кабинете вебмастера Bing; Треугольники в оформлении дизайна рамок и цитат;

Рекомендуемый контент: