Виджет падающих предметов для Blogger
Нашла на сайте https://spiceupyourblog.com код падающих предметов, который можно установить в праздники на блог. Менять придётся только картинки, что бы они соответствовали тематике праздника. Сверху страницы будут падать вниз снежинки или тыквы, ёлочки или сердечки, в зависимости от намечающегося торжества. Устанавливается код в Дизайн - Добавить гаджет - Javascript. Расположить его нужно под шапкой блога.
Картинки должны быть на прозрачном фоне статичные PNG или движущиеся GIF. Движущиеся смотрятся красивее. Например, переливающаяся разным цветом ёлочная игрушка, вращающаяся снежинка, мигающая тыква и так далее.
Размер картинки не более 30-35 px с каждой стороны. Подходят как квадратные картинки, так и прямоугольные.
Код гаджета
<marquee behavior='scroll' direction='down' scrollamount='5' style='position:absolute; left:130px; top:50px; height:548px;'>
<a href='BASE_URL' target='_self'><img border='0' src='ваша ссылка на картинку'/></a></marquee>
<marquee behavior='scroll' direction='down' scrollamount='3' style='position:absolute; left:177px; top:70px; height:388px;'>
<a href='BASE_URL' target='_self'><img border='0' src='ваша ссылка на картинку'/></a></marquee>
<marquee behavior='scroll' direction='down' scrollamount='5' style='position:absolute; left:225px; top:190px; height:324px;'>
<a href='BASE_URL' target='_self'><img border='0' src='ваша ссылка на картинку'/></a></marquee>
<marquee behavior='scroll' direction='down' scrollamount='5' style='position:absolute; left:265px; top:80px; height:499px;'>
<a href='BASE_URL' target='_self'><img border='0' src='ваша ссылка на картинку'/></a></marquee>
<marquee behavior='scroll' direction='down' scrollamount='5' style='position:absolute; left:325px; top:60px; height:411px;'>
<a href='BASE_URL' target='_self'><img border='0' src='ваша ссылка на картинку'/></a></marquee>
<marquee behavior='scroll' direction='down' scrollamount='5' style='position:absolute; left:239px; top:190px; height:251px;'>
<a href='BASE_URL' target='_self'><img border='0' src='ваша ссылка на картинку'/></a></marquee>
<marquee behavior='scroll' direction='down' scrollamount='1' style='position:absolute; left:141px; top:50px; height:221px;'>
<a href='BASE_URL' target='_self'><img border='0' src='ваша ссылка на картинку'/></a></marquee>
<marquee behavior='scroll' direction='down' scrollamount='7' style='position:absolute; left:289px; top:170px; height:230px;'>
<a href='BASE_URL' target='_self'><img border='0' src='ваша ссылка на картинку'/></a></marquee>
<marquee behavior='scroll' direction='down' scrollamount='5' style='position:absolute; left:108px; top:130px; height:241px;'>
<a href='BASE_URL' target='_self'><img border='0' src='ваша ссылка на картинку'/></a></marquee>
<marquee behavior='scroll' direction='down' scrollamount='2' style='position:absolute; left:370px; top:190px; height:386px;'>
<a href='BASE_URL' target='_self'><img border='0' src='ваша ссылка на картинку'/></a></marquee>
<marquee behavior='scroll' direction='down' scrollamount='2' style='position:absolute; left:394px; top:50px; height:484px;'>
<a href='BASE_URL' target='_self'><img border='0' src='ваша ссылка на картинку'/></a></marquee>
<marquee behavior='scroll' direction='down' scrollamount='2' style='position:absolute; left:430px; top:170px; height:442px;'>
<a href='BASE_URL' target='_self'><img border='0' src='ваша ссылка на картинку'/></a></marquee>
<marquee behavior='scroll' direction='down' scrollamount='3' style='position:absolute; left:475px; top:100px; height:423px;'>
<a href='BASE_URL' target='_self'><img border='0' src='ваша ссылка на картинку'/></a></marquee>
<marquee behavior='scroll' direction='down' scrollamount='6' style='position:absolute; left:559px; top:170px; height:541px;'>
<a href='BASE_URL' target='_self'><img border='0' src='ваша ссылка на картинку'/></a></marquee>
<marquee behavior='scroll' direction='down' scrollamount='2' style='position:absolute; left:580px; top:100px; height:423px;'>
<a href='BASE_URL' target='_self'><img border='0' src='ваша ссылка на картинку'/></a></marquee>
<marquee behavior='scroll' direction='down' scrollamount='5' style='position:absolute; left:533px; top:170px; height:385px;'>
<a href='BASE_URL' target='_self'><img border='0' src='ваша ссылка на картинку'/></a></marquee>
<marquee behavior='scroll' direction='down' scrollamount='1' style='position:absolute; left:614px; top:100px; height:332px;'>
<a href='BASE_URL' target='_self'><img border='0' src='ваша ссылка на картинку'/></a></marquee>
<marquee behavior='scroll' direction='down' scrollamount='3' style='position:absolute; left:651px; top:150px; height:386px;'>
<a href='BASE_URL' target='_self'><img border='0' src='ваша ссылка на картинку'/></a></marquee>
<marquee behavior='scroll' direction='down' scrollamount='5' style='position:absolute; left:684px; top:190px; height:514px;'>
<a href='BASE_URL' target='_self'><img border='0' src='ваша ссылка на картинку'/></a></marquee>
<marquee behavior='scroll' direction='down' scrollamount='1' style='position:absolute; left:658px; top:180px; height:247px;'>
<a href='BASE_URL' target='_self'><img border='0' src='ваша ссылка на картинку'/></a></marquee>
<marquee behavior='scroll' direction='down' scrollamount='1' style='position:absolute; left:694px; top:60px; height:216px;'>
<a href='BASE_URL' target='_self'><img border='0' src='ваша ссылка на картинку'/></a></marquee>
<marquee behavior='scroll' direction='down' scrollamount='2' style='position:absolute; left:738px; top:200px; height:392px;'>
<a href='BASE_URL' target='_self'><img border='0' src='ваша ссылка на картинку'/></a></marquee>
<marquee behavior='scroll' direction='down' scrollamount='1' style='position:absolute; left:753px; top:50px; height:544px;'>
<a href='BASE_URL' target='_self'><img border='0' src='ваша ссылка на картинку'/></a></marquee>
<marquee behavior='scroll' direction='down' scrollamount='5' style='position:absolute; left:800px; top:80px; height:404px;'>
<a href='BASE_URL' target='_self'><img border='0' src='ваша ссылка на картинку'/></a></marquee>
<marquee behavior='scroll' direction='down' scrollamount='2' style='position:absolute; left:850px; top:80px; height:404px;'>
<a href='BASE_URL' target='_self'><img border='0' src='ваша ссылка на картинку'/></a></marquee>
<marquee behavior='scroll' direction='down' scrollamount='5' style='position:absolute; left:910px; top:105px; height:404px;'>
<a href='BASE_URL' target='_self'><img border='0' src='ваша ссылка на картинку'/></a></marquee>
<marquee behavior='scroll' direction='down' scrollamount='1' style='position:absolute; left:935px; top:10px; height:404px;'>
<a href='BASE_URL' target='_self'><img border='0' src='ваша ссылка на картинку'/></a></marquee>
<marquee behavior='scroll' direction='down' scrollamount='5' style='position:absolute; left:990px; top:20px; height:404px;'>
<a href='BASE_URL' target='_self'><img border='0' src='ваша ссылка на картинку'/></a></marquee>
<marquee behavior='scroll' direction='down' scrollamount='3' style='position:absolute; left:1050px; top:120px; height:404px;'>
В коде меняем адреса картинок на свои — отметила красным цветом. Есть несколько вариантов установки ссылок на картинки.
Если ссылки на изображение ставить одинаковые, то сыпаться будут одинаковые предметы, например, если только сердечки, то и сыпаться будут, естественно, только они.
Если ссылки на картинки ставить разные, к примеру, два вида ссылок на сердечко и розочку, то и падать на страницу будут 2 вида предметов.
Можно использовать 3, 4, 5 и т.д. ссылок на картинки. Если есть желание, то можно поменять все ссылки на разные изображения — посыпятся разнообразные предметы, например, ёлка, ёлочные игрушки, дед мороз, звезда, снег и так далее.
Картинки можно найти на таких сайтах:
PNG
https://pngicon.ru
https://ru.pngtree.com
http://www.lenagold.ru
https://www.freepng.ru
https://www.klipartz.com/ru
http://imgpng.ru
https://www.pngwing.com/ru
https://www.uihere.com/
https://effects1.ru - на сайте можно найти и клипарт, и гифки.
https://www.pngegg.com/ru/png-snifk
https://png.rinvik.ru
GIF
https://www.gifki.org
https://wdesk.ru
https://sunveter.ru/animacija/
Уменьшить GIF картинку можно на сайте - https://ezgif.com
Уменьшить PNG изображение можно в любом графическом редакторе, например, GIMP, Adobe Photoshop, Corel Painter, Krita, KolourPaint, Paint.NET.
Отмечу, что тег <marquee>, который есть в коде падающих предметов, и который помогает легко и просто создать бегущую строку, считается устаревшим, и его не рекомендуют использовать. Вполне возможно, в некоторых браузерах, код не сработает.
Комментарии со спамом удаляются.