Приветствую гостей, друзей и читателей блога. В одном из ранних постов я уже писала как увеличить ширину страницы. При увеличении ширины боковые колонки все равно оставались. В этом сообщении информация о создании страниц без заголовка, сайдбара и нижнего колонтитула.
При тестировании в разных шаблонах 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>
/*<![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>
/*<![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>
.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: Обратите внимание на выделенное жирным шрифтом, все можно настроить.
Или вместо цвета вставьте url адрес изображения и форму рамки background-image:url (адрес картинки); border:5px solid#ff9900; Пример. PS: Обратите внимание на выделенное жирным шрифтом, все можно настроить.
Код вставляете в редакторе, где пишите посты. Оформляйте страницы сообщений и статические. Написали, перейти по вкладке HTML и вверху вставить код.
При оформлении можно отключить комментарии к определенной странице. В редакторе справа нажмите параметры не разрешать скрывать существующие или другое значение, затем готово и сохранить. Также понадобится информация как поднять/опустить заголовок.
Статические страницы можно все оформить без сайдбара. Для этого в шаблоне, выше закрывающего тэга </head> вставьте такой код
При оформлении можно отключить комментарии к определенной странице. В редакторе справа нажмите параметры не разрешать скрывать существующие или другое значение, затем готово и сохранить. Также понадобится информация как поднять/опустить заголовок.
Статические страницы можно все оформить без сайдбара. Для этого в шаблоне, выше закрывающего тэга </head> вставьте такой код
<b:if cond='data:blog.pageType == "static_page"'>
<style>
.sidebar,.footer {display:none;}
#main-wrapper{width: 95%; float: none; margin: 0 auto;}
</style>
</b:if>
На таких страницах можно вставлять свои фото, авторские работы, видео или просто текст. Посмотрите в этом блоге. Шаблоны и оформление дизайна в блогах у всех разные, поэтому что-то советовать трудно.
Будут вопросы, отвечу в комментариях. Спасибо, что поделились с друзьями в соц сетях. Всего доброго.
Будут вопросы, отвечу в комментариях. Спасибо, что поделились с друзьями в соц сетях. Всего доброго.
Рекомендуемый контент:
Ольга, такой способ многие используют для продающих страниц. Самое то.
ОтветитьУдалитьПривет Викуля, я тоже об этом подумала. Можно создать и оформить красивую продающую страничку.
ОтветитьУдалитьДоброго времени суток, Ольга. У меня такой вопрос: как можно убрать сайдбар на странице 404? Со статическими страницами все понятно, но вот с 404... Она-то ведь подразумевает много вариантов написания адреса. Статическая страница 404 получается без сайдбара на "ура!", а вот с ошибочным поисковым запросом у меня снова попадание на 404 с сайдбаром - ведь указан он в Персонализированное сообщение об ошибке "Страница не найдена". В общем, где нужно работать: в основном коде блога (добавлять скрипты. Какие?), или на самой странице, или...где?
ОтветитьУдалитьВот так, как смог, обрисовал свою проблему :) Надеюсь на вашу помощь.
Здравствуйте Стас. В редакторе оформляете страницу 404 со всеми ссылками и картинками. В "Параметрах" справа отключите комментарии. Переходите по вкладке HTML, в самом верху вставляете код без сайдбара. Копируете весь код страницы (не публикуйте её) и вставляете в настройки поиска "страница не найдена", сохраняете. Для проверки в адресной строке браузера введите свой адрес блога, как у меня на примере ниже, можете перейти по ссылке и посмотреть мою страницу 404 демо блога.
Удалитьhttp://application-1.blogspot.com/blablabla
Создать страницу 404 для всех битых ссылок блога, используя скрипт. Подробно пишет aldous в своем блоге http://goo.gl/NscuwL
Спасибо, Ольга!
УдалитьСтас, посмотрела Ваш блог и страницу 404. Сайдбар на месте, пробуйте другие коды. Шаблон у Вас родной, должно получится без сайдбара.
Удалить