Как изменить шапку блога на Blogger(Blogspot)

Оранжевая меховая шапка с логотипом BloggerОформить хедер Blogger-блога можно просто и быстро, используя стандартные инструменты настроек в админке, но для того чтобы сделать действительно качественный дизайн, этого как-то маловато.
  В данной статье, я хочу уделить внимание тому, как изменить "шапку" блога при помощи CSS, в стандартном шаблоне Blogger, используя основные селекторы всего блока, а также элементов названия и описания. И без труда сделать уникальный дизайн заголовка для своего блога.
  Все блоки и секция "шапки" расположены внутри тега <header>. Зная селекторы необходимых элементов, к ним можно самостоятельно добавить или изменить CSS тем самым получив более широкий доступ к оформлению. Некоторые, основные, уже записаны в разделе CSS в коде шаблона и находятся после строки:
/* Header
----------------------------------------------- */
  По умолчанию, в наличии имеются следующие:
- .header-outer - общий, внешний контейнер;
- .header-inner - внутренний контейнер;
- .titlewrapper - контейнер блока названия;
- .Header h1 - название блога;
- .descriptionwrapper - контейнер блока описания;
- .Header .description - блок описания блога;
В шаблоне, заголовок(шапка) блога - это специальный виджет.
.Header - это его селектор.
  Схематично это все будет выглядеть примерно так:
  Это, конечно не все доступные селекторы, но в большинстве случаев этого вполне достаточно, хотя при необходимости можно воспользоваться остальными, добавив их в список самостоятельно.
  Итак, вот для примера готовая шапка одного из блогов, с указанием используемых при оформлении селекторов:
  А это примененный CSS:
.header-outer {
 background: #000; /*фон всего блока*/
 width: 100%; /*на всю ширину*/
}
.header-inner {
 background: url(...image/BJhbg.v2.png) 0 0 no-repeat; /*фон, положение - левый верхний угол, без повторения*/
 height: 170px; /*высота блока*/
}
.Header h1 {
 position: absolute; /*абсолютное позиционирование, чтобы указать нужное расположение*/
 right: 10px; /*положение блока*/
 background: url(...image/BJv1.jpg) no-repeat; /*фон: картинка-название, без повторения*/
 height: 91px; /*высота блока, соответствует высоте изображения*/
 width: 561px; /*ширина блока, соответствует ширине изображения*/
}
.Header h1,
.Header .description {
 font: normal normal 0 sans-serif; /*уменьшает текст до "0"*/
 color: transparent; /*цвет текста прозрачный*/
}
.Header h1 a {
 display: block; /*указывает что ссылка в названии - блочный элемент*/
 height: 100%; /*занимает всю высоту родителя - .Header h1*/
}
Если вместо текста названия используется изображение, то как правило, сам текст уже не нужен и его надо убрать. Но совсем удалять его, не стоит, лучше сделать это через CSS: указать размер шрифта как "0", а цвет - прозрачным.
  Например:
.Header h1 {
 font: normal normal 0 sans-serif;
 color: transparent;
}
  Как видим сложно ничего нет. И не забывайте оптимизировать изображения, где это возможно сделать не испортив дизайна, чтобы загрузка блога была не долгой.

 Вот собственно и все, буду рад комментариям.

44 комментария:

  1. Да!!! век живи век учись. спасибо за статью Вы натолкнули меня на интересную идею, ведь я до сих пор работал только над текстом и немного упустил сам вид блога

    ОтветитьУдалить
    Ответы
    1. Всегда пожалуйста :) Однако, именно текст и есть самое главное :) Кстати, в дополнение к статье, также для общего фона можно использовать селектор .header-outer задав ему обычный цвет или градиент при помощи стилей. Что в принципе и сделано у нас - два разных изображения - надпись и логотип, а также цветовой фон.

      Удалить
  2. Спасибо! вижу заходили ко мне. Я только начинаю сам разбираться что к чему, работа занимает очень много времени но все же я всегда ищу альтернативу и уделяю этому максимум внимания, в детстве не то учил, теперь сам переучиваюсь.

    ОтветитьУдалить
    Ответы
    1. да заглядывал :) Ну плацдарм для экспериментов у вас есть, сложного в этом деле ничего нет, немного фантазии и все получится.

      Удалить
  3. извините, а вы сможете мне помочь с заголовком, мне очень хочется заголовок блога как у одной девушки, но я самый чайниковый чайник.. если я пришлю ее блог сможете помочь сделать шаблон?)

    ОтветитьУдалить
    Ответы
    1. Давайте попробуем, мне это будет интересно :) Шаблон вы можете скинуть на электронную почту или, добавясь, через скайп. Все эти контакты вы можете найти в разделе меню RSS и Соц. сети

      Удалить
  4. В настройках "Название блога" убрал старую надпись, а сохранить не могу пришлось ставить точку- как убрать?
    Спасибо

    ОтветитьУдалить
    Ответы
    1. А зачем ее собственно убирать-то, надпись эту? Лучше чтобы у блога все-таки было название, это и для поисковиков полезно... От "Названия блога" нужно избавляться другим способом, когда меняете её на картинку - через CSS или в настройках (Дизайнер шаблона - Дополнительно - Название блога) , указав размер шрифта 0, px или % и цвет текста- прозрачный (color: transparent; - через CSS)
      В предложенном в статье примере CSS это есть - почти в самом начале, там где font-size: 0%; /*избавляемся от стандартного текста*/, а через строку есть такая запись - color: $(header.text.color);
      вот тут можете вместо $(header.text.color) поставить transparent и будет вам счастье.

      Удалить
  5. Привет, спасибо, полезные вещи пишите :)
    подскажите пожалуйста,(на вашем примере скажу) а как сделать чтоб на картинку с надписью "Бортовой журнал" можна было нажать ?

    ОтветитьУдалить
    Ответы
    1. На неё и так можно нажать, т.к. картинка подложена как фон для ссылки (название блога), и указаны размеры этой ссылки в соответствии с размерами картинки.

      Удалить
  6. Здравствуйте, как придать вот такой стиль названию и описанию блога?
    p {background-color: #000;
    padding: 20px 0;
    margin: 20px auto;
    font-family: Garamond;
    font-size: 7em;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;}

    В шапке блога кроме этого стоит картинка-фон

    ОтветитьУдалить
    Ответы
    1. Так в статье, вроде, есть селектор описания...
      .Header .description {
      /*СВОЙСТВА ЗДЕСЬ */
      }
      Попутно изучаем статью о том как добавить CSS в Blogger - http://www.magentawave.com/2012/02/adding-css-to-html-blogger.html

      Удалить
  7. Итить раскудрить :) мне не когда так не сделать мозгов не хватит.((((

    ОтветитьУдалить
    Ответы
    1. Да ладно :) Код готовый есть, экспериментируйте и все получится, если нет - помогем :)

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

    ОтветитьУдалить
    Ответы
    1. Все это делается в стилях, например:
      .Header h1 {
        position: absolute; /*абсолютное позиционирование, чтобы указать нужное расположение*/
        background: url(...image.jpg) no-repeat; /*фон: картинка-название, без повторения*/
        left: 560px; /*смещаем блок-картинку влево на значение равное ширине картинки*/
        margin-left: -280px; /*указываем отрицательные отступ слева равный половине значение ширины изображения*/
        height: 90px; /*высота блока, соответствует высоте изображения*/
        width: 560px; /*ширина блока, соответствует ширине изображения*/
      }

      Попробуйте, должно помочь.

      Удалить
    2. Огромнейшее спасибо!!!! Всё получилось!

      Удачи вам во всём и всего самого наилучшего!
      С уважением, Марина

      Удалить
    3. И вам, Марина, спасибо на добром слове. Заходите еще ;)

      Удалить
  9. Вот бы похожие статьи по каждому разделу CSS в блоге. :)

    ОтветитьУдалить
    Ответы
    1. За навигацию отвечают меню вверху (плавающие выпадающие) и отдельно каталог по CSS для Blogger справа, когда вы находитесь в статьях про изменение дизайна и функционала Blogger-блогов он всегда открыт в иных случаях вы можете в него перейти используя иконки меню сверху правой колонки. Все предусмотрено, но, возможно, и сделаю "похожие статьи", но позже.

      Удалить
  10. Тарас31.07.13, 7:52

    Здравствуйте, помогите пожалуйста!хочу уже установленную картинку хедера поменять на "stylesheet" type="text/css" href="http://coral-club.com/ru/register_site/css/thema_6.css" итд.(код пришлось обрезать а то не давало опубликовать)
    а в идеале оставить их обе. Вот раздел хедера из template HEADER
    --------------------------------------------------------- */
    #ja-header {
    line-height: normal;
    position: relative;
    z-index: 999;
    }

    #ja-header .main {
    height:150px;
    min-height:137px;
    background-image:url(../images/header-top.png);
    background-repeat:no-repeat;
    }

    #ja-header .inner {
    padding: 0px;
    }

    div.logo, div.logo-text {
    margin: 0 0 5px;
    padding: 0;
    float: left;
    position: absolute;
    top: 15px;
    left: 20px;
    }

    div.logo a {
    width: 529px;
    height: 69px;
    display: block;
    /*background: url(../images/logo.png) no-repeat center center;*/
    }

    div.logo a span {
    position: absolute;
    top: -1000px;
    }

    div.logo-text {
    outline: none;
    }

    div.logo-text h1 {
    font-size: 250%;
    font-weight: bold;
    letter-spacing: 2px;
    margin: 0 0 0 15px;
    padding: 0;
    }

    div.logo-text h1 a {
    color: #FFFFFF;
    text-transform: uppercase;
    }

    div.logo-text h1 a:hover,
    div.logo-text h1 a:focus,
    div.logo-text h1 a:active {
    text-decoration: none;
    }

    .site-slogan {
    color: #FFFFFF;
    margin: -5px 0 0 15px;
    padding: 0;
    letter-spacing: 1.5px;
    }
    С уважением, Тарас

    ОтветитьУдалить
    Ответы
    1. Смутно понял что именно вы хотите сделать...

      Удалить
  11. Здраствуйте, уважаемый MagentaWAVE!
    Наткнулся на ваш блог по поисковмку и понял, что это то, что мне нужно.
    Я только недавно сделал сврй блог на блогпост и пока в настройках шаблона- полный НУЛЬ.
    Уже несколько суток ищу в тырнете всякие статьи по изменению и настройкам шаблона- пока ваши ответы и рекомендации- лично для меня наиболее вразумительные и понятные.
    У меня такой вопрос- можно ли вместо картики в шапке блога- вставить флэш - презентацию?

    ОтветитьУдалить
    Ответы
    1. Наверное можно, но надо понимать что "шапка" в блогспоте - это виджет и вставить именно в нее что-либо, это проблематично, но можно с помощью стилей (CSS) сделать саму шапку, так сказать, не видимой, а сразу ниже нее добавить гаджет HTML/JavaScript с кодом флешь презентации, как бы вместо шапки. Но я лично пока что так не делал, это - теория.

      Удалить
    2. Спасибо. Я понял.
      Тогда - другой вопрос- можо ли сделать в шапке блога так, чтобы фоном была не одна статичекская картинка, которую я установил, а несколько картинок менялись?

      Удалить
    3. Почему бы не использовать анимированный GIF формат? Но помните о весе изображений и соответственно скорости загрузки сайта.

      Удалить
    4. В этом и проблема с GIF форматом ( в смысле веса) .
      Если сделать просто gif- ку со сменой картинок, как фон для шапки сайта- то она много весит. А там - ограничение по весу картинки.
      В любом случае- спасибо за ответ.
      Буду дальше искать решение этой проблемы.
      Люди как то ставят в шапку- смену картинок.

      Удалить
    5. Попробуйте покапать в сторону слайдеров, например можно вставить jQuery слайдер, тем же способом что и флеш,

      Удалить
    6. Спасибо. Вы действительно даете толковые советы. Мельком посмотрел на рекомендуемый вами сладер- наверное это то, что мне нужно.
      Еще ьы понять, как его вставить в шапку блога. Я - полный нулевой нуль в вэб- дизайне.

      Удалить
  12. Добрый день! Подскажите, что-то не пойму, где вообще эти стили находятся)) хочу шапку свою вставить, нашла только код hnml

    ОтветитьУдалить
    Ответы
    1. Вам сюда - http://www.magentawave.com/2012/02/adding-css-to-html-blogger.html

      Удалить
  13. Сеня Ганджубас
    Спасибо автору за познавательную статью! Нашел то, что мне было необходимо!

    ОтветитьУдалить
  14. Этот комментарий был удален администратором блога.

    ОтветитьУдалить
    Ответы
    1. Какой подзаголовок и куда поднять??? И пожалуйста, не нужно писать простыни кода в комментариях, во-первых - ни к какому полезному действию это не приведет и информации не добавит, а во-вторых - я его и так и увижу в исходном коде страницы.

      Удалить
  15. Спасибо огромное за статью - благодаря ней я сумела исправить один косяк в дизайне моего блога. Если бы не Вы, то я бы уже подбирала другой дизайн.

    ОтветитьУдалить
  16. А может быть, что в самом шаблоне какие-то настройки, которые мешают изменить размер и шрифт названия блога? Т.к. ничего поделать не могу, надо css применять в таком случае?

    ОтветитьУдалить
    Ответы
    1. Обычно с таким элементом как "шапка" блога проблем не возникает и особых настроек там нет, если это стандартный шаблон. Но что "страшного" в том, чтобы применить CSS? Он там применен изначально, и когда вы через "Редактор шаблонов" устанавливаете свои настройки дизайна, то фактически применяете CSS, только более автоматическим образом.
      Вот статья на тему, может будет полезна
      http://www.magentawave.com/2012/02/adding-css-to-html-blogger.html

      Удалить
  17. Здравствуйте!
    У меня вопрос немножко не по теме :)
    Я убрала шапку и вместо неё добавила два виджета: страницы (которые будут содержать содержание / простите за тавтологию /) и соцкнопки. Вот мне бы очень хотелось, чтобы эти два виджета стояли в ряд на месте шапки, а они становятся один под другим. Как изменить шаблон так, чтобы они всё же стали в ряд? :)

    ОтветитьУдалить
  18. Подскажите, пожалуйста, как можно убрать ссылку с названия (заголовка) блога? где это редактируется?

    ОтветитьУдалить
    Ответы
    1. Если нужно изменить название блога, то это редактируется в коде шаблона - Список виджетов - Header1, ищите строку:
      <b:includable id='title'> - там будет условный тег и ниже то что вам надо. Можете совсем убрать условие, а можете просто удалить ссылку:
      <a expr:href='data:blog.homepageUrl'>
      при этом <data:title/> нужно оставить

      Если название поста, то ищите data:post.title

      Удалить
  19. Честь и хвала создателю данного сайта. Создавал страничку по шаблону, но захотел сделать по свему, искал решение нестыковок на многих сайтах, но нигде не нашел. И о чюдо, оказывается здесь есть все что я искал, и еще в добавок к этому вся инфа выложена в таком доступном ключе, так доходчиво разложена, что даже такой валенок как я разобрался не напрягаясь. Итог: на изготовление страницы потрачено два дня. К вечеру второго дня уже выложена в интернет. До этого о создании собственных страниц в интернете даже и не думал.

    Информация на данном сайте представлена очень просто и доходчиво. Спасибо MagentaWAVE

    ОтветитьУдалить
    Ответы
    1. Спасибо и вам! Рад что статья была полезной и помогла в решении вашей проблемы :)

      Удалить
    2. Однозначно сайт в закладки. И еще раз С П А С И Б О!

      Удалить

Следующее Предыдущее

BestProject