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

Опубликовано в Веб-дизайн
/
8 Дек 2013

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

Украшаем сайт

Расположение

Всегда перед тем как поставить что-то на свой сайт подумайте, не будет ли оно отвлекать ваших пользователей от их главной задачи, поиска информации. Ведь каким бы красивым не был бы ваш сайт, посетитель приходит в первую очередь за информацией, содержащейся на нём. По этому старайтесь располагать свои праздничные «плюшки» так, чтобы радовать глаз пользователю. Поверьте, не будет ли ваше украшение перекрывать важные ссылки или другие полезные элементы сайта, если вы будите использовать всплывающие окна, то старайтесь показывать только при первом входе на сайт. В том случае, когда вы устанавливаете скрипт падающего снега, следите за количеством одновременно падающих снежинок, большое их число будет сильно мешать прочтению ваших статей и в следствии увеличится процент отказов.

Расположение

Если всё-же новогоднее украшение перекрывает важные ссылки, но вы не хотите его убирать, можете поступить как в моем случае. После того как я установил новогоднюю гирлянду на свой сайт, она перекрыла блок с ссылками на страницы. После этого я просто перенёс эти ссылки в слайд бар, хоть это и менее видное место, но всё лучше чем ничего.

Украшаем сайт

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

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

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

Украшающие элементы

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

Ёлочные игрушки

новый год

И так, первой в списке гирлянд будет та, что стоит у меня на сайте. Данная гирлянда представляет собой ёлочные ветки с новогодними шарами, которые располагаются в шапке сайта. При наведении на эти шарики курсора мыши, они начинают качаться и при этом издавать приятный звук колокольчиков.

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

<script type="mce-text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><script type="mce-text/javascript" src="swfobject.min.js"></script>
<script type="mce-text/javascript" src="newyear.js"></script>

После этого опускаемся ниже и после тега </body> вставляем код из этого файла. Теперь нужно подключить CSS, для этого в файл header.php нужно добавить следующую строчку:

 	<link href="style.css" rel="stylesheet" />

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

Простая гирлянда

Теперь я расскажу вам о установке простейшей гирлянды на свой сайт. Спасибо за неё amplay.ru. Для этого нужно всего лишь добавить код ниже в шапку вашего сайта и на нём появится гирлянда, которая будет переливаться разными цветами. Вот собственно и код: 

 
<style type="text/css"><!--
#garland {position:absolute;top:0;left:0;background-image:url('<span style="color: #ff0000;" data-mce-style="color: #ff0000;">http://amplay.ru/wp-content/uploads/2013/12/1355340029_christmas-lights.png</span>');height:36px;width:100%;overflow:hidden;z-index:99}
#nums_1 {padding:100px}
.garland_1 {background-position: 0 0}
.garland_2 {background-position: 0 -36px}
.garland_3 {background-position: 0 -72px}
.garland_4 {background-position: 0 -108px}
--></style>
  

<div class="garland_4" id="garland">

<div id="nums_1">1</div>

&nbsp;
</div>

<script type="mce-text/javascript">// <![CDATA[
function garland() { nums = document.getElementById('nums_1').innerHTML if(nums == 1) {document.getElementById('garland').className='garland_1';document. getElementById ('nums_1').innerHTML='2'} if(nums == 2) {document.getElementById('garland').className='garland_2';document. getElementById ('nums_1').innerHTML='3'} if(nums == 3) {document.getElementById('garland').className='garland_3';document. getElementById ('nums_1').innerHTML='4'} if(nums == 4) {document.getElementById('garland').className='garland_4';document. getElementById ('nums_1').innerHTML='1'} } setInterval(function(){garland()}, 600)
// ]]></script>

Xmas Lights

гирлянда

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

Snow Storm

Snow Storm

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

Christmas Countdown

Christmas Countdown

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

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

Поздравляющие элементы

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

 

Christmas Message 

Christmas Message

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

Holiday Message

Holiday Message

Плагин, который показывает красивое поздравительное сообщение с возможностью обратного отсчёта до нового года. Его основное отличие от Christmas Message, это возможность настройки положения всплывающей «Открытки» . Благодаря этому данный плагин меньше отвлекает пользователей от основного контента блога.

WP-Christmas

WP-Christmas

Этот плагин покажет вашим посетителям двух снеговиков, которые под музыку укутываются шарфиком и поздравляют вас с любимым всеми праздником.

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

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

  • Спасибо! «Ёлочные игрушки» взял на вооружение.

    • Пожалуйста! Рад что вам пригодилось. 🙂

  • Классно написано и спасибо за ссылку:)

  • Я там статейку написал:»Как выйти из под АГС за 22 дня + получить PR в подарок?». Будет интересно, заходи!

    • Спасибо, пойду читать!

  • Привет! А где ты откопал такой интересный шаблон? Или это твои доработки?

    • Одновременно и да и нет. Скачал более менее подходящий шаблон и как следует переделал его под себя.

  • Привет! Хотел установить елочные игрушки, но почему-то не установилось( может что не делаю не так?

    • Зашел на ваш сайт, проблема скорей всего в неправильном подключении javascript.

  • А скрипт подключат как написано в статье в футере перед закрывающим тегом боди?

    • Самое интересное, что при подключении точно также, как тут описано, у меня тоже ничего не заработало. Пришлось делать поправки.

    • Наверно у вех шаблоны разные, по этому данное решение не всегда работает. К примеру, я подключал именно так, как описано выше и всё прекрасно заработало. (Только в футере пустое место появилось). 🙂

  • Я с этим особо не парился. Добавил в сайдбар виджет с ёлкой и усё 🙂 И так все красиво у меня на блоге.

    • Красиво, когда циферке на счётчике, как у Александра Борисова… а так.. это слишком самонадеянное заявление 😉

    • Да, такие цифры красивее всех ёлок и гирлянд вместе взятых. 🙂

  • Да и Борисов этой фигней не знимается в отличие от нас 😀

  • Подскажите, пожалуйста, а как сделать отображение гирлянды на всех страницах вордпресс сайта?

    • Сам мучаюсь, как узнаю в чём дело, напишу.

    • Элементарно… пропишите до всех скриптов не относительный, полный адрес.

    • Спасибо, не думал что всё окажется так просто. 🙂

  • Добавил путь таким образом: src=»http://xclinica.ru/swfobject.min.js»
    и не работает((

    • Там в трёх местах, если не ошибаюсь, надо путь прописывать.
      А что именно у вас не работает?
      Вы хоть свой сайт показали…

  • Указал так:

    Снежок работает, а гирлянда только на главной висит.

  • Спасибо.. исправил. указал полный путь к папке balls

  • Хочу вставить гирлянду на сайт. Прочла у вас:Для установки этого скрипта, вам нужно скачать и распаковать в корень сайта вот этот архив, теперь нужно открыть файл footer.php и перед закрывающимся тегом вставить следующий код:
    Ничего не понимаю:где открывается файл footer.php ?

    • Скорее всего, сайт на который вы хотите установить гирлянду располагается на хостинге uCoz, данное решение по большей части предназначено для «независимых» сайтов под управлением WordPress.
      На теории подобное украшение должно подойти к любому сайту, нужно просто понять структуру построения вашего шаблона и добавить код в то место, которое будет наиболее оптимальным для вашего сайта.

      P. S. Проверьте сайт на вирусы, а то браузер его блокирует со словами «Эта страница содержит контент с сайта, который был замечен в распространении вредоносного ПО.»

    • Хотите, давайте я вам помогу с установкой? Все бесплатно:)

    • А зачем вам еще один скрипт?

      У вас и так все отлично: новогодние настроение есть, музыка, игрушки, гирлянды…

      Думаю еще один скрипт будет лишний!

  • Мадам, тут речь шла о сайте сделанном на WordPress, не никак не на юкосе.

  • Всех с Новым годом!!!
    Подскажите, пожалуйста, как установить гирлянду с шариками на WWPage. Естественно сайт на WP
    Заранее спасибо!

  • Все вроде лягло, но вот не звенят почему то. Подскажите что подправить. Да и как на пикс. 20 основу сайта лпустить а то красота закріла нужное 🙂

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