Советы по некоторым настройкам дизайна Blogger

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

1. Расположить navbar внизу страницы.

Неплохо такой вариант смотрится и не закрывает верх страницы. Посмотрите на этом блоге его расположение внизу.

Для этого идём во вкладку ТЕМА, находим заветную ]]></b:skin> и сразу над ней устанавливаем

#navbar-iframe {
  bottom: 0;
  position:fixed;
}

Возможно у вас будет не #navbar-iframe а #navbar - зависит от шаблона. Сути не меняет.

2. Убрать пустое место над заголовком и под ним.

Посмотрите о чём идёт речь. Даже если вы в настройках отключили navbar над шапкой не нужная светлая полоса остаётся.

Опять же над ]]></b:skin> задаём-

Убрать над заголовком -

body .navbar {height: auto;}

Убрать под заголовком -

.region-inner.main-inner, .column-right-inner {
padding-top: 0 !important;
}

Результат-

3. Как уменьшить расстояние между гаджетами

4. Подчёркивание заголовков.

Используя стили CSS можно сделать подчёркивание всех заголовков - название блога, заголовки сообщений и гаджетов. Посмотрите на тестовом блоге по ссылке в пункте 1. Если вы не меняли теги заголовков, то делаем следующее. Там же во вкладке тема над строкой ]]></b:skin> ставим

Для заголовка H1  

.Header H1 {border-bottom: 3px solid #DAA520;padding-bottom: 5px;}

Для заголовка поста 

.post-title{border-bottom:2px solid #DAA520;}

 Для заголовка гаджетов 

.sidebar .widget h2 {border-bottom:5px solid #DAA520;}

Меняйте ширину линии border-bottom:5px на желаемое и цвет линии solid #DAA520. Здесь есть таблица цветов.

5. Убрать название гаджета. 

Некоторые гаджеты в Блоггере без названия заголовка не принимаются. А иногда он просто бывает не нужен.

Вставляем в поле названия <h2></h2>

6. Убрать сайдбар у статичных страниц. 

Во вкладке ТЕМА - изменить 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>

Постаралась всё это уместить в одном сообщении, потому что по отдельности каждый пост получится совсем малюсеньким.

Спасибо всем за визит, за ваши вопросы и до встречи.

здесь можно оформить подписку на новые шпаргалки

Введите Ваш email