Как украсить сайт к новому году? Бесплатная акция + Кроссворд №2!

Привет всем! Вчера я украсил свой блог Новогодней атрибутикой:-) Как вам? Нормально получилось? Если вы ещё не подготовили свой сайт (блог) к Новому году или не знаете как это сделать, думаю моя статья вам в этом очень поможет…

украсить сайт, украсить блог, как украсить сайт к новому году, к празднику, к 8 марта, к 9 мая

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

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

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

Многие уже в первых числах декабря разукрасили свои блоги новогодней атрибутикой. Я немного опоздал с этим, но думаю – это не страшно. Можно и 30 декабря украсить сайт и ничего плохого в этом не будет. Тем более, что как и ёлку, новогодние украшения можно не убирать с сайта вплоть до 15 числа.

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

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

Как украсить свой сайт к новому году при помощи специальных сервисов?

Дам вам адресок одного такого сервиса, при помощи которого я хотел реализовать новогоднюю задумку. Но я уверен, что таких сервисов в сети масса. Поиском к счастью умеют пользоваться все. Вот он makeuptor.com  Сервис иностранный, но я думаю вы знаете как всё перевести с помощью браузера.

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

мейкап-сервис

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

Куда вставлять полученный код?

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

мейкап-сервис2

Если всё пройдёт нормально, на вашем сайте должна появиться тёмная панель от сервиса. Далее нужно нажать на Image Library и перейти к выбору картинок.

мейкап-сервис3

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

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

Украшаем сайт к новому году при помощи новогодних плагинов

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

Выкладываю список этих новогодних плагинов:

  • Happy Christmas – добавляет на ваш блог новогодние рисунки и мелодии
  • Snow, balloons and more – снег, шары и многое другое
  • iCaughtSanta ( Falling Snow ), Snow Storm, Let It Snow, WpMooSnow – просто снег на блоге
  • WP-Effects – тоже снег на блоге, но можно запустить и не только его, но и листья, дождь осенью и всё что хотите. Падающие самолёты напримерКатаюсь по полу от смеха
  • ChristmasSprite — Christmas CountDown, Christmas Countdown – эти 2 плагина отсчитывают время до начала Нового Года
  • WP-Christmas – отображает на сайте отгибающийся уголок, за которым можно спрятать любых новогодних персонажей

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

Как я создал новогоднее настроение у себя на блоге?

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

Сначала я отображение картинок проверял на Денвере естественно и когда всё сделал, перенёс весь код на реальный хостинг.

Для работы нам понадобятся 2 файла от темы и картинки, желательно на прозрачном фоне (как правило это формат png или gif):

header.php – туда мы пропишем классы наших изображений

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

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

Итак, открываем header.php и ищем открывающий тег <body>. Он идёт сразу после закрывающего тега </head>

Не знаю как у вас, а меня после <body> идёт строчка

<div id="header">

, то есть начинается блок с шапкой. Вот как раз под этой строчкой пропишите вот это:

<div class="pes"></div>

, где pes – это идентификатор картинки. Придумайте любой такой идентификатор, без разницы, но только на английском языке (раскладке). Просто у меня изображение шагающего пса с мешком подарков, поэтому я так и обозначил. Если вы хотите расположить деда мороза, напишите moroz или ded, если новогоднюю ёлку – elka. Понятно это?

Сколько будет изображений у вас в шапке, столько и классов. У меня допустим 3 картинки, поэтому получилось вот так:

<body <?php body_class(); ?>>
 <div id="header">
 <div class="pes"></div>            - пёс
 <div class="nadpis"></div>     - надпись С НАСТУПАЮЩИМ
 <div class="shapka"></div>    - новогодняя шапочка

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

Тут ищем строчку с надписью header. У меня 100% валидный, оптимизированный код шаблона от Гудвина, поэтому файлы шаблона упрощены до безобразия, для ускоренной загрузки моего блога браузером. Кстати и вам я советую приобрести платную тему для своего блога у этого специалиста. Очень мне нравиться работать с ним, так как после покупки его авторской темы вы будете получать постоянную техподдержку от него, если возникнут какие-то проблемы с настройкой темы. Немного отвлёкся…

Итак, нашли строчку с header и прописываем под ней вот такой код.

/*шапка*/
 #header{width:960px;height:60px;margin:0px auto 0;padding:40px 0 0 0; position:relative}

.pes {background:url('http://dengi-iz-ineta.ru/wp-content/uploads/2012/12/pes.gif') 0 0 no-repeat; width:103px; height:150px; position:absolute; top:-5px; right:395px; z-index:100}

Где:

.pes – ваш идентификатор картинки

http://dengi-iz-ineta.ru/wp-content/uploads/2012/12/pes.gif – ссылка на картинку

width: – ширина картинки

height – высота картинки

top – отступ сверху

right – отступ справа

Может быть у кого-то в файле style.css всё выглядит иначе, например вот так:

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

Тут главное прописать правильно ссылку и настроить правильно позиционирование, а это – указать реальные размеры картинки и дальше “поиграться” со стилями, чтобы расположить картинку в том месте, где вы хотите. Если ваш элемент не двигается — не меняет своего местоположения, чистите кэш браузера после каждой манипуляции. Так было у меня в этом году, когда я перешёл на Яндекс.Браузер.

Остальное остаётся как есть. Советую все эти манипуляции совершать сначала на Денвере, а после окончательной настройки, перенести код на реальный ваш хостинг (сайт, блог).

Если вы после всего вышесказанного не поняли как украсить свой сайт к новогодним праздникам – смотрите моё видео.

Бесплатная акция на блоге!!!

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

Кроссворд №2

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

А победителем предыдущего кроссворда стал Алексей Елфимов. К сожалению ссылки на свой сайт он мне не предоставил. Он первым разгадал и прислал кодовое слово «сайтостроение». Случайного счастливчика я не выбирал, так как участвовали в разгадывании моего первого кроссворда пока 2 человека. Первый блин комом как говориться 🙁 Но надеюсь, что в будущем мои кроссворды будут разгадывать и зарабатывать денежку большее количество участников…

Ну, поехали!!!

 

Начать разгадывать кроссворд

 

Кодовое слово присылайте через кнопку «Контакты»

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

С уважением, Алекс Fomik…


Понравилась статья - поделись с друзьями!



Просмотр

Подпишитесь на обновления блога по почте :

Количество читателей блога


К записи "Как украсить сайт к новому году? Бесплатная акция + Кроссворд №2!" 20 комментариев Самый активный комментатор в конце месяца получает денежный приз.

  1. Galina:

    Алекс, большое тебе человеческое СПАСИБО! Разумеется мне понравился способ украшательства путем внедрения в тему сайта. Лишний раз поучиться работать с кодами очень даже полезно. Свой сайт пока не украшала, но собираюсь это сделать. А у тебя классный шагающий пес! И папаха тоже к месту.

    [Ответить]

    Алекс Fomik Reply:

    Галя, а за что такое большое спасибо ??? Я ведь только пост написал и всё))) Кстати хочу у тебя спросить. У тебя фидбёрнер работает? У меня уже 2 фида не прислал. Я слышал там у них какие-то проблемы…

    [Ответить]

  2. Григорий:

    Спасибо, вечером попробую.

    [Ответить]

    Алекс Fomik Reply:

    Обязательно нарядитесь))) У вас фидбёрнер работает? У меня перестал присылать мои фиды(((

    [Ответить]

  3. Юлия:

    Некоторые плагины настолько старые, что кроме сбоя в работе сайта больше ничего не происходит…

    [Ответить]

    Алекс Fomik Reply:

    А я и не рекомендую ими пользоваться Юля. Плагины тормозят загрузку (скорость) сайта. Лучше самому прописывать картинки в шапку…

    [Ответить]

  4. Анна:

    Шагающий пес с подарками здорово украсил сайт! Надо как-нибудь уделить время праздничной атрибутике.
    P.S. Кодовое слово кроссворда через форму обратной связи отправить не удалось, поэтому сбросила на почту.
    Спасибо за интересное развлечение и полезные статьи!

    [Ответить]

    Алекс Fomik Reply:

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

    [Ответить]

    Анна Reply:

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

    [Ответить]

  5. Ирина:

    Алекс, отлично украсили сайт и толково рассказали. Но мне у вас понравилась другая вещица — это размещение подарков. Хорошо работает? Есть ли у вас статья на эту тему?

    [Ответить]

    Алекс Fomik Reply:

    Спасибо Ирина. Подарки — это работа плагина Раздвижные панели для ВордПресс. Статьи про него пока нет. Я владею правами перепродажи на него и вскоре начну продавать. Осталось настроить сервис оплаты…
    Работает очень эффективно в плане сбора подписной базы… Бывало до 10 человек в сутки подписывал и это ещё не всеми подарками. Ещё сверху и снизу можно настроить + модальное окно…

    [Ответить]

  6. Денис:

    Разгадал кроссворд! Статья про украшения для сайта отличная!!!

    [Ответить]

  7. Евгений:

    Спасибо за статью. Кстати при помощи этого сервиса уже украсил два сайта …

    [Ответить]

    Алекс Fomik Reply:

    На здоровья Евгений) Мне на этот времени не хватает)))

    [Ответить]

  8. Денис:

    А новый кроссворд сегодня будет?

    [Ответить]

    Алекс Fomik Reply:

    Да Денис, он уже опубликован…)))

    [Ответить]

  9. Эмма:

    Алексей, здравствуйте! Поздравляю Вас и Ваших родных и близких с наступающим Новым Годом!!! Всяческих успехов, достижений, удач и побед!!!

    [Ответить]

    Алекс Fomik Reply:

    Спасибо Эмма! И вам всего самого наилучшего)))

    [Ответить]

  10. Мозгунова Ирина:

    Как удачно, что мне довелось прочитать Вашу статью как раз перед наступлением Нового года, 1.5 месяца всего то и осталось.
    Вот уж украшу, так украшу (тут, конечно, главное не переборщить)!
    Зато потренируюсь!

    [Ответить]

    Алекс Fomik Reply:

    Это точно про не переборщить)))

    [Ответить]

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