Главная » Украшение » Скрипт гирлянды на Блоггер

Скрипт гирлянды на Блоггер

Близится Новый год и по традиции мы все украшаем свои дома и квартиры: устанавливаем ёлки, развешиваем мишуру, клеем на окна снежинки. Так же и в интернете все владельцы сайтов и блогов спешат прикрепить гирлянды, запустить на страницы снежинки и снег, установить картинки ёлочек, Дедов Морозов и Снегурочек. Вот и сегодня я предлагаю вам посмотреть на ещё одно украшение — гирлянду. Увидела её на сайте https://atuin.ru/.

На блоге ИШ есть много статей про новогодние атрибуты, которые вам помогут украсить сайт. Читайте:

Гирлянда для Blogger на CSS

Декор для Нового года на Blogger - гирлянды

Новогодние гирлянды

Снежинки CSS на сайт

Скрипты для украшения блога на Блоггер

Код гирлянды

<div class="gir_1" id="gir"></div>
<style>#gir {
    position: absolute;
    top: 0;
    left: 0;
    background-image:url('адрес картинки');
    height: 62px;
    width: 100%;
    overflow: hidden;
    z-index: 1;
    pointer-events: none
}  
.gir_1 {
    background-position: 0 0
}  
.gir_2 {
    background-position: 0 -62px
}  
.gir_3 {
    background-position: 0 -124px
}</style>
<script>function gir() {
    let nums = document.getElementById('gir').className; 
    if(nums == 'gir_1') {document.getElementById('gir').className='gir_2';}  
    if(nums == 'gir_2') {document.getElementById('gir').className='gir_3';}  
    if(nums == 'gir_3') {document.getElementById('gir').className='gir_1';} 
}  
setInterval(gir, 500);    </script>

А выглядит гирлянда так:

В живую посмотреть на мигающие огоньки можно на тестовом блоге.

Гирлянду устанавливаем в шаблон блога: Тема — Изменить XTML, ставить код нужно выше тега </body>.

В коде не забудьте поставить адрес картинки, выделила красным. Вот и сама картинка:

Как на Блоггере взять адрес картинки знают все, но напомню:

1) Картинку скачайте и установите у себя на блоге в любом сообщении (статье).

Перейдите в редакторе сообщений в режим HTML, скопируйте адрес изображения (он довольно длинный), копируем от кавычек до кавычек, теперь картинку из сообщения можно удалить.

Ваши комментарии:

Комментарии со спамом удаляются.