Убрать пустое пространство над/под заголовком Blogger

На вкладке "Дизайн" добавляем CSS стиль:

"Над"

body .navbar {height: auto;}

"Под"

.region-inner.main-inner, .column-right-inner {
padding-top: 0 !important;
}
Убрать пустое пространство между заголовком и сообщением в Blogger.
в f t
наверх ↑

100 комментариев:

Tanka
А как убрать пустое место над шапкой? Я скрыла панель над шапкой, теперь там пустая полоса, а хочется чтобы картинка в шапке понялась вверх :)
NMitra
Я думаю, что где-то должен быть указан этот параметр. Но я пока не нашла где именно.

Можно поступить по-другому - поднять заголовок:

.header-outer {
margin: -2.3em 0em 0em 0em;
}
NMitra
Я поняла в чём дело. Вы не удалили, а, как правильно указали, скрыли панель навигации. Поэтому появилось пустое пространство на месте, где она должна находиться. Поднять заголовок в этом случае единственное решение. Или Navbar нужно удалять.
Tanka
Спасибо! мне понравился вариант с навбаром внизу =) сделаю так
NMitra
Да, мне тоже нравится.) К сожалению, это не решит проблемы с пустым пространством наверху.
Tanka
А код

.header-outer {
margin: -2.3em 0em 0em 0em;
}

тоже вставлять нужно перед

]]> ??
Tanka
))) Ой поняла, добавила параметры после .header-outer {

Спасибо большое - все получилось! =)
NMitra
Отлично)))
Tanka
Решила проверить блог в IE шестом, так там пустое место все равно есть над шапкой, да и все там наперекосяк (( В Опере все ОК.
NMitra
К сожалению, сами разработчики платформы Blogger говорят о плохом качестве отражения в IE 6. Я тоже была несколько обескуражена видом блога.

Можно ещё немного увеличить значение

.header-outer {
margin: -2.5em 0em 0em 0em;
}
Tanka
Спасибо, попробую. Я бы не заморачивалась, но треть моих посетилей пользуется IE, а там моя боковая панель вообще ужасно смотрится ((
NMitra
Здесь зависит и от используемой версии IE. Некоторые всё же устанавливают себе обновления.
Филипп Гаврилов
Великолепно! Спасибо за решение
NMitra
Да, в комментариях больше полезной информации оказалось, чем в самой статье)))
Хозяин Лягушатника
А как удалить пустое пространство между сообщениями блога и нижними виджетами?

Что-то я уже слишком много вопросов вам задал)))
NMitra
Да, не мало))). После выходных посмотрю.

Здесь же перед ]]></b:skin>

добавьте

.footer-outer{margin: -60px 0px 0px 0px;}
.footer-inner{margin: -30px 0px 0px 0px;}

Значение -60(внешняя граница футера) и -30 (внутренняя граница футера) измените на своё.
Mich
Спасибо, Вам, NMitrочка, за Ваше трудолюбие и тщательность! Не перестаю Вами восхищаться!
Обновил IE до 9-ки. Всё равно блог в нём отображается не корректно: правый край текста сообщения рваный, новый фавикон не работает, полупрозрачный фон сообщений показывается как просто прозрачный! Вся красота на смарку.. ((
Вообще, конечно, большое "Г" этот IE, несмотря на 9-ю версию! Люди!!! Переходите все на продвинутые браузеры! Не смотрите наши блоги в Интернет Эксплойрере!!! :)
Mich
О! Нашёл у Вас про фавиконы! А думал, что нет (как-то не попадалось раньше) и поэтому нарисовал себе иконку в Paint и прикрутил её, как было написано в другом блоге.. Теперь пошёл изучать. :)
Может и про полупрозрачность фона для IE у Вас где-то есть? ) В поиске не нашёл..
П.С. В комментах к "фавикону" прям настоящая битва с браузерами за правильное отображение иконки!!! :) Напоминает, по поиску решений, сериал "Доктор Хауз" ))
NMitra
Я впервые глянула на блог из IE 6. Вот там действительно ужас. Я даже на некоторое время дар речи потеряла... И ведь некоторые его используют и не обновляют до более новой версии.

А вот насчёт прозрачности и правда нехорошо. И почему этот момент не предусмотрели разработчики? Подумать надо.
NMitra
Вот решение: перед ]]></b:skin> добавить:

.post-outer {
  background: transparent url(http://www.blogblog.com/1kt/travel/bg_black_50.png) repeat scroll top center;}
Мич
Урра!!! Заработало!!! Огромное спасибо, Наталья! Вы просто кибер-волшебница! :) Убрал своё rgba, которым я до этого пытался регулировать полупрозрачность - работает и без него в четырёх основных браузерах! Поставил 60.png в Вашем коде - получилось чуть темнее, как раз "самый самолёт"! :) Как говорит Е.Гришковец "А настроение-то улучшилось"! А скажите, пожалуйста, есть ли на этом чудесном сайте blogblog ещё и цветные полупрозрачности? И как там посмотреть все варианты? Я когда его набираю, выскакивает "404" (( Я так предполагаю это к нему идёт обращение для трансляции полупрозрачности? Совсем не разбираюсь в этом..
NMitra
Я это решение подглядела в самом Blogger из шаблона "Путешествие". Я тоже не могу зайти на сервис. Введите в поиск

url(http://www.blogblog.com

он выдаст несколько вариантов. Например этот: http://www.blogblog.com/1kt/transparent/white80.png
Violetta
А у меня не выходит(( http://med-lazer.blogspot.com/
Может, я вас не так поняла, вы имеете в виду пространство между заголовком сообщения и самим сообщением? У меня оно не убирается... На самом деле мне кажется, что он просто не хочет воспринимать тег head, который я туда впихнула, и отображает его как пустое пространство:) Хотя в другом блоггеровском блоге всё отлично.
NMitra
Ой! А зачем вы ещё один head добавили? Он в шаблоне уже существует и должен быть только один. Посмотрите эту статью http://shpargalkablog.ru/2010/07/kontent.html.
MonCTeP
Уважаемя NMitra может вы поможете. Посмотрите пожалуйста, хочу чтоб кнопки Share и твитнуть были на уровне зоголовка, а они у меня ниже... может поможете? http://zarabotaiipotrat.blogspot.com/
NMitra
Код кнопок заключите в

<div class='knopki'>...код_кнопок...</div><div style="clear:both;"></div>

и добавьте сразу после

<b:includable id='post' var='post'>
  <div class='post hentry'>
    <a expr:name='data:post.id'/>
    <b:if cond='data:post.title'>
      <h3 class='post-title entry-title'>
      <b:if cond='data:post.link'>
        <a expr:href='data:post.link'><data:post.title/></a>
      <b:else/>
        <b:if cond='data:post.url'>
          <b:if cond='data:blog.url != data:post.url'>
            <a expr:href='data:post.url'><data:post.title/></a>
          <b:else/>
            <data:post.title/>
          </b:if>
        <b:else/>
          <data:post.title/>
        </b:if>
      </b:if>
      </h3>

Внесите стили перед ]]></b:skin>

h3.post-title {float: left;}

.knopki {float: right;}
MonCTeP
спасибо за помощь
Starkkk
Можно ли убрать описание, но так чтоб оно индексировалось поисковиками и не было пустого пространства на этом месте?
NMitra
Клоаккинг наказывается поисковиками.
Starkkk
Какой выход вы нашли для себя?
NMitra
Я оставила надпись только на Главной с помощью условных тегов.
Starkkk
Можно ли вместо названия поставить фото, но так чтоб оно индексировалось поисковиками и не было никаких нарушений?
NMitra
Здесь http://shpargalkablog.ru/2010/09/optimizatsiya-zagolovka-h1-h2-h3.html всё написано. По-хорошему, нужно убирать с заголовка h1, а картинке прописывать alt с нужной ключевой фразой, которая будет вести на главную.
Starkkk
По середине! Это не является клоакингом http://3.bp.blogspot.com/_ebKrCj8TLPk/TLLZcXEdALI/AAAAAAAAAwI/4bBCwpkfCWI/s1600/Logotip-Blogger.png
Starkkk
Это не риторический вопрос, прошу на него ответить
NMitra
Уже упустила нить разговора. Поисковый робот читает код страницы CTRL+U. Если в Blogger применяются условные теги http://shpargalkablog.ru/2011/02/uslovnye-tegi-v-blogger.html, то часть кода мы не увидим, то есть она не будет прочитана ни поисковиками, ни браузерами. Вот код, изменения выделены жирным

<b:includable id='description'>
  <b:if cond='data:blog.pageType == &quot;index&quot;'><div class='descriptionwrapper'>
    <p class='description'><span><data:description/></span></p>
  </div></b:if>
</b:includable>

Что значит по середине? Это уже достигается с помощью стилей.
Starkkk
Как изменить цвет заголовка сообщений?
P.S. в редакторе можно изменить только размер
NMitra
Для блога "Мега интересно". Дизайнер шаблонов - Дополнительно - Заголовок сообщения. Под "Шрифт" можно установить текст жирным или курсивом. Рядом выпадающее меню, где выбрано 22px, измените, нажав на ▼.
Анонимный
Мне для "позитива" можно?
NMitra
Шаблон "Простая"? Там же.
TtT
да
Starkkk
Да
NMitra
Отыскали или скриншот нужен?
Starkkk
В "простом" такого нет :( там только цвет ссылок менять можно
NMitra
h3.post-title {
font-size: 26px;
}

Скриншот: http://4.bp.blogspot.com/-dpd54A9X8S8/TsIBw27kAmI/AAAAAAAACgM/LoiAq1CHmo8/s1600/ScreenHunter_01%2BNov.%2B15%2B10.07.jpg
Starkkk
Как изменить ЦВЕТ заголовка сообщений?
NMitra
color: red;
Starkkk
Как убрать пустое пространство с левой стороны что бы получилось так: bigpicture.ru?
NMitra
Не поняла вопроса: с левой стороны относительно чего? Заголовка?
Starkkk
относительно экрана монитора. Заголовок, сообщения
NMitra
Я могу только предположить, что у вас монитор уже моего. Поскольку белое пространство присутствует в обоих случаях. Сделайте блог шире в "Дизайнере шаблонов"-"Регулировка ширины".
Starkkk
насколько сложно будет сделать например как в этом блоге totallycoolpix.com/2011/11/american-music-awards-2011/ Чтоб был маленький промежуток слева. Через регулировку длинны и ширины увеличивается размер правой колонки, но это никак не отражается на разрыве левой части. s005.radikal.ru/i212/1111/97/577a343205da.jpg
1. Хочу уменьшить размер разрыва
NMitra
Посмотрите здесь http://shpargalkablog.ru/2010/12/shirina-saita-css.html#rezinovye
NMitra
Нужно увеличить не правую колонку, а ширину всего блога.
Starkkk
Мне нужно не увеличивать блог, а убрать лишнее пространство слева.
NMitra
О, я поняла, что вы имеете ввиду:

.content-inner {
padding: $(content.padding) $(content.padding.horizontal);
}

заменить на

.content-inner {
padding: $(content.padding) 0;
}
Starkkk
Вы чудо, спасибо.
Se Nat
на блоге очень много пустого пространства после сообщения, после коментариев, после контекстной рекламы и т.д.
Прямо поле пустых мест Как можно это урегулировать для чайника?
http://fotootcheti.blogspot.com/
NMitra
Поле после сообщения

.post-footer {margin: 0;}
NMitra
Прижимает форму комментариев, в том числе количество комментариев

.comments {margin-top: 0 !important; padding-top: 0 !important; margin-bottom: 0 !important; padding-bottom: 0 !important;}
NMitra
С формой комментариев надо смотреть.
После контекстной рекламы где? Слева в боковой колонке? Снизу?
Se Nat
Спасибо за ответы, но если можно, для чайника объясните куда эти кода вставлять? .post-footer {margin: 0;}
и .comments {margin-top: 0 !important; padding-top: 0 !important; margin-bottom: 0 !important; padding-bottom: 0 !important;}

Еще раз спасибо за помощь!!
NMitra
Это код css, ответ есть здесь http://shpargalkablog.ru/2011/12/kak-izmenit-shablon-blogger.html
NMitra
Для пространства после формы комментариев http://shpargalkablog.ru/2011/06/stil-kommentariev-blogger.html
Alekcey Nikolaev
NMitra, помогите у меня появилаось пустое пространство между 1 и 2 постом, как убрать не знаю((( вот ссылка на блог http://afrika190.blogspot.ru/
NMitra
Не увидела проблему, подробнее, пожалуйста, лучше со скриншотом.
Анонимный
как добавить в низу Технологии Blogger
NMitra
Добавить? Создайте новый блог, загляните в его шаблон в поисках приблизительно такого кода

<b:widget id='Attribution1' locked='true' title='' type='Attribution'>
<b:includable id='main'>
<div class='widget-content' style='text-align: center;'>
<b:if cond='data:attribution != &quot;&quot;'>
<data:attribution/>
</b:if>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

Посмотрите его местоположение и добавьте аналогичным образом.
Анонимный
Нельзя просто этот код куда нибудь в конце кода?
просто в ориганале напинно шаблон simle. я хочу чтоб было просто технологии блоггер
NMitra
Добавьте гаджет "Логотип" на вкладке "Дизайн". Его предназначение то же.
Анонимный
А у меня в низу гаджеты расположены, я хочу чтоб технологии блоггер шли в самом низу после гаджетов.
NMitra
Добавьте гаджет HTML/JavaScript с кодом внутри

<div style="text-align: center;"> Технологии <a href="http://www.blogger.com" target="_blank">Blogger</a>.
</div>
Ирина Малясова
Добрый день, NMitra! Подскажите, пожалуйста, при внесении изменений в шаблон не вижу, где ставить галочку "Расширить шаблоны виджетов". Зато есть "Список виджетов"...
NMitra
Здравствуйте, форматирование сменилось. Поставьте курсор на поле шаблона и нажмите комбинацию клавиш CTRL F. Вместо "Расширить шаблоны виджетов" слева рядом с нумерацией черные треугольнички, но их замучаешься раскрывать все.
Анонимный
Добрый вечер.
Убрала код навбара и сделала сохрание, сверху (вместо навбара) вылезло: TEMPLATE ERROR: Unknown runtime binding: includable in widget. Вернула код обратно и теперь избавиться не могу от этой надписи.
NMitra
Видимо прихватили что-то ещё. Посмотрите тут http://shpargalkablog.ru/2012/03/shablon-blogger-polomalsya.html
Анонимный
NMitra, лучи добра Вам!
Получилось самой избавиться от этого ужаса. Поковырялась в коде и нашла, что код дважды сам создался, который после кода Navbarа стоит. Стоял до и после него. До удалила и всё заработало.
И спасибо за эту статью. Подняла блог))
Hive Med
А не подскажете, как уменьшить размер отступов от текста по краям шаблона и расстояние между сообщением и сайдбаром? А то довольно много места пропадает.
Hive Med
Дошел пока до такого:

.header-outer {margin:0 -5px 0 -5px;}
.tabs-outer {margin:0 -25px 0 -20px;}
.post-outer {margin:0 -20px 0 -20px;}
.sidebar {margin:0 -20px 0 20px;}

Так можно? С виду вроде ок, но есть ощущение, что от отрицательных значений какая-то гармония в коде нарушается.
NMitra
Конечно, я сейчас уже не пойму в чём проблема. Минусы могут быть, я сама так раньше делала. Но лучше убирать без них.
Sanirio
Скрыла navbar. Подняла заголовок. Теперь на главной странице блога всё ОК. Но если зайти на страницу любого поста, то сверху всё равно есть отступ над шапкой блога, который хочется убрать. Как это сделать? Подскажите, пожалуйста!
NMitra
Каким образом удалили навбар, так http://shpargalkablog.ru/2010/07/panel-navigatsii.html#udalit ?
Sanirio
Да, так отключила. А затем убрала пустое пространство так:
body .navbar {height: auto;}
NMitra
Я совсем запуталась у вас в шаблоне. Например, что это:

<div itemscope='itemscope' itemtype='http://schema.org/Blog' style='display: none;'>
<meta content='Vegan Boom | Веганство в Эстонии' itemprop='name'/>
<meta content='Блог о веганстве и защите прав животных в Эстонии' itemprop='description'/>
</div>

Почему meta находятся в body? Пространство над шаблоном образуется из-за <br>
Sanirio
Я не могу ответить на этот вопрос. Делаю изменения по руководствам, которые нахожу в Интернете, но сама с трудом разбираюсь что и как тут устроено.

А в каком именно месте мне надо убрать
? Поиск по шаблону мне не даёт результатов. Нашла только три
в одной из строчек.
Sanirio
Почему-то некорректно отобразился предыдущий комментарий. Я хотела спросить, в каком именно месте мне надо убрать br? Поиск по шаблону мне не даёт результатов. Нашла только три br/ в одной из строчек.
NMitra
Не знаю, нужен доступ администратора. Сразу хочу сказать, что шаблон не смотрю бесплатно.
Диляра Гильмханова
никак не могу убрать пусто место на верху(((уже все перепробывала((
NMitra
Не вижу проблемы, расскажите, пожалуйста, подробнее
Irina Sanirio
Пожалуйста, подскажите, как уменьшить отступ между датой и заголовком поста?
http://veganboom.blogspot.com
NMitra
Сделайте так
.post-outer {
background-color: transparent;
border: 1px solid transparent;
border-radius: 5px;
padding: 0px 20px 15px;
margin: 0px -20px 20px;
}
Irina Sanirio
Волшебно! Спасибо большое!
Марина Жидкова
Здравствуйте! http://www.vsevshkolu.ru/ Образовалось непонятное пространство внизу. Не подскажите как это исправить?
Марина Жидкова
По поводу комментария выше. Это новый шаблон, который я установила вчера. Перед этим я тестировала его на пробном блоге, и все отображалось хорошо. Проблема появилась после установки нового шаблона вместо старого. Может быть наложились настройки старого на новый? Единственное, что я делала - добавила мета тэги для поиска, скрипт, который указывает источник при копировании текста. Больше ничего не добавляла. Попробовала стандартные шаблоны установить, и они отображаются нормально, этого промежутка нет. Еще загрузила этот сломанный шаблон в пробный блог, но там этой проблемы не возникает.
Марина Жидкова
Проблема решена :)
NMitra
Здравствуйте, искренне рада :)
Алексей Буров
Ребят, а у меня необычный отступ в самом верхнем сообщении. Я думал проблема в сообщении, добавил новое пустое - в старом проблема решилась, а в новом появилась. Не могу найти причину. Смена шаблона проблему не решила.
Помогите плиз мой чайниковский блог http://burovalex.blogspot.ru/
NMitra
Это место для рекламы AdSense, которую, по-видимому, вам ещё не подтвердили. Уберите галку "Дизайн"-"Сообщения блога"-"Показывать объявления между сообщениями".
Алексей Буров
Точно, и правда это была пустая реклама. Теперь не пойму как ее включить. Ad-Sense зарегистрировал, показывать объявление включено.
NMitra
Сейчас нужно отправлять и ждать рассмотрения заявки https://support.google.com/adsense/answer/9724?hl=ru&ref_topic=1319756&rd=1
Сомневаюсь, что с одной-двумя страницами без посещений можно получить подтверждение заявки. Хотя может я и не права, я зарегистрировала аккаунт AdSense когда ещё не нужно было проходить эту процедуру.