23 Şub 2019

Blogger Kar Yağdırma Eklentisi



Blogger İçin Kar Yağdırma Eklentisi Nasıl Yapılır ?
  1. İlk Önce Blogger Kontrol Panelinden Tema>Html'i Düzenle ye Geliyoruz.
  2. Sonra head Etiketini Bulup Aşağıdaki Kodu Hemen Altına Yapıştırıyoruz.

    3. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
    <script>
    var t = setInterval(
      function() {
        var documentHeight = $(document).height();
        var startPositionLeft = Math.random() * $(document).width() - 100;
        var startOpacity = 0.5 + Math.random();
        var sizeFlake = 10 + Math.random() * 20;
        var endPositionTop = documentHeight - 40;
        var endPositionLeft = startPositionLeft - 100 + Math.random() * 200;
        var durationFall = documentHeight * 10 + Math.random() * 5000;
        $('#flake')
        .clone()
        .appendTo('body')
        .css(
          {
            left: startPositionLeft,
            opacity: startOpacity,
            'font-size': sizeFlake
          }
        )
        .animate(
          {
            top: endPositionTop,
            left: endPositionLeft,
            opacity: 0.2
          },
          durationFall,
          'linear',
          function() {
            $(this).remove()
          }
        );
      }, 500);
    var snow = {};
    var snowflex = {};
    snowflex.create = function() {
      var flex = document.createElement('div');
      flex.innerHTML = "&#10052;";
      flex.style.fontSize = 10 + Math.random() * 20 + 'px';
      flex.style.top = -50 + Math.random() * 20 + 'px';
      flex.style.left = Math.random() * 1500 + 'px';
      flex.style.position = "absolute";
      flex.style.color = "#F3F3F3";
      flex.style.opacity = Math.random();
      document.getElementsByTagName('body')[0].appendChild(flex);
      return flex;
    };
    snow.snowflex = function() {
      var flex = snowflex.create();
      var x = -1 + Math.random() * 2;
      var t = setInterval(
        function() {
          flex.style.top = parseInt(flex.style.top) + 5 + 'px';
          flex.style.left = parseInt(flex.style.left) + x + 'px';
          if (parseInt(flex.style.top) > 1500) {
            clearInterval(t);
            document.getElementsByTagName('body')[0].removeChild(flex);
          }
        }, 45 + Math.random() * 20);
    };
    snow.storm = function() {
      var t = setInterval(
        function() {
          snow.snowflex();
        }, 500);
    };
    //snow.storm();
    var fog = {};
    fog.draw = function(ctx, x, y) {
      ctx.fillStyle = "rgba( 255, 255, 255, " + Math.random() + " )";
      ctx.arc(x, y, 10, 0, Math.PI * 2, true);
      ctx.closePath();
      ctx.fill();
    };
    fog.start = function() {
      var ctx = document.getElementById('canvas').getContext("2d");
      var x = 0;
      var y = 0;
      var t = setInterval(
        function() {
          x = 300 + 300 * Math.sin(x);
          y = 300 + 300 * -Math.cos(x);
          x += 2;
          fog.draw(ctx, x, y);
        }, 100);
    };
    //fog.start();
    </script>
    <style> 
    img.bg {
      min-height: 100%;
      min-width: 1024px;
      width: 100%;
      height: auto;
      position: fixed;
      top: 0;
      left: 0;
    }

    h1 {
      font-family: 'Chelsea Market', cursive;
      color: #FFF;
      font-size: 90px;
      text-align: center;
      line-height: 95px;
      font-weight: normal;
      margin-top: 350px;
      text-shadow: 5px 5px 5px #000;
    }

    @media screen and (max-width: 1024px) {
      /* Specific to this particular image */
      img.bg {
        left: 50%;
        margin-left: -512px;
        /* 50% */
      }
    }

    html,
    body {
      font-family: Helvetica, Arial, sans-serif;
      font-size: 12px;
      line-height: 16px;
      padding: 0;
      margin: 0;
      color: #333;
    }

    .bar {
      background-color: #111;
      color: #f0f0f0;
      box-shadow: 0px 0px 2px #333;
      line-height: 25px;
      padding: 0px 20px;
      opacity: 0.7;
    }

    .bar:hover {
      opacity: 1;
    }

    .bar a {
      color: #DDD;
    }

    .bar a:hover {
      color: #FFFFFF;
    }

    a {
      color: #CCC;
      text-decoration: none;
    }

    a:hover {
      color: #FFFFFF;
    }

    #canvas {
      border: 1px solid black;
      position: absolute;
      z-index: 10000;
    }

    #flake {
      color: #fff;
      position: absolute;
      font-size: 25px;
      top: -50px;
    }

    #page {
      position: relative;
    }

    </style>
  3. Son Olarak Aşağıdaki Kodu <body> Etiketini Bulup Hemen Altına Yapıştırıyoruz.
    4. <div id = "flake">&#10052;</div>