Membuat Error Page 404 Animasi Matrix di Blog

Error page 404 Efek Animasi Matrix Rain. Hallo teman-teman, sehat semua kan!. Maaf ni baru posting artikel, hal itu karena aktivitas saya yang mengharuskan untuk berhenti sejenak. Oya, masih ingat kan tentang artikel saya yang berjudul Cara membuat Halaman Error 404 Animasi Glazing ribbon di Blog?,. Nah kali ini saya akan membagikan halaman error 404 yang lain lagi.

Halaman Error ini berfungsi sebagai halaman peringatan bahwa posting, halaman atau URL yang dicari salah atau sudah di hapus. Jadi, misal anda asal mengetik di belakang URL blog anda, maka halaman error ini akan muncul.

LIVE DEMO

Error page 404 Matrix Rain Animation

1. Blog kamu di Blogger
2. Pilih menu Template > Edit HTML.
3. Letakan kode dibawah ini di atas </body>

<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<script src='https://cdn.rawgit.com/Brando07/share/newbe/matrix-rain-seocips.js' type='text/javascript'/>
<div id='error-page'>
  <div id='error-inner'>
    <div class='box-404'>404</div>
    <h1>PAGE NOT FOUND</h1>
    <p>You are half way around the word, but OOPS you make the wrong turn,
let us lead you to the right way,</p>
    <p> return to our
      <a href='http://www.seocips.com' title='HOME'>homepage</a> ?
    </p>
    <div id='search-box'>
      <form action='/search' id='cse-search-box' method='get'>
        <input id='search-text' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;' type='text' value='' />
        <button id='search-button' type='submit' />
      </form>
    </div>
  </div>
</div>
<canvas id="c"></canvas>
<style>
/*Halaman 404 Seocips*/
canvas { display:block; z-index:8888888; }
body { background:#333; margin:0; padding:0; font-family:calibri; color:#ddd; }
#error-page {  position:fixed !important; position:absolute; text-align:center; top:0; right:0; bottom:0; left:0; z-index:8888889; text-shadow:0 3px 4px #000; }
#error-page a:link,#error-page a:visited,#error-page a:hover { text-decoration:none; color:#fff; font-weight:bold; }
#error-inner { margin:11% auto; }
#error-inner .box-404 { width:200px; height:200px; background:rgba(1,0,1,0.9); color:#ccc; font-size:80px; line-height:200px; border-radius:10px; margin:0 auto 50px; position:relative; z-index:9999; box-shadow:0 3px 4px #000; border:1px solid #333; text-shadow:0 3px 4px #000; }
#error-inner .box-404::after { content:&quot; &quot; ; width:0; height:0; bottom:-8px; border-color:#21afa4 transparent transparent; border-style:solid; border-width:9px 9px 0; position:absolute; left:47%; }
#error-inner h1 { text-transform:uppercase; }
#search-box { position:relative; width:350px; margin:10px auto; }
#cse-search-box { height:30px; border-radius:5px; background-color:#fff; overflow:hidden; box-shadow:0 3px 4px #000; border:1px solid #333; }
#search-text { font-size:12px; color:#ddd; border-width:0; background:transparent; }
#search-box input[type=&quot; text&quot; ] { width:85%; padding:5px 20px 12px 0; color:#666; outline:none; }
#search-button { position:absolute; top:0; right:0; height:32px; width:20px; margin-top:10px; font-size:14px; color:#fff; text-align:center; line-height:0; border-width:0; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwC1z0Qxud2xfxYW0zITov6b1EGi07Iwwiz3O-t4Uk1HXwNMk5MIJgR5Bh-xD5WNtH_PzEJ2kI671AXK6GapxuOF5WArDMv1Zw38XQmSeno12uycUfC3zWvSLnK9wI1CdgUGENmS3Dv0A/s200/search-c.png) no-repeat; cursor:pointer; }
#error-inner p { line-height:0.7em; font-size:15px; }
</style>
</b:if>

4. Ganti http://www.seocips.com dengan link blog kamu.
5. Save template.

Selengkapnya Baca disini: http://www.seocips.com/2015/05/membuat-matrix-rain-animation-di.html