Cara Membuat Error 404 di blog 2015 dengan CSS tanpa Java Script

Salam Blogger Sejati,,,,,,mumpung saya tidak ada ide lain untuk membuat artikel, ada ide sedikit untuk Cara Membuat Error 404 di blog 2015 dengan CSS tanpa Java Script. unutuk CSS dan script nya anda bisa meng copy paste code 404 di bawah ini.

karena kebanyakan website besar ataupun kecil...... besar kemungkinan semua menggunakan html yang satu ini. untuk menghindari BUG yang tidak di inginkan.. karena kebanyakan website sekarang tanpa erorr 404/403 html. banyak hacker yang ingin merusak isi semua website tersebut.

Dan Untuk Code nya ambil dan copy/paste di bawah ini : pada html template pas tepat di bawah

<body>

<title>404 - Halaman tidak ditemukan! | <data:blog.title/></title><b:if cond='data:blog.pageType != "error_page"'>

Dan code CSS nya copy tepat pada

]]></b:skin>

CODE CSS :

#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}

Dan Untuk HTML nya... copy di bawah ini tepatpada :

<body>

Code script error html

</body>

Copy semua code di bawah ini :

<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 sndclient@gmail.com :D
</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>

Jika ada code yang kurang atau code error di html template anda.
Silahkan countac langsung facebook di alamat Link
Jika code di atas sukses dan berjalan jika anda merasa senang dan puas.... silahkan berkomentar di bawah ini. sekian dan terima kasih atas kunjungan, follow, komentar nya.

Wassalamu Alaikum W.R.W.B
Author : Taufik Hidayat

Minima Flat Templates

Monday, January 5, 2015

Cara Membuat Error 404 di blog 2015 dengan CSS tanpa Java Script

2 comments:

Popular Posts

Label