Cara membuat halaman Error 404 paling keren

Selamat siang sobat Blog Irvan Efendy yang tercinta,.. hehehee
Untuk postingan kali ini saya akan membahas tentang Cara membuat halaman Error 404 di blog mungkin tutor ini sudah gak asing lagi buat sobat karena tutor ini sudah sangat popular/sudah banyak yang membagikan tetapi sobat coba dulu Tutor yang satu ini karena tampilan nya beda dengan yang lain,.. wkwkk

Halaman Error 404 biasa anda temukan atau anda lihat pada sebuah url blog atau website yang tidak ada keberadaannya.
Alasannya bisa karena :

URL yang dituju sudah dihapus oleh Admin
URL sudah Expired (Kadaluarsa/Rusak)
atau memang belum pernah dibuat sama sekali.

DEMO Klik disini!!!

Simak langkah² dibawah ini:

1. Login ke akun blogger sobat

2. Klik Template » Edit HTML

3. Kemudian tekan CTRL+F cari kode ]]></b:skin> atau </style>

4. Lalu tambahkan kode CSS berikut ini tepat diatas kode ]]></b:skin> atau </style>

/* Error 404 by Irvan Efendy 
*/ URL: irvan-efendy.blogspot.com
#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}
-------------------------------------------*/

5. Tambahkan kode berikut ini tepat di bawah kode <body>

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

6. Copy semua kode dibawah ini lalu paste kan tepat di atas kode </body>

<b:else/>
<div id='error-page'>
  <div class='pesan-eror'>
    Sepertinya cuaca sedang buruk atau anda belum membayar tagihan Listrik !!!
 Segera Hubungi admin untuk melaporkan URL/Channel kesayangan anda yang rusak karena petir ke irvanefendy.info
  </div>
  <div class='ghost'/>
  <div class='tv tv-60'>
    <div class='tv-frame'>
      <div class='tv-viewport'>
        <div class='tv-viewport-size'>
          <h1>
            CHANNEL TIDAK DITEMUKAN!
          </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>

7. Kemudian Simpan Template sobat dan lihat hasil nya,..

Semoga bermanfaat,..
Jangan lupa corat coret dibawah ya agan^{2^,...}

Advertisement

Sunday, May 25, 2014

Cara membuat halaman Error 404 paling keren

Simak langkah² dibawah ini:

Advertisement

Advertisement

Category

Advertisement

Sunday, May 25, 2014

Cara membuat halaman Error 404 paling keren

Simak langkah2 dibawah ini:

Advertisement

Advertisement

Category

Simak langkah² dibawah ini: