Приложение 1: Заголовок

Ранее было рассмотрено, как оптимизировать заголовки h1-h6, теперь очередь пришла к оформлению шапки блога. Здесь я затрону лишь CSS Header. Щёлкайте на картинки - они являются ссылками на блоги-образцы. Переходим на вкладку "Дизайн"-"Изменить HTML" и сохраняем копию шаблона. Нажав Ctrl+F, ищем:

/* Header
----------------------------------------------- */

Вид прямоугольной зоны заголовка определяется свойствами в

.header-outer {}
#header {}
#header-inner {}

Этот элемент может отсутствовать и мы его просто добавим ниже.

Сделать изображение в заголовке Blogger.

Содержание.

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

Сделать шапку в ширину сайта.

Мы уже знаем как увеличить ширину блога, посмотрим как сделать длинее шапку.

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

background: #512525;	цвет фона
height: 150px;	высота
margin: -2.3em 0em 0em 0em;	убираю отступы сверху
border-bottom: 2px ridge #ebe0c7;	стили границы внизу элемента
text-align: center;	выравниваем текст по-центру

Можно пониже опустить текст названия блога:

.Header h1 {
  font: $(header.font);
  color: $(header.text.color);
  text-shadow: 2px 2px rgba(0, 0, 0, .1);
  padding: 10px 0 0 0;}

Здесь была добавлена одна строчка:

padding: 10px 0 0 0;

отступ сверху внутри контейнера

Выровнить текст заголовка по центру.

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

background: url(адрес_изображения)

в качестве фона выбран рисунок

#header {
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipPzvK7pYfCetbcjXIaTGYg6SbqVTWCASqZRZh47zXzB0Foy3JwQOU1jXB2oY1Q1EbYLekKg2tfKhaXpqQoaTP7uGZYb0xJ5gImpd1TIT3c42tZTSpwu-06Aqp3HZXOCnnHCowOO3szCc/s1600/03a9facdf864.jpg);
  width: 950px;
  height: 200px;
}

, где width и height равен ширине и высоте рисунка соответственно.

Фон заголовка в виде одной картинки.

Не обязательно использовать единое изображение, можно взять небольшой рисунок и разместить его в удобном месте заголовка.

#header {background:
  transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlXCZnVfzEPZU5kmV9QYEAEatKqoM3p1TsYmDxHc6s5-iJ48FuSlXPNUk4vvZYyhEZOMNKYvtTxqQjfjLoVDzMV_cGUJosiYrsdY0EvuvflIxDstjO27RDLTx_J4xrMBN03syXmjLDDXoI/s1600/demoHeader.jpg) no-repeat 90% 50%;
  height: 200px;
  width: 800px;
  text-align: center;
  position: relative;}

position: relative;	положение элемента устанавливается относительно его исходного места
no-repeat	определяет одно фоновое изображение в элементе без его повторений
90% 50%	устанавливаем расположение картинки по-горизонтали и вертикали в прямоугольнике заголовка

В шапке сайта одна небольшая картинка.

Не ограничивайте себя использованием одного изображения и включите ещё один прямоугольник, который располагается в рамках #header:

#header-inner { 
  background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_-rjFLGQx0wVxlC_c5Y-jwP_-z7tHtDTTOqxa-IK0Z9Zv3pa-8wjpGYzy-yburo73B-B8nHUQXaYV7I2uh-4ufsD9PRlj0fOhcvyF906k-ODROYMHjTVX1vUOlN2f7D-fLCRRJ8bvTxVL/s1600/privet.gif) no-repeat 8% 50%; 
  height: 200px; 
  width: 100%;
}

Два изображения в шапке блога.

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

Думаю этот эффект заслуживает внимание: посетителю блога предлагается изображение в зависимости от времени суток, когда он зашёл на ресурс. Перед </head> добавляем скрипт:

<script type="text/javascript">
var image=new Array();
image[0]="URL_изо0";
image[1]="URL_изо1";
image[2]="URL_изо2";
image[3]="URL_изо3";
image[4]="URL_изо4";
image[5]="URL_изо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 type='text/css'>");
document.write("#header {background:url("+imagen[alea]+") no-repeat;}");
document.write("</style>");
</script>

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

Изменить картинку заголовка в зависимости от времени суток.

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

Аналогично перед </head> вносим:

<script type='text/javascript'>
var image=new Array();
image[0]=&quot;#808080&quot;;
image[1]=&quot;#ffd363&quot;;
image[2]=&quot;#003366&quot;;
image[3]=&quot;#e1d4c1&quot;;
image[4]=&quot;#ff6600&quot;;
image[5]=&quot;#cfdbec&quot;;
image[6]=&quot;#639200&quot;;
image[7]=&quot;#64737c&quot;;
image[8]=&quot;#f2e28c&quot;;
image[9]=&quot;#ff0000&quot;;
image[10]=&quot;#73905c&quot;;
image[11]=&quot;#b74f08&quot;;

var alea=Math.round(Math.random()*11);

document.write(&quot;<style type='text/css'>&quot;);
document.write(&quot;.header-outer {background: &quot;+image[alea]+&quot;&quot;);
document.write(&quot;</style>&quot;);
</script>

Изменение происходит не только при обновлении страницы, но и переходе с одной страницы на другую. Пример.

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

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

<script type="text/javascript">

var d=new Date();
var month=new Array(12);
month[0]="URL_изо1";
month[1]="URL_изо2";
month[2]="URL_изо3";
month[3]="URL_изо4";
month[4]="URL_изо5";
month[5]="URL_изо6";
month[6]="URL_изо7";
month[7]="URL_изо8";
month[8]="URL_изо9";
month[9]="URL_изо10";
month[10]="URL_изо11";
month[11]="URL_изо12";
document.write("<style type='text/css'>#header {background:url(" + month[d.getMonth()] + ") no-repeat;}</style>");

</script>