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

• Смена изображения заголовка в зависимости от времени суток
• Смена фона при обновлении страницы
• Как сделать, чтобы фон менялся при смене месяца
• Добавить баннер в заголовок Blogger
• Оптимизация заголовков Blogspot

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

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifw4XM-c9QoWWQT5ea8v86bWu3kC7xPCMiKZsJaqHpxAm-gxhmPDDot-PXgZJ2RcLyNvY0wLSxPEwxoHNjm0BzusCc7YluvruJih8y3r4mPMutnlwWb5pEAuMBsi54cCxXWn83EGiXW5Kb/s1600/privet.gif);
}
#header-inner h1:after {
  content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrklAdxENMvuJe6FJ5WFaHT9A24rXBm5htoGoccbztIa_BVwK0xNaZszL6sjZnlJ53Ls4Iy5FlxCzs2X9TWv9sWiVwByGvGtiZcpiBnQN2xeI0pEkgEXlaDO4q0hLlc7DcLIBUQqdAPZYf/s1600/demoHeader.jpg);
  position: absolute;
  transform: translate(100px, 0px); /* смещение вправо */
}

Пример

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

#header-inner {
  position: relative;
}
#header-inner:after {
  content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifw4XM-c9QoWWQT5ea8v86bWu3kC7xPCMiKZsJaqHpxAm-gxhmPDDot-PXgZJ2RcLyNvY0wLSxPEwxoHNjm0BzusCc7YluvruJih8y3r4mPMutnlwWb5pEAuMBsi54cCxXWn83EGiXW5Kb/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>

Образец