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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• 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…

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

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

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