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

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

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

Сегодня продолжаем изучать способы красивого оформления сайта.

Снег

Этот снег можно заменить другими падающими предметами - листочками, цветочками и т.д, заменив адрес картинки снежинки (в начале кода) на адрес другого изображения, или даже другой снежинки.

Устанавливается снег в Дизайн - Добавить гаджет - HTML/java script

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();
  snowsrc=(snowsrc.indexOf("dynamicdrive.com")!=-1)? "https://lh6.googleusercontent.com/-BY_1vzDtGGk/TuA3QE5YV9I/AAAAAAAACnU/N5CcD1uJfhE/s24/snow.gif" : snowsrc
  for (i = 0; i < no; ++ i) { 
    dx[i] = 0;                        // set coordinate variables
    xp[i] = Math.random()*(doc_width-50);  // set position variables
    yp[i] = Math.random()*doc_height;
    am[i] = Math.random()*20;         // set amplitude variables
    stx[i] = 0.02 + Math.random()/10; // set step variables
    sty[i] = 0.7 + Math.random();     // set step variables
        if (ie4up||ns6up) {
      if (i == 0) {
        document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><a href=\"http://dynamicdrive.com\"><img src='"+snowsrc+"' border=\"0\"><\/a><\/div>");
      } else {
        document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\">
<img src='"+snowsrc+"' border=\"0\"><\/div>");
      }
    }
  }
  function snowIE_NS6() {  // IE and NS6 main animation function
    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) {  // iterate for every dot
      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>

Гирлянды

У двух предложенных сегодня для обозрения гирлянд очень смешное название - Новогодняя мотня.
Вставляем код в любом месте на блоге с помощью гаджета. Дизайн - Добавить гаджет - HTML/java script

<div style="padding: 0px;">
<img class="st1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEho4QsT771anaafd9tNNrx_sK5D-CkTqFTTb7bk-xDLOSAAwP1vR6QWqKYpiu-iD5jvibbc2i_Y3ybjMoMP50UEkTX7-85fcomUgWofy09nEDJRpwvZ0OJiEty9002a1fHNK-plzrbIhgnj/s800/b-ball_n4.png" style="position:fixed; top: 0px;left:150px;border:none;z-index:10;" /><img class="st2" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2jlEKBjiVTovAf01in05SGSUl2B2yjJnZ67VXydCLKenKVnoVFzk0QLepT3FsQgb3nn-j74OoS5hPh23Ri0TPBWuoQy9P0-xECHmFZpp80HiVdR4O3Upgn9eu9IYNZY2rgmGAuG3dfc_z/s800/b-ball_n2.png" style="position:fixed; top: 0px;left:450px;border:none;z-index:11;" /><img class="st1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi62Y78XNAII18hfVPwmUlWz2BzIw-UiX0vaMF6eef-rgMYXG4KY6Z-ARyx14IxcqOW_14rQu71WhX0RV1tqbEKv4W-Y1QkImUzWdAQSHkXIQSyhc4QkqVqIoM9I1NKt3OAnuuL8af2VT8I/s800/b-ball_n3.png" style="position:fixed; top: 0px;left:750px;border:none;z-index:10;" /><img class="st2" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEho4QsT771anaafd9tNNrx_sK5D-CkTqFTTb7bk-xDLOSAAwP1vR6QWqKYpiu-iD5jvibbc2i_Y3ybjMoMP50UEkTX7-85fcomUgWofy09nEDJRpwvZ0OJiEty9002a1fHNK-plzrbIhgnj/s800/b-ball_n4.png" style="position:fixed; top: 0px;left:1050px;border:none;z-index:11;" /><img class="st1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2jlEKBjiVTovAf01in05SGSUl2B2yjJnZ67VXydCLKenKVnoVFzk0QLepT3FsQgb3nn-j74OoS5hPh23Ri0TPBWuoQy9P0-xECHmFZpp80HiVdR4O3Upgn9eu9IYNZY2rgmGAuG3dfc_z/s800/b-ball_n2.png" style="position:fixed; top: 0px;left:1350px;border:none;z-index:10;" /><img class="st2" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi62Y78XNAII18hfVPwmUlWz2BzIw-UiX0vaMF6eef-rgMYXG4KY6Z-ARyx14IxcqOW_14rQu71WhX0RV1tqbEKv4W-Y1QkImUzWdAQSHkXIQSyhc4QkqVqIoM9I1NKt3OAnuuL8af2VT8I/s800/b-ball_n3.png" style="position:fixed; top: 0px;left:1650px;border:none;z-index:11;" /><img class="st" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2jlEKBjiVTovAf01in05SGSUl2B2yjJnZ67VXydCLKenKVnoVFzk0QLepT3FsQgb3nn-j74OoS5hPh23Ri0TPBWuoQy9P0-xECHmFZpp80HiVdR4O3Upgn9eu9IYNZY2rgmGAuG3dfc_z/s800/b-ball_n2.png" style="position:fixed; top: 0px;left:1950px;border:none;z-index:11;" /></div>
<div style="padding: 0px;">
<img class="st" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2jlEKBjiVTovAf01in05SGSUl2B2yjJnZ67VXydCLKenKVnoVFzk0QLepT3FsQgb3nn-j74OoS5hPh23Ri0TPBWuoQy9P0-xECHmFZpp80HiVdR4O3Upgn9eu9IYNZY2rgmGAuG3dfc_z/s800/b-ball_n2.png" style="position:fixed; top: 0px;left:50px;border:none;z-index:11;" /><img class="st" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi62Y78XNAII18hfVPwmUlWz2BzIw-UiX0vaMF6eef-rgMYXG4KY6Z-ARyx14IxcqOW_14rQu71WhX0RV1tqbEKv4W-Y1QkImUzWdAQSHkXIQSyhc4QkqVqIoM9I1NKt3OAnuuL8af2VT8I/s800/b-ball_n3.png" style="position:fixed; top: 0px;left:300px;border:none;z-index:11;" /><img class="st2" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEho4QsT771anaafd9tNNrx_sK5D-CkTqFTTb7bk-xDLOSAAwP1vR6QWqKYpiu-iD5jvibbc2i_Y3ybjMoMP50UEkTX7-85fcomUgWofy09nEDJRpwvZ0OJiEty9002a1fHNK-plzrbIhgnj/s800/b-ball_n4.png" style="position:fixed; top: 0px;left:600px;border:none;z-index:11;" /><img class="st" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2jlEKBjiVTovAf01in05SGSUl2B2yjJnZ67VXydCLKenKVnoVFzk0QLepT3FsQgb3nn-j74OoS5hPh23Ri0TPBWuoQy9P0-xECHmFZpp80HiVdR4O3Upgn9eu9IYNZY2rgmGAuG3dfc_z/s800/b-ball_n2.png" style="position:fixed; top: 0px;left:900px;border:none;z-index:11;" /><img class="st2" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi62Y78XNAII18hfVPwmUlWz2BzIw-UiX0vaMF6eef-rgMYXG4KY6Z-ARyx14IxcqOW_14rQu71WhX0RV1tqbEKv4W-Y1QkImUzWdAQSHkXIQSyhc4QkqVqIoM9I1NKt3OAnuuL8af2VT8I/s800/b-ball_n3.png" style="position:fixed; top: 0px;left:1200px;border:none;z-index:11;" /><img class="st" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEho4QsT771anaafd9tNNrx_sK5D-CkTqFTTb7bk-xDLOSAAwP1vR6QWqKYpiu-iD5jvibbc2i_Y3ybjMoMP50UEkTX7-85fcomUgWofy09nEDJRpwvZ0OJiEty9002a1fHNK-plzrbIhgnj/s800/b-ball_n4.png" style="position:fixed; top: 0px;left:1500px;border:none;z-index:11;" /><img class="st2" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2jlEKBjiVTovAf01in05SGSUl2B2yjJnZ67VXydCLKenKVnoVFzk0QLepT3FsQgb3nn-j74OoS5hPh23Ri0TPBWuoQy9P0-xECHmFZpp80HiVdR4O3Upgn9eu9IYNZY2rgmGAuG3dfc_z/s800/b-ball_n2.png" style="position:fixed; top: 0px;left:1800px;border:none;z-index:11;" /></div>
<div style="padding: 0px;">
<img align="middle" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_eHKVwgyS4QloXDAsci41nQGMQ13RJ_IAyYJwKOkI-DJ-4UE0s2Bq-93SAOF05V4UCyNmtTQ9snYu_8_eU2QcvGxl6abIAYKY2stFZpx045qDXCS-AoJDoCjIWX-jAc7Xv8gg0QGzoAeg/s300/fon1.png" style="position:fixed; top: 0px;right:0px;border:none;z-index:1;" /><img align="middle" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_eHKVwgyS4QloXDAsci41nQGMQ13RJ_IAyYJwKOkI-DJ-4UE0s2Bq-93SAOF05V4UCyNmtTQ9snYu_8_eU2QcvGxl6abIAYKY2stFZpx045qDXCS-AoJDoCjIWX-jAc7Xv8gg0QGzoAeg/s300/fon1.png" style="position:fixed; top: 0px;right:250px;border:none;z-index:2;" /><img align="middle" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_eHKVwgyS4QloXDAsci41nQGMQ13RJ_IAyYJwKOkI-DJ-4UE0s2Bq-93SAOF05V4UCyNmtTQ9snYu_8_eU2QcvGxl6abIAYKY2stFZpx045qDXCS-AoJDoCjIWX-jAc7Xv8gg0QGzoAeg/s300/fon1.png" style="position:fixed; top: 0px;right:500px;border:none;z-index:3;" /><img align="middle" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_eHKVwgyS4QloXDAsci41nQGMQ13RJ_IAyYJwKOkI-DJ-4UE0s2Bq-93SAOF05V4UCyNmtTQ9snYu_8_eU2QcvGxl6abIAYKY2stFZpx045qDXCS-AoJDoCjIWX-jAc7Xv8gg0QGzoAeg/s300/fon1.png" style="position:fixed; top: 0px;right:750px;border:none;z-index:4;" /><img align="middle" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_eHKVwgyS4QloXDAsci41nQGMQ13RJ_IAyYJwKOkI-DJ-4UE0s2Bq-93SAOF05V4UCyNmtTQ9snYu_8_eU2QcvGxl6abIAYKY2stFZpx045qDXCS-AoJDoCjIWX-jAc7Xv8gg0QGzoAeg/s300/fon1.png" style="position:fixed; top: 0px;right:1000px;border:none;z-index:5;" /><img align="middle" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_eHKVwgyS4QloXDAsci41nQGMQ13RJ_IAyYJwKOkI-DJ-4UE0s2Bq-93SAOF05V4UCyNmtTQ9snYu_8_eU2QcvGxl6abIAYKY2stFZpx045qDXCS-AoJDoCjIWX-jAc7Xv8gg0QGzoAeg/s300/fon1.png" style="position:fixed; top: 0px;right:1250px;border:none;z-index:6;" /><img align="middle" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_eHKVwgyS4QloXDAsci41nQGMQ13RJ_IAyYJwKOkI-DJ-4UE0s2Bq-93SAOF05V4UCyNmtTQ9snYu_8_eU2QcvGxl6abIAYKY2stFZpx045qDXCS-AoJDoCjIWX-jAc7Xv8gg0QGzoAeg/s300/fon1.png" style="position:fixed; top: 0px;right:1500px;border:none;z-index:7;" /><img align="middle" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_eHKVwgyS4QloXDAsci41nQGMQ13RJ_IAyYJwKOkI-DJ-4UE0s2Bq-93SAOF05V4UCyNmtTQ9snYu_8_eU2QcvGxl6abIAYKY2stFZpx045qDXCS-AoJDoCjIWX-jAc7Xv8gg0QGzoAeg/s300/fon1.png" style="position:fixed; top: 0px;right:1750px;border:none;z-index:8;" /><img align="middle" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_eHKVwgyS4QloXDAsci41nQGMQ13RJ_IAyYJwKOkI-DJ-4UE0s2Bq-93SAOF05V4UCyNmtTQ9snYu_8_eU2QcvGxl6abIAYKY2stFZpx045qDXCS-AoJDoCjIWX-jAc7Xv8gg0QGzoAeg/s300/fon1.png" style="position:fixed; top: 0px;right:2000px;border:none;z-index:9;" /></div>

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

Следующие гирлянды устанавливаются так же Дизайн - Добавить гаджет - HTML/java script, место для виджета можно выбрать любое - под шапкой блога, в боковую панель или даже в подвал.

Интересная мигающая гирлянда, но простенькая.

<div style="height: 30px; background: url(https://uguide.ru/js/script/girlianda_uguide_ru_1.gif) repeat-x 100%;"></div>

И вторые светящаяся огоньки выглядит скромно, но со вкусом.

<div style="height: 30px; background: url(https://uguide.ru/js/script/girlianda_uguide_ru_2.gif) repeat-x 100%;"></div>

Как понятно из кода, гирлянда - это гиф-картинка, если найдёте другие понравившиеся изображения гирлянд, их можно заменить на свои ссылки на картинку. Выделила красным цветом.

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

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

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

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

Снег

Гирлянды

Ещё статьи по теме: