Новогодние gif (гирлянда, картинки) для сайта

gif гирлянда на сайт

Здравствуйте, сегодня продолжим украшать наши сайты, а именно: рассмотрим как вставить gif гирлянды, gif картинки.


Скачать исходники для статьи можно ниже

GIF — это популярный формат графических изображений, поддерживающий анимацию.

1. Гирлянды gif

Давайте вставим вот такую gif картинку-анимашку-гирлянду в верхней части сайта:

gif гирлянда на сайт

Для этого можно зайти в админку wordpress, в левом меню выбрать пункт «Внешний вид» и его подпункт «Редактор», справа в списке шаблонов выбираем файл header.php и сразу после тега «body» вставляем код блока с нашей gif гирляндой:

<div style="height: 30px; background: url(http://mnogoblog.ru/wp-content/uploads/2014/12/girlanda.gif) repeat-x 100%;"></div>

Вот скриншот вставки данного кода:
вставка гирлянды на сайте

Для того чтобы сделать отступ сверху, добавьте в стили свойство margin-top, например так:

<div style="margin-top: 20px; height: 30px; background: url(http://mnogoblog.ru/wp-content/uploads/2014/12/girlanda.gif) repeat-x 100%;"></div>

Или же данную гирлянду можно подключить с помощью wordpress плагина, вот по данной ссылке можете его скачать — Скачать плагин «Новогодняя гирлянда»!

2. Вставляем симпатичную gif картинку в нижней части сайта.

Давайте прикрепим следующую картинку:

украшаем сайт к новому году

Для этого также как и в пункте 1 данной статьи — входим в админку wordpress, в левом меню выбираем пункт «Внешний вид», подпункт «Редактор», в списке шаблонов выбираем файл header.php и вставляем после тега «body» следующий код блока с данной картинкой:

<div style="position:fixed;left:0;bottom:-4px;;">
<img src="http://mnogoblog.ru/wp-content/uploads/2014/12/newyeargif.png"> 
</div>

В итоге картинка прикрепиться в нижнем левом углу сайта:

новогодние картинки

Если картинка вам кажется слишком большой (размер оригинала 460*180), то с помощью свойств width и height можно ее уменьшить, например так:

<div style="position:fixed;left:0;bottom:-4px;;">
<img src="http://mnogoblog.ru/wp-content/uploads/2014/12/newyeargif.png" width="307" height="120"> 
</div>

3. Давайте рассмотрим еще одну gif картинку-анимацию-гирлянду по бокам сайта:

Гирлянда состоит из gif картинок-анимаций:

girlanda01

Для начала пропишем в файле стилей следующий CSS код, а для этого войдем в админку wordpress, в левом меню выбираем пункт «Внешний вид», его подпункт «Редактор», в списке шаблонов откроется файл style.css — в самый низ его кода вставим следующий фрагмент:

#ramka {
background: url('http://mnogoblog.ru/wp-content/uploads/2014/12/girlanda0.gif') repeat-y 0% 0px, url('http://mnogoblog.ru/wp-content/uploads/2014/12/girlanda01.gif') repeat-y 100% 0px; padding:0px 8px;
} 

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

<div id="ramka">
...
</div>

Можно обернуть блоком «ramka» любой блок вашего сайта, например wrapper, page и т.д.
Возьмем для примера стандартную тему wordpress — twenty Twelve и обернем в ней блок «page» блоком «ramka» — для этого заходим в админку wordpress, в левом меню выбираем пункт «Внешний вид», его подпункт «Редактор», в списке шаблонов открываем файл header.php и находим блок page и перед ним открываем блок «ramka»:

girlanda5

А в файле footer.php добавим закрывающий тег блока:

girlanda6

В итоге будет выглядеть так:

girlanda4

Введите свой email адрес для того, чтобы подписаться на мой блог:


knopkisoc

Новогодние gif (гирлянда, картинки) для сайта: 2 комментария

  1. Оксана

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>