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

С наступающими праздниками всех вас дорогие друзья. Итак, на носу Новый Год, Рождество Христово и другие замечательные зимние праздники. Пора украшать и приводить в порядок все свои имения.)

В сегодняшней статье я покажу, как украсить свой сайт (блог):

1. Красивой, фоновой, новогодней картинкой, 
2. Хихикающим Дедом Морозом, 
3. Гирляндой с анимацией 
4. Простой картинкой png. 

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

В панели управления нужно перейти в раздел Шаблон - Изменить HTML ищем код ]]> и перед ним устанавливаем следующий код:

CSSbody {
background: url(/1.bp.blogspot.com/-kiIJhQIJjFI/XeoO6yO4dcI/AAAAAAAAnHs/u4LSU4Q29isBRkEE6nrOeoRCzZJ53LSbgCLcBGAsYHQ/s1600/Fon-2016-2-01-1%2B%25281%252921.jpg)
no-repeat top fixed;
}

Если полотно вашего сайта (блога) имеет ширину не более 1100px тогда все нормально можете сохранять шаблон. Но если полотно намного больше, в таком случае картинка будет прятаться за ним. В любом случае сохраняйте шаблон и проверяйте результат. Если картинка все же прячется добавьте к основному коду следующее значение:

CSSbackground-size: 100%;

В итоге наш код должен выглядеть следующим образом:

CSSbody {
background: url(/1.bp.blogspot.com/-kiIJhQIJjFI/XeoO6yO4dcI/AAAAAAAAnHs/u4LSU4Q29isBRkEE6nrOeoRCzZJ53LSbgCLcBGAsYHQ/s1600/Fon-2016-2-01-1%2B%25281%252921.jpg)
no-repeat top fixed ;
background-size: 100%;
}

Теперь сохраните шаблон и посмотрите где находиться картинка на сей раз. Если она слишком далеко от полотна вместо 100% напишите 80 или 90%, в общем подбирайте процент пока картинка не сядет в нужном месте.

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

CSS анимация Дед Мороз - Санта Клаус

Для установки скачайте файл с кодами. CSS код добавьте в редактор стилей своего сайта, HTML код установите в том месте, должен отображаться Санта. Название Merry Christmas можете сменить на свое в HTML.

Если после установки ваш Санта получился без глаз и бороды тогда добавьте следующий CSS;

CSS.beard:before {
    content: " ";
    width: 80px;
    height: 80px;
    background: #f8e7dc;
    border-radius: 50%;
    position: absolute;
    bottom: 15px;
}
.beard:after {
    content: " ";
    width: 80px;
    height: 80px;
    background: #f8e7dc;
    border-radius: 50%;
    position: absolute;
    bottom: 15px;
}
.eyes:before {
    content: " ";
    position: absolute;
    width: 15px;
    height: 9px;
    top: 0;
    border: 5px solid #a8744f;
    border-width: 0;
    border-top-width: 5px;
    border-radius: 50%;
}
.eyes:after {
    content: " ";
    position: absolute;
    width: 15px;
    height: 9px;
    top: 0;
    border: 5px solid #a8744f;
    border-width: 0;
    border-top-width: 5px;
    border-radius: 50%;
}
.body:before {
    content: " ";
    width: 7px;
    height: 7px;
    background: #f7be10;
    border-radius: 50%;
    position: absolute;
    top: 35%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    box-shadow: 0px -18px 0px #f7be10, 0px 18px 0px #f7be10;
}

Переходим к просмотру видео:

Украсить сайт с помощью картинки PNG

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

HTML/lh6.googleusercontent.com/proxy/cMrNpdkBnGP7T96z9MhYfIww1FUus2YlBJ-gEX7tNtbX38tJDakfObCtiCaPfPtB6ztNBMZC265UviDjQX8R4YLrdLA6w9C1wGckPOSOyfJ7ud6OuD39SR3-YVf5lJf2z3mToLCmmjA=s0-d.png" width="570" height="304" style="" alt="Картинки по запросу happy new year png">

Большое количество праздничных картинок вы сможете найти в Гугл. Для этого пропишите в поиске запрос "Новогодние картинки png" и перейдите в раздел Картинки. Скопируйте ссылку на понравившеюся картинку и вставьте ее в HTML код вместо ссылки выделенной красным цветом. Важно!!! Ссылка картинки обязательно должна заканчиваться тремя буквами: png, jpg в этом случае нам не подходит.

Так же можете подправить ширину и высоту картинки в параметрах width и height.

Гирлянда с елью и анимированными игрушками 

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

Для установки используйте следующие HTML кода:

1. Javascript  - Добавьте перед закрывающим тегом