usama shakeel    April 29, 2020   

Actually How to Install a Download Box Like this Anime Site is not too difficult, because we only need to use the IE theme on the site, then we will be able to see the codes. But indeed for those who do not understand very well about HTML code, this may be somewhat difficult, so for this reason Namina will make a tutorial to make it easier for those who want to create download links such as Anime sites. 

How to Install a Download Box Like an Anime Site Open Blogger > Click the Theme menu and click the Edit HTML button > Add this CSS code before </head>

<style type='text/css'>
.download-eps{font-size:9px;font-weight:bold;background:none repeat scroll 0% 0% #F5F5F5;padding:10px;margin:10px 0}
.download-eps ul{margin:0;padding:0;list-style:outside none none}
.download-eps ul li{background:none repeat scroll 0% 0% #E4E4E4;margin-bottom:2px;line-height:26px;padding:0 5px;font-size:15px}
.download-eps ul li strong{background:#00b894;border-right:2px solid #F5F5F5;width:150px;display:block;float:left;margin-left:-5px;margin-right:2px;color:#FFF;padding:0 5px;text-align:left}
</style>

Then click the Save theme button . After that add the code below to the post in the HTML tab (not Compose) and the contents of the marked code can also be replaced as needed

<div class="download-eps">
   <ul>
      <li style="text-align: center;">
         <strong>360p</strong>
         <a href="URL-AREA" target="_blank" rel="nofollow noopener">Solidfiles</a> |
         <a href="URL-AREA" target="_blank" rel="nofollow noopener">Tusfiles</a> |
         <a href="URL-AREA" target="_blank" rel="nofollow noopener">Acefile</a> |
         <a href="URL-AREA" target="_blank" rel="nofollow noopener">Mirror</a>
      </li>
      <li style="text-align: center;">
         <strong>480p</strong>
         <a href="URL-AREA" target="_blank" rel="nofollow noopener">Solidfiles</a> |
         <a href="URL-AREA" target="_blank" rel="nofollow noopener">Tusfiles</a> |
         <a href="URL-AREA" target="_blank" rel="nofollow noopener">Acefile</a> |
         <a href="URL-AREA" target="_blank" rel="nofollow noopener">Mirror</a>
      </li>
      <li style="text-align: center;">
         <strong>720p</strong>
         <a href="URL-AREA" target="_blank" rel="nofollow noopener">Solidfiles</a> |
         <a href="URL-AREA" target="_blank" rel="nofollow noopener">Tusfiles</a> |
         <a href="URL-AREA" target="_blank" rel="nofollow noopener">Acefile</a> |
         <a href="URL-AREA" target="_blank" rel="nofollow noopener">Mirror</a>
      </li>
      <li style="text-align: center;">
         <strong>1080p</strong>
         <a href="URL-AREA" target="_blank" rel="nofollow noopener">Solidfiles</a> |
         <a href="URL-AREA" target="_blank" rel="nofollow noopener">Tusfiles</a> |
         <a href="URL-AREA" target="_blank" rel="nofollow noopener">Acefile</a> |
         <a href="URL-AREA" target="_blank" rel="nofollow noopener">Mirror</a>
      </li>
      <li style="text-align: center;">
         <strong>4k</strong>
         <a href="URL-AREA" target="_blank" rel="nofollow noopener">Solidfiles</a> |
         <a href="URL-AREA" target="_blank" rel="nofollow noopener">Tusfiles</a> |
         <a href="URL-AREA" target="_blank" rel="nofollow noopener">Acefile</a> |
         <a href="URL-AREA" target="_blank" rel="nofollow noopener">Mirror</a>
      </li>
   </ul>
</div>

After that, post and see the results.

Demo Click here

usama shakeel    April 29, 2020   

If you are thinking about to customise your website that's excellent decision. Do you know that 90% of your website visits are due to the appearance of your website.

Mostly users come to your website because they like the style of your website.

In this article I am going to tell you how to add snow fall effect in blogger blog or in WordPress.

In this this article I will provide you the steps to add this snowfall effect in blogger you can also add this snowfall effect in in your wordpress site by simply going to the theme editor and paste the following code in the header.php file of your wordpress site.

These are some steps that you have to follow to add this snowfall effect in blogger.

1. Go to Blogger Dashboard
2. Go to Theme/Template Section
3. Click Edit HTML
4. Now Search for </body>
5. Save Theme/Template

To search anything in blogger template section press Ctrl+F and then type term to search and press enter.


Now copy the code provided below and paste it just before the code we founded in step 4.

<style>
  #snowflakeContainer {
    position: absolute;
    left: 0px;
    top: 0px;
    display: none;
  }

  .snowflake {
    position: fixed;
    background-color: #CCC;
    user-select: none;
    z-index: 1000;
    pointer-events: none;
    border-radius: 50%;
    width: 10px;
    height: 10px;
  }
</style>

<div id="snowflakeContainer">
<span class="snowflake"></span>
</div>

<script>
  //<![CDATA[
  // Array to store our Snowflake objects
  var snowflakes = [];

  // Global variables to store our browser's window size
  var browserWidth;
  var browserHeight;

  // Specify the number of snowflakes you want visible
  var numberOfSnowflakes = 50;

  // Flag to reset the position of the snowflakes
  var resetPosition = false;

  // Handle accessibility
  var enableAnimations = false;
  var reduceMotionQuery = matchMedia("(prefers-reduced-motion)");

  // Handle animation accessibility preferences
  function setAccessibilityState() {
    if (reduceMotionQuery.matches) {
      enableAnimations = false;
    } else {
      enableAnimations = true;
    }
  }
  setAccessibilityState();

  reduceMotionQuery.addListener(setAccessibilityState);

  //
  // It all starts here...
  //
  function setup() {
    if (enableAnimations) {
      window.addEventListener("DOMContentLoaded", generateSnowflakes, false);
      window.addEventListener("resize", setResetFlag, false);
    }
  }
  setup();

  //
  // Constructor for our Snowflake object
  //
  function Snowflake(element, speed, xPos, yPos) {
    // set initial snowflake properties
    this.element = element;
    this.speed = speed;
    this.xPos = xPos;
    this.yPos = yPos;
    this.scale = 1;

    // declare variables used for snowflake's motion
    this.counter = 0;
    this.sign = Math.random() < 0.5 ? 1 : -1;

    // setting an initial opacity and size for our snowflake
    this.element.style.opacity = (.1 + Math.random()) / 3;
  }

  //
  // The function responsible for actually moving our snowflake
  //
  Snowflake.prototype.update = function () {
    // using some trigonometry to determine our x and y position
    this.counter += this.speed / 5000;
    this.xPos += this.sign * this.speed * Math.cos(this.counter) / 40;
    this.yPos += Math.sin(this.counter) / 40 + this.speed / 30;
    this.scale = .5 + Math.abs(10 * Math.cos(this.counter) / 20);

    // setting our snowflake's position
    setTransform(Math.round(this.xPos), Math.round(this.yPos), this.scale, this.element);

    // if snowflake goes below the browser window, move it back to the top
    if (this.yPos > browserHeight) {
      this.yPos = -50;
    }
  }

  //
  // A performant way to set your snowflake's position and size
  //
  function setTransform(xPos, yPos, scale, el) {
    el.style.transform = `translate3d(${xPos}px, ${yPos}px, 0) scale(${scale}, ${scale})`;
  }

  //
  // The function responsible for creating the snowflake
  //
  function generateSnowflakes() {

    // get our snowflake element from the DOM and store it
    var originalSnowflake = document.querySelector(".snowflake");

    // access our snowflake element's parent container
    var snowflakeContainer = originalSnowflake.parentNode;
    snowflakeContainer.style.display = "block";

    // get our browser's size
    browserWidth = document.documentElement.clientWidth;
    browserHeight = document.documentElement.clientHeight;

    // create each individual snowflake
    for (var i = 0; i < numberOfSnowflakes; i++) {

      // clone our original snowflake and add it to snowflakeContainer
      var snowflakeClone = originalSnowflake.cloneNode(true);
      snowflakeContainer.appendChild(snowflakeClone);

      // set our snowflake's initial position and related properties
      var initialXPos = getPosition(50, browserWidth);
      var initialYPos = getPosition(50, browserHeight);
      var speed = 5 + Math.random() * 40;

      // create our Snowflake object
      var snowflakeObject = new Snowflake(snowflakeClone,
        speed,
        initialXPos,
        initialYPos);
      snowflakes.push(snowflakeObject);
    }

    // remove the original snowflake because we no longer need it visible
    snowflakeContainer.removeChild(originalSnowflake);

    moveSnowflakes();
  }

  //
  // Responsible for moving each snowflake by calling its update function
  //
  function moveSnowflakes() {

    if (enableAnimations) {
      for (var i = 0; i < snowflakes.length; i++) {
        var snowflake = snowflakes[i];
        snowflake.update();
      }   
    }

    // Reset the position of all the snowflakes to a new value
    if (resetPosition) {
      browserWidth = document.documentElement.clientWidth;
      browserHeight = document.documentElement.clientHeight;

      for (var i = 0; i < snowflakes.length; i++) {
        var snowflake = snowflakes[i];

        snowflake.xPos = getPosition(50, browserWidth);
        snowflake.yPos = getPosition(50, browserHeight);
      }

      resetPosition = false;
    }

    requestAnimationFrame(moveSnowflakes);
  }

  //
  // This function returns a number between (maximum - offset) and (maximum + offset)
  //
  function getPosition(offset, size) {
    return Math.round(-1 * offset + Math.random() * (size + 2 * offset));
  }

  //
  // Trigger a reset of all the snowflakes' positions
  //
  function setResetFlag(e) {
    resetPosition = true;
  }
  //]]>
</script>