Cara Membuat Laman 404/Page Nout Found di Blog Keren

Cara Membuat Laman 404/Page Nout Found di Blog Keren

sobat bloggers, pada kesempatan yang baik ini akan saya share cara membuat atau bikin halaman eror 404 di blog super keren. Laman error 404 biasanya di temukan pada artikel yang sudah di hapus, rusak atau belum pernah di buat sebelumnya pada sebuah blog. Untuk desain laman error 404 ini di guanakan kode css3 biar kelihatan keren dan laman ini bekerja pada browser mozila untuk chrome efek awan/cloud tidak muncul. Nah untuk membuat laman eror 404 sangatlah mudah, silahkan anda ikuti tipsnya di bawah ini:

Tips atau Cara Membuat Laman 404/Page Nout Found di Blog Keren

• login ke akun blog Anda
• pada menu dashboard >> pilih edit html
• cari salah satu kode ini lalu copy script css di bawah ini dan simpan di atas ]]></b:skin> atau</style>

#error-page{background:-webkit-linear-gradient(top,#cbebdb 0,#3794c0 120%);background:-moz-linear-gradient(top,#cbebdb 0,#3794c0 120%);background:-o-linear-gradient(top,#cbebdb 0,#3794c0 120%);background:-ms-linear-gradient(top,#cbebdb 0,#3794c0 120%);background:linear-gradient(top,#cbebdb 0,#3794c0 120%);position:fixed!important;position:absolute;text-align:center;top:0;right:0;bottom:0;left:0;z-index:99999}h1{font-size:20px!important;margin:0!important}.tv{display:inline-block;vertical-align:bottom;margin:10px 300px 20px}.tv-60 .tv-frame{width:37.1em;height:25.7em}.tv-frame{background:#222;border:1px solid #222;width:100%;height:100%;padding:5px}.tv-viewport{font-size:15px;background:#444;background:#4c4c4c;background:-moz-linear-gradient(-45deg,#4c4c4c 0,#2c2c2c 46%,#2b2b2b 53%,#333 100%);background:-webkit-gradient(linear,left top,right bottom,color-stop(0%,#4c4c4c),color-stop(46%,#2c2c2c),color-stop(53%,#2b2b2b),color-stop(100%,#333));background:-webkit-linear-gradient(-45deg,#4c4c4c 0,#2c2c2c 46%,#2b2b2b 53%,#333 100%);background:-o-linear-gradient(-45deg,#4c4c4c 0,#2c2c2c 46%,#2b2b2b 53%,#333 100%);background:-ms-linear-gradient(-45deg,#4c4c4c 0,#2c2c2c 46%,#2b2b2b 53%,#333 100%);background:linear-gradient(135deg,#4c4c4c 0,#2c2c2c 46%,#2b2b2b 53%,#333 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4c4c4c',endColorstr='#333333',GradientType=1);width:100%;height:100%;position:relative}.tv-viewport-size{color:#f8f8f8;text-align:center;width:100%;margin-top:10px;display:block;height:20px;position:absolute;font-size:1.1em;font-weight:bolder}.tv-stand{width:50%;height:.6em;background:#333;margin:0 auto}.eror{color:#00a5ad;font-size:100px;animation-name:blinker;animation-duration:1.75s;animation-timing-function:linear;animation-iteration-count:infinite;-webkit-animation-name:blinker;-webkit-animation-duration:1.75s;-webkit-animation-timing-function:linear;-webkit-animation-iteration-count:infinite}@-moz-keyframes blinker{0%{opacity:1.0}50%{opacity:.0}100%{opacity:1.0}}@-webkit-keyframes blinker{0%{opacity:1.0}50%{opacity:.0}100%{opacity:1.0}}@keyframes blinker{0%{opacity:1.0}50%{opacity:.0}100%{opacity:1.0}}span[class*="l-"]{height:4px;width:4px;background:#00909e;display:inline-block;margin:12px 2px;border-radius:100%;-webkit-border-radius:100%;-moz-border-radius:100%;-webkit-animation:loader 4s infinite;-webkit-animation-timing-function:cubic-bezier(0.030,0.615,0.995,0.415);-webkit-animation-fill-mode:both;-moz-animation:loader 4s infinite;-moz-animation-timing-function:cubic-bezier(0.030,0.615,0.995,0.415);-moz-animation-fill-mode:both;-ms-animation:loader 4s infinite;-ms-animation-timing-function:cubic-bezier(0.030,0.615,0.995,0.415);-ms-animation-fill-mode:both;animation:loader 4s infinite;animation-timing-function:cubic-bezier(0.030,0.615,0.995,0.415);animation-fill-mode:both}span.l-1{-webkit-animation-delay:1s;animation-delay:1s;-ms-animation-delay:1s;-moz-animation-delay:1s}span.l-2{-webkit-animation-delay:.8s;animation-delay:.8s;-ms-animation-delay:.8s;-moz-animation-delay:.8s}span.l-3{-webkit-animation-delay:.6s;animation-delay:.6s;-ms-animation-delay:.6s;-moz-animation-delay:.6s}span.l-4{-webkit-animation-delay:.4s;animation-delay:.4s;-ms-animation-delay:.4s;-moz-animation-delay:.4s}span.l-5{-webkit-animation-delay:.2s;animation-delay:.2s;-ms-animation-delay:.2s;-moz-animation-delay:.2s}span.l-6{-webkit-animation-delay:0;animation-delay:0;-ms-animation-delay:0;-moz-animation-delay:0}@-webkit-keyframes loader{0%{-webkit-transform:translateX(-30px);opacity:0}25%{opacity:1}50%{-webkit-transform:translateX(30px);opacity:0}100%{opacity:0}}@-moz-keyframes loader{0%{-moz-transform:translateX(-30px);opacity:0}25%{opacity:1}50%{-moz-transform:translateX(30px);opacity:0}100%{opacity:0}}@-keyframes loader{0%{-transform:translateX(-30px);opacity:0}25%{opacity:1}50%{-transform:translateX(30px);opacity:0}100%{opacity:0}}@-ms-keyframes loader{0%{-ms-transform:translateX(-30px);opacity:0}25%{opacity:1}50%{-ms-transform:translateX(30px);opacity:0}100%{opacity:0}}.pesan-eror{padding-left:3px;width:80%;margin:10px auto 40px;background:#54a5c5;color:#fff;font-size:15px;border-radius:1%;position:relative;text-alignt:justify;padding:5px}.pesan-eror::after{content:" ";width:0;height:0;bottom:-17px;border-color:#54a5c5 transparent transparent;border-style:solid;border-width:20px 20px 0;position:absolute;left:5%}.ghost{margin-left:15%;background-image:-webkit-linear-gradient(45deg,transparent 50%,#2c2c2c 50%),-webkit-linear-gradient(135deg,transparent 50%,#2c2c2c 50%),-webkit-linear-gradient(#2c2c2c 50%,#2c2c2c 50%);background-image:-moz-linear-gradient(45deg,transparent 50%,#2c2c2c 50%),-moz-linear-gradient(315deg,transparent 50%,#2c2c2c 50%),-moz-linear-gradient(#2c2c2c 50%,#2c2c2c 50%);background-image:-o-linear-gradient(45deg,transparent 50%,#2c2c2c 50%),-o-linear-gradient(135deg,transparent 50%,#2c2c2c 50%),-o-linear-gradient(#2c2c2c 50%,#2c2c2c 50%);background-image:-ms-linear-gradient(45deg,transparent 50%,#2c2c2c 50%),-ms-linear-gradient(135deg,transparent 50%,#2c2c2c 50%),-ms-linear-gradient(#2c2c2c 50%,#2c2c2c 50%);background-image:linear-gradient(45deg,transparent 50%,#2c2c2c 50%),linear-gradient(315deg,transparent 50%,#2c2c2c 50%),linear-gradient(#2c2c2c 50%,#2c2c2c 50%);background-position:50% 100%,50% 100%,50% 0;background-repeat:repeat-x;-webkit-background-size:1em 1em;-moz-background-size:1em 1em;background-size:1em 1em;position:relative;margin-top:1.5em;height:1.5em;width:3em;animation-name:floating;-webkit-animation-name:floating;animation-duration:1.5s;-webkit-animation-duration:1.5s;animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite}@keyframes floating{0%{transform:translateY(0%)}50%{transform:translateY(8%)}100%{transform:translateY(0%)}}@-webkit-keyframes floating{0%{-webkit-transform:translateY(0%)}50%{-webkit-transform:translateY(8%)}100%{-webkit-transform:translateY(0%)}}.ghost:after,.ghost:before{background-image:-webkit-radial-gradient(transparent 35%,#2c2c2c 35%);background-image:-moz-radial-gradient(transparent 35%,#2c2c2c 35%);background-image:-o-radial-gradient(transparent 35%,#2c2c2c 35%);background-image:-ms-radial-gradient(transparent 35%,#2c2c2c 35%);background-image:radial-gradient(transparent 35%,#2c2c2c 35%);border-top:.5em solid #2c2c2c;content:'';height:1em;position:absolute;top:-1.5em;width:1em}.ghost:after{background-position:75% 75%;border-left:.5em solid #2c2c2c;border-radius:3em 0 0 0;left:0}.ghost:before{background-position:0 100%;border-right:.5em solid #2c2c2c;border-radius:0 3em 0 0;right:0}.wrapper{width:150px;height:150px;position:absolute;top:calc(30% - 75px);left:calc(80% - 75px)}.cloud{position:absolute;bottom:12px;left:8px;z-index:2;opacity:0;animation:cloud 10s 0s linear infinite}.cloud .cloud1:not(.c_shadow) ul li{animation:cloudi 10s .1s linear infinite}.cloud .cloud1:not(.c_shadow):before{animation:cloudi 10s 0s linear infinite}.cloud_s{position:absolute;bottom:70px;left:150px;transform:scale(0.7,0.7) matrix(-1,0,0,1,0,0);z-index:1;opacity:0;animation:cloud_s 10s 0s linear infinite}.cloud_s .c_shadow{transform:scale(1.02,1.02)}.cloud_vs{position:absolute;bottom:90px;left:30px;transform:scale(0.5,0.5);z-index:0;opacity:0;animation:cloud_vs 10s 0s linear infinite}.c_shadow{z-index:4!important;left:-5px;bottom:-3px!important}.c_shadow:before{background:#33495f!important}.c_shadow ul li{width:60px!important;height:60px!important;background:#33495f!important;float:left;position:absolute;bottom:-2px!important;border-radius:360px}.c_shadow ul li:nth-child(2){width:80px!important;height:80px!important;background:#33495f!important;float:left;border-radius:360px;position:absolute;bottom:16px!important;left:25px!important}.c_shadow ul li:nth-child(3){width:70px!important;height:70px!important;background:#33495f!important;float:left;border-radius:360px;position:absolute;bottom:6px!important;left:60px!important}.c_shadow ul li:last-child{width:60px!important;height:60px!important;background:#33495f!important;float:left;border-radius:360px;position:absolute;bottom:0;left:90px}.cloud1{position:absolute;bottom:0;z-index:5}.cloud1:before{content:'';position:absolute;bottom:0;left:28px;width:90px;height:20px;background:#fff}.cloud1 ul{list-style:none;margin:0;padding:0}.cloud1 ul li{width:50px;height:50px;background:#fff;float:left;border-radius:360px}.cloud1 ul li:nth-child(2){width:70px;height:70px;background:#fff;float:left;border-radius:360px;position:absolute;bottom:18px;left:25px}.cloud1 ul li:nth-child(3){width:60px;height:60px;background:#fff;float:left;border-radius:360px;position:absolute;bottom:8px;left:60px}.cloud1 ul li:last-child{width:50px;height:50px;background:#fff;float:left;border-radius:360px;position:absolute;bottom:0;left:90px}.thunder{position:absolute;bottom:100px;left:65px;width:12px;height:12px;background:#f9db62;transform:skew(-25deg);opacity:0;animation:thunder 10s 0s linear infinite}.thunder:before{content:'';position:absolute;top:11px;left:0;width:25px;height:8px;background:#f9db62}.thunder:after{content:'';position:absolute;width:0;height:0;top:18px;right:-14px;border-left:5px solid transparent;border-right:5px solid transparent;border-top:20px solid #f9db62;transform:skew(5deg)}@keyframes cloud{0%{transform:scale(0.8);left:120px;bottom:35px;opacity:0}2%{opacity:1}3.5%{bottom:35px;left:10px;opacity:1}16%{transform:scale(0.8)}18%{transform:scale(0.95)}19%{transform:scale(0.9)}48%{opacity:1;bottom:35px}50%{bottom:70px}96%{opacity:1}100%{opacity:0;bottom:70px;left:10px}}@keyframes cloud_s{0%{transform:scale(0.6);opacity:0;bottom:40px;left:18px}23%{opacity:0}24%{opacity:1;bottom:40px;left:30px}28%{opacity:1;bottom:85px;left:60px}32%{transform:scale(0.6)}34%{transform:scale(0.75)}35%{transform:scale(0.7)}48%{opacity:1}49%{opacity:0}100%{transform:scale(0.7);opacity:0;bottom:85px;left:60px}}@keyframes cloud_vs{0%{opacity:0;bottom:85px;left:60px}39%{opacity:0}40%{opacity:1;bottom:85px;left:60px}42%{bottom:125px;left:10px}43%{bottom:120px;left:15px}48%{opacity:1}49%{opacity:0}100%{opacity:0;bottom:120px;left:15px}}@keyframes cloudi{0%{background:#fff}56%{background:#fff}57%{background:#92a4b6}100%{background:#92a4b6}}@keyframes thunder{0%{opacity:0;bottom:100px;left:65px}62%{opacity:0;bottom:100px;left:65px}64%{opacity:1;bottom:50px;left:60px}65%{opacity:1;bottom:55px;left:61px}72%{opacity:1;bottom:55px;left:61px}73%{opacity:0}100%{opacity:0;bottom:55px}}@keyframes fade_in{0%{opacity:0}8%{opacity:1}9%{opacity:1}11%{opacity:1}12%{opacity:0}100%{oapcity:0}}.box{width:20%;cursor:pointer;border-radius:5px;background-color:#e14d42;margin:0 auto;font-size:18px;color:#fff;padding:5px;text align:center position:fixed!important;top:20%;left:12%}.box:hover{opacity:.7}.box a{color:#fff!important;text-decoration:none}

• Anda cari kode <body> , lalu copy kode berikut dan taruh tepat di bawah kode <body>

<b:if cond='data:blog.pageType != &quot;error_page&quot;'>

• cari lagi kode </body> , lalu copy kode di bawah ini dan taruh di atas kode </body>

<b:else/>
<div id='error-page'>
  <div class='pesan-eror'>
    Sepertinya Artikel yang Anda cari tidak ada atau sudah terhapus! Silahkan kembali ke menu home page blog untuk mencari artikel lainnya. Jika ada masalah silahkan kontak saya di putrakefa@gmail.com :)
  <div class='ghost'/>
  <div class='tv tv-60'>
    <div class='tv-frame'>
      <div class='tv-viewport'>
        <div class='tv-viewport-size'>
          <h1>
           LAMAN/ARTIKEL TIDAK DI TEMUKAN!
          </h1>
          <br/>
          <span class='eror'>
            404
          </span>
          <br/>
          sedang mencari sinyal
          <br/>
          <span class='l-1'/>
          <span class='l-2'/>
          <span class='l-3'/>
          <span class='l-4'/>
          <span class='l-5'/>
          <span class='l-6'/>
        </div>
      </div>
    </div>
    <div class='tv-stand'>
    </div>
  </div>
  <div class='wrapper'>
    <div class='cloud'>
      <div class='cloud1'>
        <ul>
          <li/>
          <li/>
          <li/>
          <li/>
        </ul>
      </div>
      <div class='cloud1 c_shadow'>
        <ul>
          <li/>
          <li/>
          <li/>
          <li/>
        </ul>
      </div>
    </div>
    <div class='cloud_s'>
      <div class='cloud1'>
        <ul>
          <li/>
          <li/>
          <li/>
          <li/>
        </ul>
      </div>
      <div class='cloud1 c_shadow'>
        <ul>
          <li/>
          <li/>
          <li/>
          <li/>
        </ul>
      </div>
    </div>
    
    <div class='cloud_vs'>
      <div class='cloud1'>
        <ul>
          <li/>
          <li/>
          <li/>
          <li/>
        </ul>
      </div>
      <div class='cloud1 c_shadow'>
        <ul>
          <li/>
          <li/>
          <li/>
          <li/>
        </ul>
      </div>
    </div>
    <div class='thunder'/>
  </div>
  <a expr:href='data:blog.homepageUrl'>
    <div class='box'>
      Home
    </div>
  </a>
</div>
</b:if>

• Simpan template Anda :)
• untuk demonya silahkan anda ketik url blog anda seperti ini http://anaktimor-17.blogspot.com/eror404
• /eror404 bisa anda ganti dengan huruf atau angka terserah Anda. :)
• semoga berhasil yo!!!

sekian artikel Cara Membuat Laman 404/Page Nout Found di Blog Keren, semoga bermamfaat !! jangan lupa kasi komentya mas bro/sista.. :) :) :)