» » Виджет падающих предметов для Blogger

Виджет падающих предметов для Blogger

Нашла на сайте https://spiceupyourblog.com код падающих предметов, который можно установить в праздники на блог. Менять придётся только картинки, что бы они соответствовали тематике праздника. Сверху страницы будут падать вниз снежинки или тыквы, ёлочки или сердечки, в зависимости от намечающегося торжества. Устанавливается код в Дизайн - Добавить гаджет - Javascript. Расположить его нужно под шапкой блога. 
Картинки должны быть на прозрачном фоне статичные PNG или движущиеся GIF. Движущиеся смотрятся красивее. Например, переливающаяся разным цветом ёлочная игрушка, вращающаяся снежинка, мигающая тыква и так далее. 
Виджет падающих предметов для Blogger
Размер картинки не более 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>, который есть в коде падающих предметов, и который помогает легко и просто создать бегущую строку, считается устаревшим, и его не рекомендуют использовать. Вполне возможно, в некоторых браузерах, код не сработает.  

Отправить комментарий

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