Картинка перед заголовком страницы на Блогспот, Блоггер

Пост (в основном) для пользователей:

Blogger, Блоггер (Blogspot, Блогспот) 

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

Установка как всегда очень проста: Дизайн - Добавить гаджет - HTML/JavaScript, НО придется немного "поиграться" настройками, ибо размеры заголовков у всех разные.

<style>.post h3 { background:url(http://s61.radikal.ru/i171/1303/a7/b994b024329f.jpg)no-repeat top left;margin: 0px; padding: 40px 0px 0px 80px; line-height:1.1em; }</style>

Внимание, padding: 40px 0px 0px 80px; это изменяемая величина: 40px по вертикали, 80px; по горизонтали. Там где помечено красным, вы можете вставить вашу картинку.

источник

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

Посмотрим как добавить в шапку Blogger гаджет HTML/JavaScript, куда в свою очередь можно вставить сторонний код, например, код баннера рекламодателя или форму поиска Яндекса.

Пункт 1. На вкладке "Шаблон" без указания галочки "Расширить шаблоны виджета" код

      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='ВАШЕ_НАЗВАНИЕ (заголовок)' type='Header'/>
</b:section>

нужно заменить на

      <b:section class='header' id='header'>
<b:widget id='HTML999' locked='false' type='HTML'/>
<b:widget id='Header1' locked='true' title='ВАШЕ_НАЗВАНИЕ (заголовок)' type='Header'/>
</b:section>

Пункт 2. На вкладке "Дизайн" над блоком заголовка появится гаджет "HTML/JavaScript". Заполняем его.

Пункт 3. На вкладке "Шаблон" без указания галочки "Расширить шаблоны виджета" перед ]]></b:skin> пишем CSS:

#header {position: relative;}

#HTML999 {
  z-index: 200;
  position: absolute;
  top: 5%;  /* отступ сверху */ 
  right: 0;  /* отступ справа */
}

Путём подбора значений top и right добиваемся нужного положения. Подробнее про CSS наложение.

источник

Пример как разместить текст поверх изображения на HTML

ЗАГОЛОВОКпрозрачная область

<style> .imgteaser { /* общий блок */ position: relative; display: table; margin: 0 auto; border: 10px solid #456; line-height: 0; color: rgb(223,223,223); cursor: pointer; } .imgteaser:after { /* "подробнее" */ content: "подробнее \bb"; position: absolute; right: 10px; bottom: 10px; padding: 5px 10px; background: rgba(17,34,51,.6); line-height: 1.6em; } .imgteaser:hover:after {content: none;} .imgteaser figcaption {display: none;} .imgteaser:hover figcaption { /* прозрачная область */ display: block; position: absolute; bottom: 10px; left: 10px; right: 10px; padding: 5px 10px; background: rgba(68,85,102,.7); font-size: 80%; line-height: 1.3em; } .imgteaser:hover figcaption strong { /* заголовок */ display: block; line-height: 2em; font-size: 110%; } </style> <figure class="imgteaser"> <img height="600" width="539" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQrVcRy0a0iNjwte1s6JWjxEq8TAYKAKMNws4pAKL-3d-8M7DePLlSeioo90kPKY9pEZldaFikSTJYBtyW8V2102OZujYBfy_Kw-VrjJxuhBDh3nD-Fikl7GYv4-nxLpKsOc7s10CMZqsP/s600/kon.jpg" alt="конь"/> <figcaption><strong>ЗАГОЛОВОК</strong>прозрачная область</figcaption> </figure>

источник

Образец как наложить один текст на другой.

Пример

Образец

<style type="text/css"> #superponer { position: relative; text-align: center; } #superponer h5 { color: #fcda54; font-family: Georgia; font-size: 140px; letter-spacing: -6px; margin: 0; opacity: .9; padding: 0; -moz-transform: skew(20deg); -o-transform:skew(20deg); -webkit-transform: skew(20deg); } #superponer h6 { z-index: 100; color: #4682b4; font-family: Verdana; font-size: 60px; letter-spacing: 20px; margin: 0; padding: 0; position: absolute; top: 26px; left: 120px; } #superponer h6 > span { display: inline-block; color: #ff6666; font-family: Times New Roman; font-size: 100px; font-style: italic; text-shadow: 3px 3px 1px #000000; } #superponer > h6:hover span { -moz-transform: scale(2); -o-transform: scale(2); -webkit-transform: scale(2); zoom: 2; } </style> <div id="superponer"> <h5> Пример</h5> <h6> Обр<span>а</span>зец</h6> </div>

источник

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

Перед </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>

источник

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

Показывается случайная картинка из списка при обновлении страницы. Перед </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>

источник

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

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

Перед </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. Далее по аналогии.

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

источник

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

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

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/AVvXsEhkIWsTkG64Wj3Jv-PWf2cxr4gCyhxNpfmecD9hcYBbGSOWBfshoqRVrj_Su4QkXhzgoLBMZ02M-bJvXWusHyhizIqDMd4yg_zbpYXZwHzmtHB11dqAovsBfgUqYzhvp6UlceoUydoIL0Mb/s1600/privet.gif);
}
#header-inner h1:after {
  content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1hV3t_6vnQp1MIeaQzPkcRczcNWz6c1RA4LgRVjKj_1A0TNp7kzGD-SZuNpCFatcAUl3jzBexenDQqOe3ocaw_GhpHEmONoHSfkDY53yQFUtt9tgN28fzvPwn4b4rlqvsFU4hkycUN4OH/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/AVvXsEhkIWsTkG64Wj3Jv-PWf2cxr4gCyhxNpfmecD9hcYBbGSOWBfshoqRVrj_Su4QkXhzgoLBMZ02M-bJvXWusHyhizIqDMd4yg_zbpYXZwHzmtHB11dqAovsBfgUqYzhvp6UlceoUydoIL0Mb/s1600/privet.gif);
  position: absolute;
  top: 20px;  /* свои значения */
  left: 50px;  /* свои значения */
}

источник