К основному контенту

Меняющаяся фон и шапка блога на блоггер.

Многие используют шаблоны для блоггер с слайдами, при помощи java скриптов. Однако, что если Вы хотите чтобы шапка Вашего блога, либо его фон изменялись при каждом обновлении страницы, или к примеру Вашему блогу подошли бы несколько картинок в качестве фона, и Вы хотите показать их все, тогда следующие инструкции придутся Вам по вкусу.

Итак как сделать изменяющуюся картинку в шапке блога.

В моем блоге есть статьи как работать и как создать уникальную шапку для блога, для этого Вам необходимо почитать статью под названием

Создаем уникальную шапку для блога.

1. Создаем необходимое количество картинок для шапки, которые подходят по размеру и тематике Вашему блогу.
2. Загружаем картинки на хостинг. Если у Вас нет хостинга тогда читайте следующие статьи о том где хранить файлы:

Бесплатный хостинг или где хранить файлы для блоггера, Бесплатный хостинг для блоггер, Бесплатный хостинг на 2 гб от DropBox

3. После того как загрузили картинки на свой хостинг, заходим в Настройки/Дизайн/Добавить гаджет и выбираем HTML/Java Script в него вставляем следующий код:
<script type="text/javascript">
var banner= new Array()
banner[0]="Image01URL"
banner[1]="Image02URL"
banner[2]="Image03URL"
banner[3]="Image04URL"
banner[4]="Image05URL"
banner[5]="Image06URL"
banner[6]="Image07URL"
banner[7]="Image08URL"
banner[8]="Image09URL"
banner[9]="Image10URL"
var random=Math.floor(10*Math.random());
document.write("<style>");
document.write("#header {");
document.write(' background:url("' + banner[random] + '") no-repeat top left;');
document.write(" }");
document.write("</style>");
</script>
Редактируем код:
а) Вместо Image01URL вставляем ссылку на картинку.
б) Скрипт будет в случайном порядке выбирать картинки при каждом обновлении страницы.
в) Если у Вас меньшее количество картинок, оставьте необходимо количество ссылок, и измените цифру 10 на цифру равную количеству Ваших картинок.

Изменяющийся фон блога.

Если Вы хотите добавить одну картинку в качестве фона блога, то найдите следующий тэг:
body {
background:
после двоиточия в Вашем блоге будет идти либо код цвета (#010287;) либо ссылка (url(http//…….);) Заменя код цвета на ссылку с картинкой у Вас в блоге появиться Ваш фон.
А теперь как сделать так, чтобы Ваш фон изменялся.
проделываем все теже шаги, только вставляем немного другой скрипт:
<script type="text/javascript">
var banner= new Array()
banner[0]="Image01URL"
banner[1]="Image02URL"
banner[2]="Image03URL"
banner[3]="Image04URL"
banner[4]="Image05URL"
banner[5]="Image06URL"
banner[6]="Image07URL"
banner[7]="Image08URL"
banner[8]="Image09URL"
banner[9]="Image10URL"
var random=Math.floor(10*Math.random());
document.write("<style>");
document.write("body {");
document.write(' background:url("' + banner[random] + '") repeat center center;');
document.write(" }");
document.write("</style>");
</script>
Редактируем код аналогично предыдущему. только здесь важное значение имеет расположение картинки, если Ваша картинка маленькая  и Вы хотите чтобы она повторялась оставьте Repeat, если у Вас большие картинки и они заполняют весь фон Вашего блога то вместо repeat вставьте no-repeat fixed
Надеюсь Вам понравилась данная статья.

Комментарии

  1. такая проблема, если не убрать уже стоящую шапку, то они на нее лепятся, а если убрать то окошко под шапку сужается, кароч решил созданием шапки с невидимым текстом)

    ОтветитьУдалить

Отправить комментарий

Популярные сообщения из этого блога

Добавляем красивый гаджет Поделиться

Если Вы регулярно совершенствуете свой блог, то Вам пригодится данная не сложная публикация, о том как добавить красивую кнопку "Поделиться". Ее особенность в том, что при наведение курсора она раскрывается и предлагает несколько сервисов в которых можно разместить ссылку на Ваш блог. Демо можно посмотреть тут!

Как сделать ссылку на определенную часть той же страницы.

Все блоггеры пользуются ссылками практически в каждой статье, помимо удобства это еще и очень полезно для индексации блога. Сегодня хотел бы описать как сделать ссылку на туже страницу на которой находится Ваш читатель, только ниже, либо Выше, допустим Ваша статья состоит из нескольких частей и читатель, хочет пропустить первую и перейти сразу ко второй. Сделать это достаточно просто! 1.Для начала нам необходимо присвоить определенной части текста “Якорь”, допустим Вы хотите ссылать на каую-либо часть статьи, перед началом необходимого участка текста вставьте в HTML коде статьи следующий тег : <a id=" yakor "></a> Начало текста или заголовка В качестве слова якорь выделенного красным вы можете использовать любое другое, подходящее по смыслу. 2. Теперь необходимо сделать ссылку на данный якорь. А именно в HTML коде страницы перед словом которое должно быть ссылкой ставим тэг вида: <a href="# yakor ">Слово</a> Покажу как это долж

Открыть несколько ссылок одним кликом мыши

Многие из Вас наверняка встречали сайты, на которых нажав на одну ссылку открывается сразу несколько сайтов. Так делают те кто хочет прорекламировать независимый интернет ресурс, в таком случае открывается ссылка по которой вы должны перейти и еще одна, так-же это делают для увеличения просмотров определенных страниц на сайте, либо если действительно необходимо открыть сразу две ссылки. Для обычного блоггера это может быть полезным так как заинтересовав человека одной ссылкой Вы как бы повышаете популярность Вашего ресурса, так как он посетит вместо одной страницы в Вашем блоге сразу несколько. Чтобы вставить такую ссылку необходимо к тексту добавить следующий код: <a href="http://www.ссылка1.com/" target="_blank" onmouseover="window.open(&quot;&quot;http://www.ссылка2.com&quot;&quot;);window.open(&quot;&quot;http://www.ссылка3.com&quot;&quot;);">Click Here Link Bucket</a>   Вставьте свои ссылки, увеличьт