Как украсить сайт к новому году? Бесплатная акция + Кроссворд №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…
Алекс, большое тебе человеческое СПАСИБО! Разумеется мне понравился способ украшательства путем внедрения в тему сайта. Лишний раз поучиться работать с кодами очень даже полезно. Свой сайт пока не украшала, но собираюсь это сделать. А у тебя классный шагающий пес! И папаха тоже к месту.
[Ответить]
Алекс Fomik Reply:
Декабрь 18th, 2012 at 10:25 дп
Галя, а за что такое большое спасибо ??? Я ведь только пост написал и всё))) Кстати хочу у тебя спросить. У тебя фидбёрнер работает? У меня уже 2 фида не прислал. Я слышал там у них какие-то проблемы…
[Ответить]
Спасибо, вечером попробую.
[Ответить]
Алекс Fomik Reply:
Декабрь 18th, 2012 at 10:27 дп
Обязательно нарядитесь))) У вас фидбёрнер работает? У меня перестал присылать мои фиды(((
[Ответить]
Некоторые плагины настолько старые, что кроме сбоя в работе сайта больше ничего не происходит…
[Ответить]
Алекс Fomik Reply:
Декабрь 18th, 2012 at 11:05 дп
А я и не рекомендую ими пользоваться Юля. Плагины тормозят загрузку (скорость) сайта. Лучше самому прописывать картинки в шапку…
[Ответить]
Шагающий пес с подарками здорово украсил сайт! Надо как-нибудь уделить время праздничной атрибутике.
P.S. Кодовое слово кроссворда через форму обратной связи отправить не удалось, поэтому сбросила на почту.
Спасибо за интересное развлечение и полезные статьи!
[Ответить]
Алекс Fomik Reply:
Декабрь 18th, 2012 at 10:02 пп
Аня, обратная связь работает, письма все доходят. Просто видимо плагин стал конфликтовать то ли с обновлениями движка, то ли с новыми плагинами, а замену ему я пока не подыскал. Так что смело нажимайте кнопку отправить и не ждите сообщения об отправки сообщения…
[Ответить]
Анна Reply:
Декабрь 18th, 2012 at 10:14 пп
Это хорошо, учту. В следующий раз не буду долго ждать завершения процесса.
[Ответить]
Алекс, отлично украсили сайт и толково рассказали. Но мне у вас понравилась другая вещица — это размещение подарков. Хорошо работает? Есть ли у вас статья на эту тему?
[Ответить]
Алекс Fomik Reply:
Декабрь 19th, 2012 at 8:55 пп
Спасибо Ирина. Подарки — это работа плагина Раздвижные панели для ВордПресс. Статьи про него пока нет. Я владею правами перепродажи на него и вскоре начну продавать. Осталось настроить сервис оплаты…
Работает очень эффективно в плане сбора подписной базы… Бывало до 10 человек в сутки подписывал и это ещё не всеми подарками. Ещё сверху и снизу можно настроить + модальное окно…
[Ответить]
Разгадал кроссворд! Статья про украшения для сайта отличная!!!
[Ответить]
Спасибо за статью. Кстати при помощи этого сервиса уже украсил два сайта …
[Ответить]
Алекс Fomik Reply:
Декабрь 25th, 2012 at 11:34 пп
На здоровья Евгений) Мне на этот времени не хватает)))
[Ответить]
А новый кроссворд сегодня будет?
[Ответить]
Алекс Fomik Reply:
Декабрь 26th, 2012 at 1:22 дп
Да Денис, он уже опубликован…)))
[Ответить]
Алексей, здравствуйте! Поздравляю Вас и Ваших родных и близких с наступающим Новым Годом!!! Всяческих успехов, достижений, удач и побед!!!
[Ответить]
Алекс Fomik Reply:
Декабрь 30th, 2012 at 11:13 пп
Спасибо Эмма! И вам всего самого наилучшего)))
[Ответить]
Как удачно, что мне довелось прочитать Вашу статью как раз перед наступлением Нового года, 1.5 месяца всего то и осталось.
Вот уж украшу, так украшу (тут, конечно, главное не переборщить)!
Зато потренируюсь!
[Ответить]
Алекс Fomik Reply:
Ноябрь 18th, 2013 at 12:53 дп
Это точно про не переборщить)))
[Ответить]