В данной статье, я хочу уделить внимание тому, как изменить "шапку" блога при помощи CSS, в стандартном шаблоне Blogger, используя основные селекторы всего блока, а также элементов названия и описания. И без труда сделать уникальный дизайн заголовка для своего блога.
Все блоки и секция "шапки" расположены внутри тега <header>. Зная селекторы необходимых элементов, к ним можно самостоятельно добавить или изменить CSS тем самым получив более широкий доступ к оформлению. Некоторые, основные, уже записаны в разделе CSS в коде шаблона и находятся после строки:
/* Header
----------------------------------------------- */
По умолчанию, в наличии имеются следующие:----------------------------------------------- */
- .header-outer - общий, внешний контейнер;
- .header-inner - внутренний контейнер;
- .titlewrapper - контейнер блока названия;
- .Header h1 - название блога;
- .descriptionwrapper - контейнер блока описания;
- .Header .description - блок описания блога;
В шаблоне, заголовок(шапка) блога - это специальный виджет.
.Header - это его селектор.
Схематично это все будет выглядеть примерно так:.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*/
}
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;
}
font: normal normal 0 sans-serif;
color: transparent;
}
Вот собственно и все, буду рад комментариям.
Да!!! век живи век учись. спасибо за статью Вы натолкнули меня на интересную идею, ведь я до сих пор работал только над текстом и немного упустил сам вид блога
ОтветитьУдалитьВсегда пожалуйста :) Однако, именно текст и есть самое главное :) Кстати, в дополнение к статье, также для общего фона можно использовать селектор .header-outer задав ему обычный цвет или градиент при помощи стилей. Что в принципе и сделано у нас - два разных изображения - надпись и логотип, а также цветовой фон.
УдалитьСпасибо! вижу заходили ко мне. Я только начинаю сам разбираться что к чему, работа занимает очень много времени но все же я всегда ищу альтернативу и уделяю этому максимум внимания, в детстве не то учил, теперь сам переучиваюсь.
ОтветитьУдалитьда заглядывал :) Ну плацдарм для экспериментов у вас есть, сложного в этом деле ничего нет, немного фантазии и все получится.
УдалитьА как мне сузить шапку в блоге, чтобы не была такой широкой* http://olegzubkov.blogspot.com/
Удалитьизвините, а вы сможете мне помочь с заголовком, мне очень хочется заголовок блога как у одной девушки, но я самый чайниковый чайник.. если я пришлю ее блог сможете помочь сделать шаблон?)
ОтветитьУдалитьДавайте попробуем, мне это будет интересно :) Шаблон вы можете скинуть на электронную почту или, добавясь, через скайп. Все эти контакты вы можете найти в разделе меню RSS и Соц. сети
УдалитьА зачем ее собственно убирать-то, надпись эту? Лучше чтобы у блога все-таки было название, это и для поисковиков полезно... От "Названия блога" нужно избавляться другим способом, когда меняете её на картинку - через CSS или в настройках (Дизайнер шаблона - Дополнительно - Название блога) , указав размер шрифта 0, px или % и цвет текста- прозрачный (color: transparent; - через CSS)
ОтветитьУдалитьВ предложенном в статье примере CSS это есть - почти в самом начале, там где font-size: 0%; /*избавляемся от стандартного текста*/, а через строку есть такая запись - color: $(header.text.color);
вот тут можете вместо $(header.text.color) поставить transparent и будет вам счастье.
Привет, спасибо, полезные вещи пишите :)
ОтветитьУдалитьподскажите пожалуйста,(на вашем примере скажу) а как сделать чтоб на картинку с надписью "Бортовой журнал" можна было нажать ?
На неё и так можно нажать, т.к. картинка подложена как фон для ссылки (название блога), и указаны размеры этой ссылки в соответствии с размерами картинки.
УдалитьЗдравствуйте, как придать вот такой стиль названию и описанию блога?
ОтветитьУдалить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;}
В шапке блога кроме этого стоит картинка-фон
Так в статье, вроде, есть селектор описания...
Удалить.Header .description {
/*СВОЙСТВА ЗДЕСЬ */
}
Попутно изучаем статью о том как добавить CSS в Blogger - http://www.magentawave.com/2012/02/adding-css-to-html-blogger.html
Итить раскудрить :) мне не когда так не сделать мозгов не хватит.((((
ОтветитьУдалитьДа ладно :) Код готовый есть, экспериментируйте и все получится, если нет - помогем :)
УдалитьПрочитала статью очень внимательно... пролазила по настройкам, а вот сделать картинку с названием блога по середине страницы, так и не смогла.... Пожалуйста, помогите!
ОтветитьУдалитьВсе это делается в стилях, например:
Удалить.Header h1 {
position: absolute; /*абсолютное позиционирование, чтобы указать нужное расположение*/
background: url(...image.jpg) no-repeat; /*фон: картинка-название, без повторения*/
left: 560px; /*смещаем блок-картинку влево на значение равное ширине картинки*/
margin-left: -280px; /*указываем отрицательные отступ слева равный половине значение ширины изображения*/
height: 90px; /*высота блока, соответствует высоте изображения*/
width: 560px; /*ширина блока, соответствует ширине изображения*/
}
Попробуйте, должно помочь.
Огромнейшее спасибо!!!! Всё получилось!
УдалитьУдачи вам во всём и всего самого наилучшего!
С уважением, Марина
И вам, Марина, спасибо на добром слове. Заходите еще ;)
УдалитьВот бы похожие статьи по каждому разделу CSS в блоге. :)
ОтветитьУдалитьЗа навигацию отвечают меню вверху (плавающие выпадающие) и отдельно каталог по CSS для Blogger справа, когда вы находитесь в статьях про изменение дизайна и функционала Blogger-блогов он всегда открыт в иных случаях вы можете в него перейти используя иконки меню сверху правой колонки. Все предусмотрено, но, возможно, и сделаю "похожие статьи", но позже.
УдалитьЗдравствуйте, помогите пожалуйста!хочу уже установленную картинку хедера поменять на "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;
}
С уважением, Тарас
Смутно понял что именно вы хотите сделать...
УдалитьЗдраствуйте, уважаемый MagentaWAVE!
ОтветитьУдалитьНаткнулся на ваш блог по поисковмку и понял, что это то, что мне нужно.
Я только недавно сделал сврй блог на блогпост и пока в настройках шаблона- полный НУЛЬ.
Уже несколько суток ищу в тырнете всякие статьи по изменению и настройкам шаблона- пока ваши ответы и рекомендации- лично для меня наиболее вразумительные и понятные.
У меня такой вопрос- можно ли вместо картики в шапке блога- вставить флэш - презентацию?
Наверное можно, но надо понимать что "шапка" в блогспоте - это виджет и вставить именно в нее что-либо, это проблематично, но можно с помощью стилей (CSS) сделать саму шапку, так сказать, не видимой, а сразу ниже нее добавить гаджет HTML/JavaScript с кодом флешь презентации, как бы вместо шапки. Но я лично пока что так не делал, это - теория.
УдалитьСпасибо. Я понял.
УдалитьТогда - другой вопрос- можо ли сделать в шапке блога так, чтобы фоном была не одна статичекская картинка, которую я установил, а несколько картинок менялись?
Почему бы не использовать анимированный GIF формат? Но помните о весе изображений и соответственно скорости загрузки сайта.
УдалитьВ этом и проблема с GIF форматом ( в смысле веса) .
УдалитьЕсли сделать просто gif- ку со сменой картинок, как фон для шапки сайта- то она много весит. А там - ограничение по весу картинки.
В любом случае- спасибо за ответ.
Буду дальше искать решение этой проблемы.
Люди как то ставят в шапку- смену картинок.
Попробуйте покапать в сторону слайдеров, например можно вставить jQuery слайдер, тем же способом что и флеш,
УдалитьСпасибо. Вы действительно даете толковые советы. Мельком посмотрел на рекомендуемый вами сладер- наверное это то, что мне нужно.
УдалитьЕще ьы понять, как его вставить в шапку блога. Я - полный нулевой нуль в вэб- дизайне.
Добрый день! Подскажите, что-то не пойму, где вообще эти стили находятся)) хочу шапку свою вставить, нашла только код hnml
ОтветитьУдалитьВам сюда - http://www.magentawave.com/2012/02/adding-css-to-html-blogger.html
УдалитьСеня Ганджубас
ОтветитьУдалитьСпасибо автору за познавательную статью! Нашел то, что мне было необходимо!
Этот комментарий был удален администратором блога.
ОтветитьУдалитьКакой подзаголовок и куда поднять??? И пожалуйста, не нужно писать простыни кода в комментариях, во-первых - ни к какому полезному действию это не приведет и информации не добавит, а во-вторых - я его и так и увижу в исходном коде страницы.
УдалитьСпасибо огромное за статью - благодаря ней я сумела исправить один косяк в дизайне моего блога. Если бы не Вы, то я бы уже подбирала другой дизайн.
ОтветитьУдалитьА может быть, что в самом шаблоне какие-то настройки, которые мешают изменить размер и шрифт названия блога? Т.к. ничего поделать не могу, надо css применять в таком случае?
ОтветитьУдалитьОбычно с таким элементом как "шапка" блога проблем не возникает и особых настроек там нет, если это стандартный шаблон. Но что "страшного" в том, чтобы применить CSS? Он там применен изначально, и когда вы через "Редактор шаблонов" устанавливаете свои настройки дизайна, то фактически применяете CSS, только более автоматическим образом.
УдалитьВот статья на тему, может будет полезна
http://www.magentawave.com/2012/02/adding-css-to-html-blogger.html
Здравствуйте!
ОтветитьУдалитьУ меня вопрос немножко не по теме :)
Я убрала шапку и вместо неё добавила два виджета: страницы (которые будут содержать содержание / простите за тавтологию /) и соцкнопки. Вот мне бы очень хотелось, чтобы эти два виджета стояли в ряд на месте шапки, а они становятся один под другим. Как изменить шаблон так, чтобы они всё же стали в ряд? :)
Подскажите, пожалуйста, как можно убрать ссылку с названия (заголовка) блога? где это редактируется?
ОтветитьУдалитьЕсли нужно изменить название блога, то это редактируется в коде шаблона - Список виджетов - Header1, ищите строку:
Удалить<b:includable id='title'> - там будет условный тег и ниже то что вам надо. Можете совсем убрать условие, а можете просто удалить ссылку:
<a expr:href='data:blog.homepageUrl'>
при этом <data:title/> нужно оставить
Если название поста, то ищите data:post.title
Честь и хвала создателю данного сайта. Создавал страничку по шаблону, но захотел сделать по свему, искал решение нестыковок на многих сайтах, но нигде не нашел. И о чюдо, оказывается здесь есть все что я искал, и еще в добавок к этому вся инфа выложена в таком доступном ключе, так доходчиво разложена, что даже такой валенок как я разобрался не напрягаясь. Итог: на изготовление страницы потрачено два дня. К вечеру второго дня уже выложена в интернет. До этого о создании собственных страниц в интернете даже и не думал.
ОтветитьУдалитьИнформация на данном сайте представлена очень просто и доходчиво. Спасибо MagentaWAVE
Спасибо и вам! Рад что статья была полезной и помогла в решении вашей проблемы :)
УдалитьОднозначно сайт в закладки. И еще раз С П А С И Б О!
УдалитьСпасибо!
ОтветитьУдалитьМожет подскажете как восстановить шапку в блоге. Мне кажется я удалил ее.
ОтветитьУдалитьПросто добавьте соответствующий виджет в нужную секцию. Например:
Удалить<header>
<b:widget id='Header1' locked='true' title='(заголовок)' type='Header' version='1'>
<header>
Здравствуйте!Подскажите, как выравнить название блога в три строки (длинный текст). Ссылка на блог https://www.blogger.com
ОтветитьУдалитьЗдравствуйте.Как корректно оформить название блога, автоматически написано в три строки, но нужно перенести. Ссылка на блог https://panasenkova.blogspot.com Вот в таком виде.
ОтветитьУдалитьСайт директора
МАУ ДО "ДДЮТ им. Е.А.Евтушенко"
Панасенковой Любови Петровны
На
не реагирует.
Это можно сделать через код шаблона. Найдите в коде (Тема -> Изменить HTML) виджет с названием вашего блога (Header1), и пропишите там нужное название вместо того, которое там сейчас с тегом <br/> там где нужен перенос. Только тег в данном случае должен быть декодирован, т.е. добавлен в таком виде: <br /> иначе при сохранении шаблон выдаст ошибку.
УдалитьЗдравствуйте! Во-первых спасибо огромное за публикации -очень четко, понятно для "чайников" У меня вопрос по шапке блога. Я вставила картинку вместо заголовка. Теперь у меня на главной нет тега H1. Насколько это серьезная ошибка для поисковиков? Спасибо
ОтветитьУдалить