Cara Mudah Membuat Halaman Error 404 Not Found




 Cara Mudah Membuat Halaman Error 404 Not Found
Cara Mudah Membuat Halaman Error 404 Not Found: Artikel sebelumnya saya sudah pernah membahas Cara Membuat Kustomisasi Page Not Found 404 di Blogger Malam ini saya akan share kembali cara membuat halaman error 404 not found.

Dengan kita membuat tampilan 404 Error Not Found pada blog, ini gunanya adalah untuk memberitahu kepada para pengunjung bahwa artikel yang akan di kunjungi telah dihapus atau sudah diubah urlnya. jadi tidak ada salahnya juga kita mendesign  halaman 404 Error Not Found agar lebih menjadi menarik juga terdapat tampilkan tombol untuk pergi ke halaman Beranda dan kotak pencarian yang sangat berfungsi untuk memudahkan para pengunjung mencari apa yang mereka inginkan. 

Jika anda penasaran ingin membuat nya, maka bisa menyimak langkah- langkah di bawah ini.
oh ya untuk demo nya bisa lihat saja video gambar Gif di atas yang sudah saya sedikan.

1. Halaman Error 404 Not Found

  1. Pertama , pastikan anda sudah masuk di dasbhor anda sendiri
  2. Masuk pada bagian editor template , caranya pilih Menu Template -> Edit HTML.
  3. Copas kode di bawah ini dan letakan di atas kode <head>
    <b:if cond='data:blog.pageType == &quot;index&quot;'>
        <title><data:blog.pageTitle/></title>
    <b:else/>
        <b:if cond='data:blog.pageType == &quot;error_page&quot;'>
            <title>404: Page Not Found ~ <data:blog.title/></title>
        <b:else/>
            <title><data:blog.pageName/> ~ <data:blog.title/></title>
        </b:if>
    </b:if> 
  4. Salin kode di bawah ini dan paste di atas kode </body>
    <b:if cond='data:blog.pageType == &quot;error_page&quot;'>
            <div id='error-page'>
              <div id='error-inner'>
                <div class='box-404'>404</div>
               <h1>Halaman tidak ditemukan</h1>
                <p>Kemungkinan halaman telah dihapus, atau Anda salah menulis URL</p>
                <p>Kembali ke <a expr:href='data:blog.homepageUrl'><data:blog.title/></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='Cari di sini ...'/>
                <button id='search-button' type='submit'/>
              </form>
            </div>
              </div>
            </div>
        </b:if> 
  5. Kemudian anda masukkan kode CSS di bawah ini diatas kode ]]></b:skin> atau </style>
    /*Desain Halaman 404 Error Not Found
    ----------------------------------------------- */
    #error-page {
    background-color:#e9e9e9;
    position:fixed !important;
    position:absolute;
    text-align:center;
    top:0;
    right:0;
    bottom:0;
    left:0;
    z-index:99999;
    }
    #error-inner {
    margin:11% auto;
    }
    #error-inner .box-404 {
    width:200px;
    height:200px;
    background:#21afa4;
    color:#fff;
    font-size:80px;
    line-height:200px;
    border-radius:10px;
    margin:0 auto 50px;
    position:relative;
    }
    #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:2px;background-color:#fff;overflow:hidden;border:1px solid #bbb}
    #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(http://1.bp.blogspot.com/_C6KkooKXCEw/TIBqtV6pdmI/AAAAAAAAGyM/QUBsym_R9V0/s200/search-c.png) no-repeat;cursor:pointer}
    #error-inner p {
    line-height:0.7em;
    font-size:15px;
    }
  6. Jika sudah anda bisa klik Save Template.

2. Halaman Error 404 Not Found

  1. Cara nya sama seperti di atas
  2. Masuk pada bagian editor template , caranya pilih Menu Template -> Edit HTML.
  3. Copas kode di bawah ini dan letakan di atas </body>
    <b:if cond="data:blog.pageType != &quot;error_page&quot;">
        ... Daerah ini berisi bagian-bagian utama dalam sebuah blog seperti main-wrapper, sidebar-wrapper, hingga footer-wrapper. Daerah ini akan diabaikan karena kita berada di dalam kondisi pengingkaran. ...
      </b:if>
      <b:if cond="data:blog.pageType == &quot;error_page&quot;">
        <div id="container-error">
          <div class="minion">
            <div class="hands">
              <div class="left"></div>
              <div class="right"></div>
              <div class="fingers-l"></div>
              <div class="fingers-r"></div>
              <div class="glove-l"></div>
              <div class="glove-r"></div>
            </div>
            <div class="glasses">
              <div class="glassesline1"></div>
              <div class="glassesline2"></div>
              <div class="glass1">
                <div class="eye1"></div>
              </div>
              <div class="glass2">
                <div class="eye2"></div>
              </div>
            </div>
            <div class="mouth">
              <ul class="teeth">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
              </ul>
            </div>
            <div class="belt-left"></div>
            <div class="belt-right"></div>
            <div class="pants"></div>
            <div class="legs">
              <div class="left"></div>
              <div class="right"></div>
              <div class="shoe-l"></div>
              <div class="shoe-r"></div>
            </div>
          </div>
          <div id="buttonerror">
    <a expr:href='data:blog.homepageUrl'>Homepage</a></div>
        </div>
      </b:if>
  4. Anda copas kode di bawah ini dan letakan di atas ]]></b:skin>
    /* CSS Custom Error Minion by arasdesign */
    #container-error{text-align:center;z-index:9999;width:100%;height:100%;position:fixed;top:0;right:0;bottom:0;left:0;padding:0;background-color:#EC7E65;color:#fff}
    #buttonerror{clear:both;position:absolute;background-color:rgba(255,255,255,.05);color:#EC7E65;position:absolute;left:0;right:0;bottom:15%;margin:auto;max-width:250px;padding:20px;z-index:99999;border-radius:10px;border:5px solid #fff;transition:all .5s}
    #buttonerror a{color:#fff;font-weight:700;font-size:1.5rem;text-transform:uppercase;letter-spacing:1px}
    #buttonerror:hover{background-color:rgba(255,255,255,1)}
    #buttonerror:hover a,#buttonerror a:hover{color:#EC7E65}
    .minion{position:absolute;background-color:#ffed41;height:360px;width:218px;border-radius:218px 218px 130px 130px;position:absolute;left:50%;top:45%;margin:-180px 0 0 -109px;z-index:99999}
    .glassesline1{background-color:#494949;border-radius:4px;height:12px;width:238px;position:relative;top:98px;margin:0 -10px}
    .glassesline2{background-color:#2d2d2d;border-radius:4px;height:12px;width:238px;position:relative;top:98px;margin:0 -10px;box-shadow:0 3px 0 0 rgba(0,0,0,0.15)}
    .glass1,.glass2{background-color:#e2e2e0;height:102px;width:102px;border-radius:102px;position:absolute;top:55px;box-shadow:-4px 4px 0 0 rgba(50,50,50,0.15),1px -1px 0 0 rgba(255,255,255,1)}
    .glass1{left:10px;right:auto;z-index:2}
    .glass2{right:10px;left:auto;z-index:1}
    .glass1:before,.glass2:before{background-color:#e5bf36;height:78px;width:78px;border-radius:78px;display:block;position:relative;top:12px;left:12px;content:""}
    .glass1:after,.glass2:after{background-color:#FFF;height:58px;width:78px;border-radius:78px;position:absolute;top:22px;left:12px;content:"";animation:eyes 5s linear 1s infinite}
    .eye1,.eye2{background-color:#724c25;height:28px;width:28px;border-radius:28px;position:absolute;top:44px;z-index:3}
    .eye1{left:46px}
    .eye2{right:46px}
    .eye1:before,.eye2:before{background-color:#2c2d2f;height:12px;width:12px;border-radius:12px;display:block;position:relative;top:8px;left:8px;content:""}
    .eye1:after,.eye2:after{background-color:#FFF;height:8px;width:8px;border-radius:8px;position:absolute;top:6px;left:12px;content:""}
    .mouth{background-color:#603814;height:36px;width:106px;position:absolute;border-radius:0 0 106px 106px;top:182px;left:55px;overflow:hidden}
    .mouth:before{background-color:#FFED41;height:80px;width:205px;position:relative;display:block;border-radius:0 0 150px 150px;top:-70px;left:-50px;content:"";z-index:2;box-shadow:0 3px 0 0 rgba(50,50,50,0.15)}
    ul.teeth{list-style:none;z-index:1;position:absolute;top:-10px;left:-25px}
    ul.teeth li{float:left;height:15px;width:20px;background:#FFF;display:inline-block;border-radius:0 0 15px 15px}
    ul.teeth li:first-child,ul.teeth li:last-child{height:10px}
    .pants{background-color:#2b5b89;height:66px;position:relative;top:270px;border-radius:0 0 128px 128px;z-index:2}
    .pants:before{background-color:#2b5b89;height:58px;width:138px;display:block;position:relative;top:-58px;margin:0 auto;content:""}
    .pants:after{background-color:#224467;height:44px;width:58px;display:block;position:relative;top:-76px;border-radius:0 0 58px 58px;margin:0 auto;content:""}
    .belt-left,.belt-right{background-color:#224467;height:16px;width:70px;position:absolute;top:225px;z-index:3}
    .belt-left{left:-10px;transform:scale(1) rotate(24deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg)}
    .belt-right{right:-10px;transform:scale(1) rotate(-28deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg)}
    .belt-left:after,.belt-right:after{background-color:#2d2d2b;height:11px;width:11px;border-radius:11px;position:absolute;content:""}
    .belt-left:after{left:56px;top:3px}
    .belt-right:after{right:57px;top:3px}
    .legs .left,.legs .right{background:#224467;height:22px;width:44px;position:absolute;top:358px;z-index:1}
    .legs .left{left:60px}
    .legs .right{right:60px}
    .legs .left:after{position:absolute;content:"";height:0;width:0;border-bottom:22px solid #EC7E65;border-right:10px solid transparent}
    .legs .right:after{position:absolute;content:"";height:0;width:0;border-bottom:22px solid #EC7E65;border-left:10px solid transparent;right:0}
    .shoe-l,.shoe-r{background-color:#424242;width:52px;height:18px;position:absolute;top:380px}
    .shoe-l{left:50px;border-radius:18px 0 0 0}
    .shoe-r{right:50px;border-radius:0 18px 0 0}
    .shoe-l:after,.shoe-r:after{background-color:#2d2d2d;width:56px;height:5px;position:absolute;content:"";top:18px;left:-2px}
    .shoe-l:before{position:absolute;content:"";height:0;width:0;border-top:5px solid #224467;border-left:34px solid transparent;left:20px}
    .shoe-r:before{position:absolute;content:"";height:0;width:0;border-top:5px solid #224467;border-right:34px solid transparent;right:20px}
    .hands .left,.hands .right{background-color:#e5c034;height:100px;width:16px;position:absolute;top:242px}
    .hands .left{left:-16px;border-radius:16px 0 0 0}
    .hands .right{right:-16px;border-radius:0 16px 0 0}
    .hands .fingers-l,.hands .fingers-r{background-color:#424242;position:absolute;content:"";height:16px;width:16px;top:350px;z-index:1}
    .hands .fingers-l{left:-6px;border-radius:0 16px 0 0}
    .hands .fingers-r{right:-6px;border-radius:16px 0 0 0}
    .hands .fingers-l:after,.hands .fingers-r:after{background-color:#383838;height:16px;width:16px;content:"";border-radius:16px;position:absolute;top:15px;z-index:2}
    .hands .fingers-l:after{left:0}
    .hands .fingers-r:after{right:0}
    .hands .fingers-l:before,.hands .fingers-r:before{background-color:#2c2c2c;height:16px;width:16px;content:"";border-radius:16px;position:absolute;top:8px;z-index:1}
    .hands .fingers-l:before{left:5px}
    .hands .fingers-r:before{right:5px}
    .hands .glove-l,.hands .glove-r{background-color:#424242;position:absolute;height:36px;width:16px;border-radius:0 0 16px 16px;top:342px;z-index:3}
    .hands .glove-l{left:-15px}
    .hands .glove-r{right:-15px}
    .hands .glove-l:before,.hands .glove-r:before{position:absolute;content:"";height:0;width:0;top:-15px;border-bottom:30px solid #424242;border-left:30px solid transparent;transform:scale(1) rotate(45deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg)}
    .hands .glove-l:before{left:-7px}
    .hands .glove-r:before{right:-7px}
  5. Dan langsung anda klik Save Template, Lihat hasilnya.

3. Halaman Error 404 Not Found


  1. Cara nya sama seperti di atas
  2. Masuk pada bagian editor template , caranya pilih Menu Template -> Edit HTML.
  3. Temukan kode ini dan paste di atas kode </body>
    <b:if cond="data:blog.pageType == &quot;error_page&quot;">
        <div id="container-error">
        <div id="error-page">
          Mohon maaf, Halaman yang Anda cari tidak ditemukan!
    Kemungkinan halaman telah dihapus, atau Anda salah menuliskan URL.
        </div>
          <div id="buttonerror">
    <a href="//www.mizipedia.com/">Homepage</a></div>
        </div>
      </b:if>
  4. Lalu copas kode di bawah ini di atas kode ]]></b:skin>
    #container-error {
      text-align: center;
      z-index: 99999;
      width: 100%;
      height: 100%;
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      padding: 0;
      background-color: #3498db;
      color: #fff;
      font-size: 3rem;
      font-weight: 700;
    }
    
    #container-error h3,
    #container-error h4 {
      display: block;
      text-align: center;
      margin-bottom: 30px;
      font-size: 2rem;
      font-weight: 700;
      color: #aaa;
    }
    
    #container-error h3 {
      margin-top: 30px;
    }
    
    #error-page {
      position: relative;
      max-width: 920px;
      margin: 6% auto;
      line-height: normal;
    }
    
    #buttonerror{clear:both;position:absolute;background-color:rgba(255,255,255,.05);color:#EC7E65;position:absolute;left:0;right:0;bottom:15%;margin:auto;max-width:250px;padding:20px;z-index:99999;border-radius:10px;border:5px solid #fff;transition:all .5s}
    #buttonerror a{color:#fff;font-weight:700;font-size:1.5rem;text-transform:uppercase;letter-spacing:1px}
    #buttonerror:hover{background-color:rgba(255,255,255,1)}
    #buttonerror:hover a,#buttonerror a:hover{color:#3498db}
  5. Dan klik save template. Maka lihat hasilnya.
Jangan lupa ganti alamat URL //www.mizipedia.com/
Demikian penjelasan pada malam, selamat mencoba dan semoga bermanfaat untuk anda.

Share Google URL Shortener: Get Short URLloading short url

Bila Anda merasa memang artikel-artikel di blog ini bisa bermanfaat, maka Anda bisa membantu memberikan donasi melalui Paypal Dana hasil dari donasi akan digunakan untuk memperpanjang domain mizipedia.com - Terima kasih.

Comment Policy Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

No comments

Peraturan Berkomentar di mizipediacom
1. Berkomentarlah dengan Relevan dan Sopan
2. Jangan Spam
3. Tidak Porn dan Sara
4. Berkomentar dengan link tanpa relevan maka akan otomatis terhapus
5. Semua komentar pasti akan saya baca dan dibalas. Show Emoticon. Klik ==>

+ Follow
Join on this site

with Google Friend Connect