Добавить картинку в заголовок блога

В заголовок сайта картинка вставляется тремя способами:

  1. фоном для единого рисунка. Текст будет располагаться поверх фотографии.
  2. изображением-ссылкой, когда отсутствует текст.
  3. с помощью :before и :after для резиновых ресурсов.

У шапки блога на Blogger id='header-inner'. Зная это мы можем дополнить стиль CSS, скажем так:

#header-inner h1 {
  overflow: hidden; 
  line-height: 200px; /* текст по центру по вертикали */
  text-align: center; /* текст по центру по горизонтали */
  position: relative;
}
#header-inner h1:before {
  content: url(http://3.bp.blogspot.com/_ebKrCj8TLPk/TRSzKiMWldI/AAAAAAAABPQ/Wm-77nzJEaU/s1600/privet.gif);
}
#header-inner h1:after {
  content: url(http://4.bp.blogspot.com/_ebKrCj8TLPk/TRSLqf1V6II/AAAAAAAABPA/gxtqKRprck4/s1600/demoHeader.jpg);
  position: absolute;
  transform: translate(100px, 0px); /* смещение вправо */
}
Пример

Для варианта, когда присутствует изображение на вкладке "Дизайн" в блоке "заголовок" гаджет заголовок в Blogger применим CSS наложение:

#header-inner {
  position: relative;
}
#header-inner:after {
  content: url(http://3.bp.blogspot.com/_ebKrCj8TLPk/TRSzKiMWldI/AAAAAAAABPQ/Wm-77nzJEaU/s1600/privet.gif);
  position: absolute;
  top: 20px;  /* свои значения */
  left: 50px;  /* свои значения */
}

Смена изображения заголовка в зависимости от времени суток

Думаю этот эффект заслуживает внимание: посетителю показывается картинка, которая соответствует часу, когда он зашёл на ресурс.

Перед </head> добавляем скрипт:

<script>
var image=new Array();
image[0]="изо0";
image[1]="изо1";
image[2]="изо2";
image[3]="изо3";
image[4]="изо4";
image[5]="изо5";
var now = new Date();
var hours = now.getHours();
var alea=0
if (hours>0) {alea=0;} 
if (hours>4) {alea=1;} 
if (hours>8) {alea=2;} 
if (hours>12) {alea=3;} 
if (hours>16) {alea=4;} 
if (hours>20) {alea=5;} 
document.write("<style>#header-inner:after {content: url(" + image[alea] + "); position: absolute;}</style>");
</script>

Количество изображений (image[номер]="URL_изо") вы можете выбрать любое, но не более 24. Строка "if (hours>0) {alea=0;}" говорит, что первый рисунок (alea=0;) будет показан в течении четырёх часов с 0:00 до 4:00. Далее по аналогии.

Например, картинка авто меняется с каждым четвёртым часом.

Образец

Смена фона при обновлении страницы

Показывается случайная картинка из списка при обновлении страницы. Перед </body> вносим:

<script>
var image=new Array(12);
image[0]="изо0";
image[1]="изо1";
image[2]="изо2";
image[3]="изо3";
image[4]="изо4";
image[5]="изо5";
image[6]="изо6";
image[7]="изо7";
image[8]="изо8";
image[9]="изо9";
image[10]="изо10";
image[11]="изо11";
var alea=Math.round(Math.random()*11);
document.write("<style>#header-inner:after {content: url(" + image[alea] + "); position: absolute;}</style>");
</script>
Образец

Как сделать, чтобы фон менялся при смене месяца

Перед </body> вносим:

<script>
var d=new Date();
var month=new Array(12);
month[0]="изо0";
month[1]="изо1";
month[2]="изо2";
month[3]="изо3";
month[4]="изо4";
month[5]="изо5";
month[6]="изо6";
month[7]="изо7";
month[8]="изо8";
month[9]="изо9";
month[10]="изо10";
month[11]="изо11";
document.write("<style>#header-inner:after {content: url(" + month[d.getMonth()] + "); position: absolute;}</style>");
</script>
Образец
Rookee — инструменты для привлечения клиентов на сайт
в f t
наверх ↑

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

ольга
Я пока сделала себе статичную картинку через Пикасу, и ширину увеличила за счет шаблонов блоггера. Статья понятная,время появится - буду пробовать
NMitra
Оль, вы не представляете, как я стремилась к изложению в доступном виде. Рада, что мне это удалось)))
Jendosimo
Отличный блог! Спасибо за советы.
NMitra
Добро пожаловать!
belinee
Все мега доступно! Спасибо большое! То что нужно!
NMitra
Рада помочь!
Шальнова Елена Сергеевна
А как можно вставить картинку - логотип с прозрачным фоном в левый верхний угол блога? Не в заголовок, а еще левее?
NMitra
Добавьте новый блок: http://shpargalkablog.ru/2011/01/dobavit-blok-v-zagalovok-blogger.html и в созданном гаджете укажите необходимый URL

Только в свойства добавьте
#Image999 {filter:alpha(opacity=80); opacity:0.80;}
Петровна
Добрый день!
Будьте добры, подскажите пожалуйста, как можно разместить много картинок на одной страничке, чтобы посетители могли их скачивать?

2. Как можно сделать так, чтобы при нажатии на картинку она увеличивалась и приводила на другую страницу, где она крупным планом?

3. И пробовали ли Вы когда нибудь сделать анимацию картинки?

Вот у меня много картинок, и мне хотелось бы их выложить на сайт, но, чтобы обязательно внизу были ссылки на них.
Я не могу сообразить, как это сделать. Я еще просто совсем чайник.
Я думаю, что с вашим вниманием, вы меня не оставите без ответа.
Заранее спасибо.
NMitra
Я подумаю как лучше это организовать. Довольно объемный вопрос.
совесть
Здравствуйте Наташа.
Я наверное вас уже замучил своими проблемами.
В общем сделал картинку со слоями и все в нее втиснул.
http://myrussiammm.blogspot.com/
Вот что у меня получилось.
Наташа помогите пожалуста, над шапкой блога осталось место и с лева тоже. Подскажите как сдвинуть картинку, чтобы она полностью закрывала эти пространства.
NMitra
Привет! Вы так много уже чего по-изменяли))). Чтобы уменьшить над шапкой пространство посмотрите комментарии к этой статье - http://shpargalkablog.ru/2011/01/prostranstvo-u-zagolovka.html. А чтобы сместить влево замените
#header
на
.header-outer

У меня разрешение монитора чуть выше вашего, и поэтому выглядить будет всё равно не очень. Я бы на вашем месте сделала так:

.header-outer {background:
transparent url(http://s007.radikal.ru/i301/1105/5c/44b3124a98e1.jpg);
height: 288px;
}

Картинка будет повторяться по-горизонтали. Но нужно предварительно в Фотошопе убрать полосу справа.
PANIC
По-моему, в "Сделать шапку в ширину сайта." Вы объясняете как изменить высоту шапки, а не ее ширину. А как изменить именно ширину? например, чтобы шапка была во всю ширину страницы, а сама ширина блога (тело с сообщениями, боковая панель и др.) осталась прежней.
NMitra
Привет! Рада слышать)

Твой блог уж больно долго грузиться - 3,7 секунд.

В шаблоне "Путешествие" нужно также изменить

html body .region-inner {
min-width: 0;
max-width: 100%;
width: auto;
}

на

html body .content-outer {
min-width: 0;
max-width: 100%;
width: 100%;
}

А в "Простая"

body {
font: $(body.font);
color: $(body.text.color);
background: $(body.background);
padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);
$(body.background.override)
}

html body $(page.width.selector) {
min-width: 0;
max-width: 100%;
width: $(page.width);
}

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

изменить на

body {
font: $(body.font);
color: $(body.text.color);
background: $(body.background);
$(body.background.override)
}

html body .content-outer {
min-width: 0;
max-width: 100%;
width: 100%;
}

.content-inner {
padding: 0;
}
PANIC
да, немало времени... там столько всего наворочено. вот уже давно хочу сменить оформление.

пока решила остановить на шаблоне "путешествие". и если там изменить, как Вы предложили, то ширина растягивается не только шапки, а всего того фона, что под шапкой и телом сообщений (не основного фона и не фона под самими сообщениями). а мне надо, только шапку растянуть.
NMitra
Этот шаблон не очень подходит. Измени только:

.header-outer {
margin: -3em -50em 0em -50em;
border-bottom: 2px ridge #ebe0c7;
text-align: center;
background: #512525;
height: 150px;
}

-50em - это довольно завышенные величины. Укажи другие.
temasey
можно ли изменить размер картинки? чтобы она не зависела от ширины сайта?
NMitra
Заголовка или фон всего сайта? Для какого из блогов?
NMitra
Увидела. Как же вы подгоняли размер?

Попробуйте для фонового рисунка задать background-size: 1 550px 2000px;.
temasey
нет... ну у меня картинка вместо заголовка, его и нужно увеличить, фон беспонтово трогать... belo-mor.ru
NMitra
А я Андроида смотрела.

http://www.belo-mor.ru/. Что-то у меня фоновая картинка, на ней фон заголовка, а над ним буквы блога. Жуть.

С фона сайта убирай узор. Его добавь в изображение заголовка. С помощью margin подвинь влево (он может принимать отрицательные значения).
temasey
где этот margin находится то? или как им воспользоваться?
NMitra
Добавить

#Header1_headerimg {margin: 0 50px 0 -50px;}

в шаблон.

Подробнее http://shpargalkablog.ru/2011/03/svoistva-margin-padding.html
temasey
не понимаю... вставляю ниче не происходит
temasey
http://shpargalkablog.ru/2011/03/svoistva-margin-padding.html
там в конечном коде есть хотя бы ссыль на картинку... а я даже ее найти не могу
temasey
ну где же ты :(
temasey
так..разобрался)
это я понял... но цель то заключалась в том чтобы растянуть эту картинку не затрагивая область сообщений
temasey
не знаешь дак ответила бы хоть
NMitra
Извини, не получается круглосуточно сидеть за монитором.

Посмотрела. Комментарий 23 не подходит. Сделай так:

#Header1 {margin-left: -200px;}
damir-tote
этот код нужно добавить рядом с другими кодами?
damir-tote
Все я понял) СПАСИБО)))
NMitra
Отлично!)
damir-tote
Глянь пожалуйста, я хотел изначально заменить букву d на эту картинку, но вроде это не получиться. А как установить изображение перед загаловком? чтобы загаловок сдвинулся вправо
damir-tote
NMitra ты согласна со мной обменяться постовыми???
NMitra
Откройте профиль, переходить будет удобней.

Изменяйте значение процентов, например:

#header-inner {
background: transparent url(http://3.bp.blogspot.com/-ZphfbN_FHK4/TnlyR8Tq_jI/AAAAAAAABEQ/Clf6LnBuCvw/s40/d.png) no-repeat 20% 1%;
height: 100px;
width: 100%;
}

Я, как правило, сейчас не осуществляю обмен ссылками и их продажу. Я думаю вы уже это успели заметить по страницам блога.
damir-tote
Я так много раз проверял, и с минусом ставил, ни чего не помогло, решил чуть по другому сделать... а может потом вообше просто картинку оставлю сооруженную в фотошопе.

Жаль... что не хочешь обменяться. Я ТОДу предложил, но пока еще мне не ответил.

Кстати зря ты девушку убрала с шапки - это твоя фишка была. А теперь чертенок в футере...
NMitra
Мне порой проще самой сделать. Можешь, если хочешь, сбросить на почту шаблон.

Не люблю однообразия, тоскливо становится. Чёртик чем-то приглянулся.
Анонимный
Здравствуйте, будьте добры, подскажите как сделать заголовки объемными ? Bloglovin требует чтобы они были кликабельны пардон
NMitra
Здравствуйте.

.Header h1 {...}

Вместо троеточия добавьте стили отсюда http://shpargalkablog.ru/2011/02/css-ten-teksta.html#text-shadow

Я верно поняла вопрос?
Marina Varzhainova
Огромное спасибо за эту статью!
Пошла рисовать себе картинку :)
Юлик
Здравствуйте. Читаю Ваши статьи, многое пытаюсь использовать, но вот с картинкой в шапке получается слабовато.
Т.е. она есть, но всегда по умолчанию прижимается к левому углу и при расширении границ блога выглядит не очень красиво. Приходится удерживать ширину блога в соответствии с рисунком. Вот адрес блога: http://iherborganic.blogspot.com
NMitra
Вы когда добавляли картинку, галочку установили "Вместо заголовка и описания"?

Код

<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>

замените ( http://shpargalkablog.ru/2011/12/kak-izmenit-shablon-blogger.html ) на (параметры определены с учётом вашего изображения)

<img expr:alt='data:title' height='418' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' width='1022' style='display: block; z-index: 10; margin: 0 auto; width: 1022px;'/>
Юлик
NMitra, спасибо огромнейшее. Галочка была проставлена сразу. Вставила указанный Вами код и картинка выровнялась!
Еще тысячу мерси!!!!!!!
Наталка Михайлівна Зуб
Добрый вечер! Подскажите пожалуйста как сделать чтобы картинка была справа от заголовка блога???Хотелось бы ее поставить именно где свободное место..Заранее спасибо.
NMitra
См. статью. Попробуйте вначале реализовать.

Большая просьба, перед тем, как писать о проблеме, уберите, пожалуйста, вредоносный код. Его не пропустят ни Яндекс, ни Гугл. В итоге у вас не будет позиций в поисковых системах, а значит и посетителей.

См. http://safesearch.ya.ru/
Наталка Михайлівна Зуб
Я конечно очень извиняюсь, но я ничего не поняла(просто я во всем этом очень далека).Что за вредоносный код, где он у меня, откуда взялся??? И что мне делать на http://safesearch.ya.ru/????? Я зарегистрировалась, а что дальше делать???? Там так много всего и что мне с этим делать??? Я очень извиняюсь, ну не знаю я...
NMitra
Основная мысль: добавляя внешние скрипты, в том числе выплывающую рекламу, разные "ваш браузер устарел" и т.п. вы заражаете страницы блога, начинает срабатывать антивирус. Ко мне обращался человек, у которого в результате такого баннера "поплыла" вся вёрстка. Нет, я не говорю, что вся реклама - зло, но выбирайте более надёжных партнёров.

Яндекс сообщает о всём, что находит, где может крыться угроза. Поскольку всё перечислять не имеет смысла, я дала ссылку на первоисточник.
Olesota
Здравствуйте, для скриптов со сменой изображений куда грузить все эти изо1, изо2..?)
Валерий Медведев
виват виват виват профессионалам. круто впечатляет сильно. вопрос такой: поставил фоновую картинку в body и прозрачный фон на сообщения. теперь хочу увеличить прозрачность и не могу найти в коде где это прописано???
http://www.spainyribalka.blogspot.com.es/
NMitra
Несколько URL
//www.blogblog.com/1kt/transparent/white80.png
заменить на свой. Картинку можно сделать в Фотошопе.
Olesota
точно! спасибо!
NMitra
Olesota, перед </head>
Валерий Медведев
может быть у меня тоже присутствует вредоносный код? вы уж хотя бы оповестите меня об этом. жду в недоумении и с нетерпением.
NMitra
Панели вебмастера Яндекс и Гугл. У меня на компьютере avast, может быть Касперский. Если ничего из вышеперечисленного "не ругается", то будьте спокойны.
Mishechka
Здравствуйте! Я готовлю себе новый шаблон и за основу взял "Венецианское окно", но выяснилось, что у названия блога в шапке нет ссылки на главную страницу. Как это сделать? В моём старом шаблоне она уже была.
NMitra
Переходите на страницу с Сообщением, щелкаете на название блога, ссылка есть. Если она отсутствует, "Шаблон"-"Изменить HTML"-"Восстановить шаблоны виджетов по умолчанию".
Mishechka
Действительно, на странице Сообщения ссылка работает.
Но мне кажется это не совсем удобно когда посетитель не находится на странице Сообщения, а просто просматривает анонсы переходя по страницам (кнопки "Вперёд" "Назад"). Тогда, если он находится вверху страницы, ему нужно спуститься вниз и нажать "Главная страница".
В старом шаблоне ссылка на названии блога почему-то всегда была активной...
NMitra
И по кнопкам "Предыдущие"/"Следующие" ссылка на Главную активна
Mishechka
Я проверил, при уходе с Главной ссылка становится активной. Действительно, какой смысл переходить с Главной на Главную?
Простите, Наталья я не подумал. Спасибо.
Посмотрите пожалуйста ещё на это:
http://i46.fastpic.ru/big/2013/0430/db/0c063b04faef83570ba5dd6d2ae672db.png
NMitra
Это нормально, так и должно быть.
Mishechka
Спасибо.
MURzilKA Moya
Добрый день. Не подскажите ли. Я в простом шаблоне вставляю в заголовок (вместо него) картинку gif. Как сделать. чтобы фон под ней был прозрачным?
NMitra
Сразу давайте адрес страницы, для чего используйте вариант: ИМЯ/URL при написании комментария. Теория http://shpargalkablog.ru/2013/02/opacity-css.html
Sonya Baku
Извините, у меня вопрос. Как я могу вставить изображения вместо этого слова "изо" (это там где по часам меняется)
NMitra
изо - это адрес изображения, его URL, например, http://1.bp.blogspot.com/_ebKrCj8TLPk/TRc4_hPXTmI/AAAAAAAABQE/ycRtyie_-gI/s1600/corenavigation_sls-class_c197_230x200_11-2009.jpg

То есть там добавляете несколько разных URL картинок
Юлия Музычная
Зд,Наташа! Проверяю оптимизацию с помощью сервиза PageSpeed Insights:-,, удалите из верхней части страницы JavaScript и CSS, блокирующий изображение. Количество блокирующих ресурсов CSS на странице: 2. Они замедляют отображение контента.
-Подскажите в каком месте находится этот, зверь, JavaScript я удалила(очень быстро происходит загрузка, а вот CSS в верхней части не найду : мой сайт :http://myguitara08.blogspot.com
Спасибо! С уважением,Юлия.
NMitra
В Blogger с этим ничего не поделаешь.
Nonna
Наталья, надеюсь, что не замучила Вас своими вопросами..Спасибо Вам огромное за Ваш труд, внимание и желание помочь!!!
Строки из комментариев: «А как можно вставить картинку - логотип с прозрачным фоном в левый верхний угол блога? Не в заголовок, а еще левее?»
Ваш ответ: «Добавьте новый блок: http://shpargalkablog.ru/2011/01/dobavit-blok-v-zagalovok-blogger.html и в созданном гаджете укажите необходимый URL

Только в свойства добавьте
#Image999 {filter:alpha(opacity=80); opacity:0.80;}»
А мне нужно в правый угол,но..
1.гаджет я добавила только изменением цифры 1 на 2.
,не добавляя
2.при заполнении гаджета картинка не на прозрачном изначальном фоне, а с тонюсенькой квадратной окантовкой(вставляла с жесткого диска и привязывала на картинку ссылку на другую страницу).
3.можно ли в position перед ]]> установить самые крайние значения верх и вправо?
4. и как можно не добавлять название гаджета?(без него не сохраняется, а оно мне не нужно)
5. у меня для заголовка стоит :помещать описание под изображением, но картинка прижата влево и справа пустота. Поэтому хотелось бы, не выходя на фон, на одном(или выше, что не так заметно) уровне с заголовком добавить Logo(о котором говорилось выше), и прижать его вправо
Nonna
не добавляя b widget id HTML999' locked= false type='HTML
Загад Загадыч
Привет! Ломаю голову со стилями этими) Разрешите спросить. Как центрировать заголовок блога, если он исполнен в виде jpg-рисунка. Просто с текстом все понятно, а с рисунком не совсем, жду с нетерпением ответ))
NMitra
Привет, вариантов много, например, так

<img alt='Всё по Закону!' height='123' id='Header1_headerimg' src='адрес' style='display: block; margin: 0 auto;' width='587'/>
Загад Загадыч
Спасибо за оперативный ответ)