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

Главная » Верстка » Как украсить блог к новому году
Самолетная 614022 Россия, Пермь +79630195620
Верстка
дизайн, новичкам, примочкм
1073

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

Добавляем гирлянду в шапку сайта.

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

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

После того как картинка найдена, ее необходимо подготовить к публикации. Идеальный вариант, если это png файл, с прозрачным фоном, если же фон имеется, то придется воспользоваться фотошопом, и удалить его. Надеюсь, как пользоваться фотошопом вы знаете. Мне пришлось удалять фон.

Технические моменты.

И так переходим непосредственно к украшательству. Открываем файл нашей темы под названием header.php и после открывающегося тега body вставляем div контейнер. У меня это контейнер с классом — newyear

В папку images, image, img — в общем как она у вас называется, в вашем шаблоне, кладем наш обработанный рисунок.

Пример моей гирлянды

Пример моей гирлянды

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

Тем самым мы привязываем к контейнеру картинку. И вуаля, радуемся новогодней гирлянде.

Добавление падающего снега на сайт или блог.

Со снегом история намного интереснее, если вы наберете в поисковике запрос — скрипт падающего снега на сайт, вам вылезет огромное количество ресурсов, с разного рода скриптами. Я перепробовал, наверное, штук 20 разных видов скриптов. Но к сожалению не все они подошли.

Основным требованием было — подключение js скрипта в подвале сайта. В результате больше половины сразу отпало, так как преставали работать. А разбираться в причинах не хотелось, поэтому искался универсальный скрипт. И он был найден. Так что делюсь с вами!

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

Технические моменты.

Первым делом вам необходимо подключить библиотеку jquery для своего блога, если она еще по каким-то причинам у вас отсутствует, поэтому открываем файл header.php

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

После чего добавляем в файл шапки еще вот этот код.

Он отвечает за запуск наших снежинок.

Ну и у скрипта имеется несколько настроек.

minSize — минимальный размер снежинки

maxSize — максимальный размер снежинки

newOn — Скорость появления снежинок (можно устроить снегопад)

flakeColor — цвет снежинок (так как у меня фон белый, пришлось снежинки покрасить в слегка голубой цвет)

Все эти параметры вы можете прописать в шапке, при вызове снежинок.

Вот собственно и все манипуляции, которые были сделаны для придания новогоднего настроения на моем блоге.

Черкни и ты пару строк

Возможно, у вас есть какие-нибудь идеи как еще можно украсить сайт или блог, то делитесь ими в комментариях.

Подписка на блог MASALKIN.NAME
Не упусти шанс получить отличные бонусы!

100% конфидециальность, адреса электронной почты не разглашаются и не предоставляются третьим лицам для коммерческого или некоммерческого использования.

Благодарность читателям

Спасибо что прочли эту статью до конца, надеюсь та информация что была изучена вами, оказалась для вас полезной. Если в ходе изучения возникли вопросы, то смело задавайте их в комментариях, я обязательно на них отвечу!

P.S. Не забудь подписаться на блог, тебя ждет много интересного и полезного!

Удачи!

  • Доброе утро, Андрей. Я здесь новенькая, на ваш сайт случайно забралась и увидела эту статью.

    Буквально на днях задавалась вопросом, как украсить блог и сделала это. Теперь у меня снежинки летают благодаря плагину одному.

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

    А знаете ли вы как сделать звенящую гирлянду с шариками?

    • Масалкин Андрей

      Евгения, доброе утро!

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

      На счет гирлянды с шариками, она делается за счет флешки. Где-то недавно встречал ее, хотел сделать, но забыл адрес сайта у кого видел. А так можно позаимствовать.:)

      • Пожалуйста :) и вам спасибо!

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

  • Я уже тоже свой блог украсил. Снег сделал плагином Let It Snow!

  • Андрей, а ты не участвовал в конкурсе Борисова по украшению блога к новому году?

    Я себе снегопад замутил на фоне нехитрым действием: нашел в свободном доступе интернета анимашку снежинок и размножил ее по горионтали и вертикали как background тега body (идея твоим читателям на заметку). Получилось и не увесисто, анимашка весит очень мало, и достаточно интересно

    • Масалкин Андрей

      Честно, за Борисовым не слежу и на его блоге не бываю. Участвовал в этом году в его конкурсе молодого блога, ради того, чтобы подтвердить свои догадки. Что в принципе и случилось:)

x

Ваше имя (обязательно)

Ваш e-mail (обязательно)

Сообщение