» » Новогоднее украшение на блоггер

Новогоднее украшение на блоггер

Интересный Новогодний и Рождественский виджет видела на зарубежных сайтах и на русских. Он довольно интересный - меняет всю страницу блога.
виджет
У страницы становится розовым фон. Вверху в углах появляются еловые ветки, идёт снег, а внизу новогодняя/рождественская картинка с ёлкой и горками снега.
Скрипт можно немного изменить и выглядеть он будет по-новому. В сегодняшнем посте покажу все изменения, которые можно сделать.

Код виджета

Украшение можно установить в Дизайн/Добавить гаджет/HTML/JavaScript или выше тега </body> в шаблоне блога - Тема/Изменить HTML
<script type='text/javascript'>
//<![CDATA[
document.write('<style type="text/css">html{height:auto!important}body{background:#f5465a;padding-bottom:150px}</style><img style="position:fixed;z-index:9999;top:0;left:0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3AVWykF8ZpCgP660Jign2iLUBeKMLzsfNhm8bD55eeaQgOnjEdgsRi-biEzlQnzjbufzDUFaBcFbXtJGkIq1A-F8SAVVUc1Pj0yOPAMn74DK1G9wlaugZjNPFquVGLJQaBvEU_hzO14M/s150/top-left.png"/><img style="position:fixed;z-index:9999;top:0;right:0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx0_efFkr7eIIPkIYAYBZxsoAcP7i0Xe6FgvZLobYmoWbYqQt6JP7Fn_iK53r6dRKl4oDrSRqrmhc6oyXBNIRYK0JKP_M3M93myLAIUxaW__NsBNVPLUpmYx0JSdJlsX80YmA_bU1yF-o/s150/top-right.png"/><div style="position:fixed;z-index:9999;bottom:0;left:0;width:100%;height:104px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPDsjo79TMUJXky3X4v6C5NbCjvowx42Qw7kOIE-YC3tFuS0Fb6EzlHCqUhyphenhyphen-YoF8upR-j0h1uC7_rr101vWHgeaaADolCYuHZceml3tN-X7PBUL-4r1Nk4SDvBMVSu-hOwuDVOazicuc/s1600/footer.png) repeat-x bottom left;"></div><img style="position:fixed;z-index:9999;bottom:30px;left:30px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgt1SXrPldVE63BR_jRlT78uRvJC40yfXRGjmRU0J9poDvauLjLpwGyPcgrG-iU0cZYsbNXW4UFlyvqIj0issz5QDgurLQIr5A7q7pFRPVYCK8f3fhz6pAbeGorkfX8anUwsXlcjWI-7sw/s180/bottom-left.png"/>');var no=100;var hidesnowtime=0;var snowdistance='pageheight';var ie4up=(document.all)?1:0;var ns6up=(document.getElementById&&!document.all)?1:0;function iecompattest(){return(document.compatMode&&document.compatMode!='BackCompat')?document.documentElement:document.body}var dx,xp,yp;var am,stx,sty;var i,doc_width=800,doc_height=600;if(ns6up){doc_width=self.innerWidth;doc_height=self.innerHeight}else if(ie4up){doc_width=iecompattest().clientWidth;doc_height=iecompattest().clientHeight}dx=new Array();xp=new Array();yp=new Array();am=new Array();stx=new Array();sty=new Array();for(i=0;i<no;++i){dx[i]=0;xp[i]=Math.random()*(doc_width-50);yp[i]=Math.random()*doc_height;am[i]=Math.random()*20;stx[i]=0.02+Math.random()/10; sty[i]=0.7+Math.random();if(ie4up||ns6up){document.write('<div id="dot'+i+'" style="POSITION:absolute;Z-INDEX:'+i+';VISIBILITY:visible;TOP:15px;LEFT:15px;"><span style="font-size:18px;color:#fff">*</span><\/div>')}}function snowIE_NS6(){doc_width=ns6up?window.innerWidth-10:iecompattest().clientWidth-10;doc_height=(window.innerHeight&&snowdistance=='windowheight')?window.innerHeight:(ie4up&&snowdistance=='windowheight')?iecompattest().clientHeight:(ie4up&&!window.opera&&snowdistance=='pageheight')?iecompattest().scrollHeight:iecompattest().offsetHeight;for(i=0;i<no;++i){yp[i]+=sty[i];if(yp[i]>doc_height-50){xp[i]=Math.random()*(doc_width-am[i]-30);yp[i]=0;stx[i]=0.02+Math.random()/10;sty[i]=0.7+Math.random()}dx[i]+=stx[i];document.getElementById('dot'+i).style.top=yp[i]+'px';document.getElementById('dot'+i).style.left=xp[i]+am[i]*Math.sin(dx[i])+'px'}snowtimer=setTimeout('snowIE_NS6()',10)}function hidesnow(){if(window.snowtimer){clearTimeout(snowtimer)}for(i=0;i<no;i++)document.getElementById('dot'+i).style.visibility='hidden'}if(ie4up||ns6up){snowIE_NS6();if(hidesnowtime>0)setTimeout('hidesnow()',hidesnowtime*1000)}
//]]>
</script>
Меняем:
Цвет фона - выделила в коде красным цветом.
Оранжевым выделила ссылки на ветки ели в уголках страницы. Их можно поменять. Нужно две картинки на прозрачном фоне PNG - левая и правая. Размер изображения 144 на 150. Поменять размер картинки можно в любом редакторе.
Зелёным выделила - ссылку на фон подвала со снежными сугробами. Так же можно подыскать свою картинку размером примерно 1600 на 104. Или наложить на имеющуюся в коде картинку какую-нибудь надпись или изображение.
И последняя картинка ёлочка с подарками - в коде выделила синим. Её можно заменить на свою. Ищем изображение размером около 174 на 180.
Снежинку, её размер и цвет выделила в коде салатовым. Снежинки можно заменить на другие:
❉❆❅❄❇
Если заменить все предложенные варианты, то может получится оформление, например такое:
картинка два
Или вот такое:
вариант
Если проявить фантазию и потратить 30-40 минут времени, то можно сделать прекрасное оформление и не только для Нового года, но и для других праздников - 23 февраля, 9 мая, 8 марта и так далее.

  1. Ирина Сабанина27/12/21 19:46

    Спасибо! отличное решение оформления страницы, блога или поста!

    ОтветитьУдалить

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