Новогоднее украшение блога — снеговик и сугробы внизу экрана

Украсить сайт к новому году быстроВот уже наступил декабрь месяц. Очень скоро самый любимый праздник большинства Новый Год. Страна наряжается. Повсюду устанавливаются елки, развешиваются праздничные гирлянды. В воздухе витает предвкушение скорого торжества. Так же можно украсить сайт к Новому Году, чтобы создать у своих посетителей ощущение праздника. Сегодня мы добавим на сайт сугробы и симпатичного снеговичка. Про украшение сайта новогодней гирляндой я уже писал на своем блоге. Гирлянда выглядит очень симпатично и мелодично звучит при наведении мышки на шары. К исходному варианту были добавлены синие шары. В итоге в моем варианте гирлянды присутствуют три цвета шаров: белый, красный и синий. И самое главное, эта гирлянда не мешает просматривать ваш сайт, создавая праздничное настроение.
На этот раз мы добавим в нижнюю часть сайта снеговика и снежные сугробы. Если к этому еще добавить падающий снег, то получится логичная картинка.

Интересно:  Какой коммуникатор выбрать. Часть 2: выбор производителя

Как украсить сайт к новому году

Чтобы сделать задуманное, сначала скачайте две картинки снега и снеговика. Эти картинки нужно положить в папку images вашего шаблона.
Далее в файл шаблона footer.php перед тегом </body> вставляем следующий код

[php]<span class=»snowman»></span>
<span class=»snow-layer»></span>[/php]

Необходимо добавить стили в файл шаблона style.css (возможно у вас он называется по другому, но расширение будет .css или в некоторых шаблонах в настройках есть возможность добавления пользовательских стилей)

[css].snowman {
background: transparent url(«images/snowman.png») no-repeat scroll right top / 80px auto;
bottom: 0;
display: block;
height: 110px;
position: fixed;
right: 2%;
width: 100px;
z-index: 3;
}
.snow-layer {
background: transparent url(«images/snow-layer.png») repeat-x scroll center top / auto 20px;
bottom: 0;
display: block;
height: 20px;
position: fixed;
width: 100%;
z-index: 1;
}
@media screen and (max-width: 1024px){
.snowman, .snow-layer {display: none;}
}[/css]

Интересно:  2 года хостинга бесплатно

В коде предусмотрено скрытие снеговика при просмотре на смартфонах. Так же можете поместить снеговика с левой стороны, заменив

[css].snowman {
background: transparent url(«images/snowman.png») no-repeat scroll right top / 80px auto;
bottom: 0;
display: block;
height: 110px;
position: fixed;
right: 2%;
width: 100px;
z-index: 3;
}[/css]

на

[css].snowman {
background: transparent url(«images/snowman.png») no-repeat scroll left top / 80px auto;
transform: scale(-1, 1);
bottom: 0;
display: block;
height: 110px;
position: fixed;
right: 2%;
width: 100px;
z-index: 3;
}[/css]

Вот в принципе и все. Вы смогли украсить сайт к Новому Году. Счастья и удачи вам в новом году!

Очередной шедевр от Enjoykin чисто отдохнуть

Статья помогла? Поблагодари автора, он ведь старался

Интересно:  Если на флешке вместо папок появились ярлыки

С уважением Денис Иванов, автор блога dendrblog.ru

Оцените статью
Добавить комментарий

Нажимая на кнопку "Отправить комментарий", я даю согласие на обработку персональных данных и принимаю политику конфиденциальности.

  1. Татьяна

    Праздничное настроение своими руками smile Кому елку, кому шарики, для кого-то и снежинки в радость

    Ответить
    1. Денис Иванов автор

      Главное не переборщить. smile Видел тут на одном сайте гирлянду с моргающими лампочками. Так убого выглядит. Плюс постоянно моргает. Бррр.

      Ответить
  2. Максим Бойко

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

    Т.е. таким приёмчиком — украшенным сайтом, некоторые получали постоянных читателей)

    Ответить
    1. Денис Иванов автор

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

      Ответить
  3. Сергей Петров

    Я очень люблю всякие подобные украшения для сайта. Один минус — они часто сильно его грузят. Раньше у меня было несколько сайтов по различным тематикам. К новому году мы всегда их украшали: всякими «дедморозовскими» шапками, елочками и падающими снежинками.

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

    Ответить
    1. Денис Иванов автор

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

      Ответить
      1. Виталий

        Ранее, когда я шаблоны менял «как перчатки» (это было в первые 4-6 лет моего блогерства), под Новый год тоже использовал отдельный, праздничный, дизайн шаблона (есть и среди бесплатных довольно неплохие). Притом на 2-3 недельки особенно ничем мои захудалые бложики не рисковали.
        Сейчас же, когда полюбившийся дизайн не меняю уже 3 года, на НГ его менять рисковать не буду. ;-)

        Ответить
        1. Денис Иванов автор

          На его основе можно тоже новогодний сделать. Фрилансеры быстро переделают.

          Ответить
  4. Ольга mescher410

    Как-то было дело — украшала свои сайты. Но потом решила больше времени не тратить на это. Да и знакомая сказала, что «прокололась» на работе: зашла на мой сайт, а там гирлянда с песней «Джингер белл»)))
    Теперь просто буду поздравлять постом с пожеланиями и планами на следующий год. Вот как-то так…

    Ответить
  5. Денис Иванов автор

    Так звук можно и не ставить. Да и не всем, например, нравится та же джингер. smile.

    Ответить
  6. Виталий

    А что? Гулять — так гулять! smile
    Принимаю данную статью как призыв к действию. За технические рекомендации — большое спасибо! Что-то обязательно использую и в своих блогах.
    «Перебарщивать» не буду. Посмотрю, что и как гармонирует с моим шаблоном.

    Ответить
    1. Денис Иванов автор

      Гирлянду, снег и снеговика уже второй год вешаю. Всякие мигающие лампочки лично меня раздражают. Пару плагинов пробовал — такая фигня.

      Ответить
  7. NI4KA

    А все эти новогодние украшения не перегружают сайт? И насколько корректно это выглядит на мобильных устройствах? Я подписана на блог о красоте и здоровье, его автор меняет дизайн каждый сезон. Отрисовано четыре дизайна по временам года, смотрится очень мило и каждый раз интересно смотреть, что изменилось с приходом зимы или весны.

    Ответить
    1. Денис Иванов автор

      Эти не грузят. Вот гирлянда возможно. Так как там скрипты подгружаются.
      Отдельный вариант шаблона для каждого времени года по любому лучше и интереснее.

      Ответить
  8. Рита Молчанова

    Здорово, спасибо! Люблю Новый Год! И поэтому все украшаю,что только возможно, к этому самому лучшему празднику. Я обычно ставлю гирлянду на блог. Но в этом году, что-либо не хочу. А хочется чего-то новенького. Спасибо, воспользуюсь вашим уроком.

    Ответить
    1. Денис Иванов автор

      Новый год любимый праздник с детства. Лично для меня даже лучше дня рождения. smile

      Ответить
  9. Максад Исаев

    Я раньше, тоже особо не беспокоился в этом направлении, но наверное «Ностальджи настигло!». Хочется праздника! Здесь в Швеции, как и везде за кордоном, отмечают только Рождество! И никаких утренников или корпоративов! Так что я считаю, что можно и нагрузить немного сайт, всего то недели на две!

    Ответить
    1. Денис Иванов автор

      Как же они там без корпоративов то? Скукотища же. smile

      Ответить
  10. Kanapiya.ru

    Да можно украшать, блог, сайт и т.д , но как и говорилось выше если грузит сайт, то не стал бы это делать. И это при каком условии набора клавиатуры, исходить звук?

    Ответить