» » » » Tambahkan Halaman Error 404 di Blogger

2:52 AM 0 , ,
A+ A-
Tambahkan Halaman Error 404 di Blogger - Hallo sobat ✋buat hari pertama posting Coretan Jawa akan membeberkan cara membuat halaman error 404 atau biasa di sebut page not found. Caranya cukup mudah karena kita akan menggunakan tag kondisional agar dalam action error 404 ini tidak redirect ke halaman lain.
Tambahkan Halaman Error 404 di Blogger Coretan Jawa

Tambahkan Halaman Error 404 di Blogger

Langkah - langkah menambahkan halaman error 404 di blogger  kita wadahi dulu halaman error yang akan tidak tampil, berikut langkahnya :

 
<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 id="error-page">

      Tuliskan sesuatu di sini. Bagian ini hanya akan tampil saat halaman tidak ditemukan.

    </div>

    </div>

  </b:if>

</body>

Lalu tambahkan CSS di bawah ini untuk memperindah halaman 404

/* CSS Error 404 */
#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}


Di bawah ini contoh halaman 404 dengan pure CSS

 

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

/* CSS Custom Error Minion by coretan */

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


 Demikian tutorial Tambahkan Halaman Error 404 di Blogger, Semoga bermanfaat.

Share to:

Next
Newer Post
Previous
This is the last post.

Post a Comment

Subscribe to: Post Comments (Atom)
 
Top