Pernahkah Anda mendapatkan error page 404 pada blog?, kemungkinan ketika Anda mendapatkan error tersebut Anda memasuki area yang kosong atau postingan yang tidak ada pada blog tersebut. Biasanya setiap template memasangkan tampilan tambahan dan peringatan pada pengunjungnya bahwa apa yang mereka cari tidak ditemukan lalu terdapat pesan untuk kembali ke halaman utama.

Error 404 ini sangat sering kita jumpai, pada blog orang lain atau pada blog sendiri. Pesan error ini merupakan bawaan atau dari mesin pencari atau search engine. Pesan galat 404 atau Not Found adalah sebuah kode tanggap standar HTTP ataupun HTTPS yang menunjukkan bahwa pengunjung tetap berada pada blog kita namun blog tidak dapat menunjukkan apa yang diminta oleh pengunjung maka terjadilah error 404 ini.

Membuat custom halaman error 404
Berikut ini contoh jika ingin mengetest halaman error 404.

Coba klik link page disclaimer blog ini
https://dewaplokis.blogspot.com/p/disclaimer.html

Link diatas merupakan halaman disclaimer yang benar pada blog saya. Namun jika saya merubah salah satu huruf saja pada misalnya menambahkan huruf “t” pada kata disclaimer menjadi “disclaimert” kemudian mengunjungi link tersebut, maka pasti Anda akan menemukan halaman error 404. Apakah Anda ingin membuat halaman cutom error? Jika ingin, silahkan lanjutkan membaca tutorial ini sampai akhir, tapi kalau tidak, silahkan close saja. ☺☺☺
 

Cara Mudah Membuat Custom Page 404

Cara pertama

Masuk ke Blogger >  Pilih Setting > Search Preperences .Di sebelah kanan tab Custom page not found pilih edit

Membuat custom halaman error 404

masukkan kode dibawah ini
<style type="text/css">
#error-404 { 
border: 20px solid #1B1B1B; 
border-radius: 240px 240px 240px 240px; 
height: 240px; margin: 0 auto 40px;
text-align: center; 
transition: all 0.8s ease 0s;
width: 240px; 
} 
#error-404:hover { 
border-color: #333; 
} 
#error-404 span {
color: #FA4C29; 
font-size: 100px; 
font-weight: bold; 
line-height: 240px; 
} 
.large-heading { 
font-size: 48px; line-height: 1.2em; 
} .light-heading { 
font-weight: 400; 
} .status-msg-bg { 
background-color: transparent; 
} .sidebar-wrapper, 
.page-header { 
display: none; 
} 
.main-wrapper { 
margin-right: 0; 
} .outer-wrapper {
 min-height: 0; 
} 
.status-msg-border { 
border: 0 none; 
} 
</style>
<div id="error-404"> <span>404</span>
</div> <h2 class="large-heading" style="text-align: center;">Page not found.</h2>
<h3 class="light-heading" style="text-align: center;">Sorry, the page you were looking for on this blog does not exist.<br>You will be redirected shortly to the homepage.</h3>
<script type = "text/javascript">
BSPNF_redirect = setTimeout(function() {
location.pathname= "/"
}, 5000);
</script>
Save lalu refresh halaman blogger Anda kemuadian check hasilnya

Cara Kedua

Membuat cutom Error page 404 yang otomatis ketika terjadi kesalahan pencarian link HTML di blog Anda
Silahkan masuk terlebih dahulu ke Blogger, kemudian theme lalu ,asuk ke Edit HTML. Disin saya akan membagikan 2 pilihan style.

Style tampilan Minion

Masukkan kode CSS berikut dibawah
]]></b:skin> atau setelah <style type='text/css'>
/* CSS Custom Error Minion  */
#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} 
Perhatikan posisi CSS tiap bagiannya. Jika terdapat posisi yang tidak tepat, silahkan atur CSS
Berikutnya, letakkan kode HTML berikut ini dibawah <body>
  <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>

Style Tampilan Standar

1. Salin kode CSS dibawah ini diatas dibawah kode <style type='text/css'> atau sebelum </style>
/* Error 404 */
.container404 {
margin:8% auto 0 auto;max-width:640px;
min-width:200px;
line-height:normal;
backface-visibility:hidden;transition:all .3s;
}
.box404 {
background:#fff;
padding:20px;
font-size:100%;
color:#222;box-shadow:0 19px 38px rgba(0,0,0,0.10),0 15px 12px rgba(0,0,0,0.05);
transition:all .3s
}
.box404:hover {
box-shadow:0 3px 6px rgba(0,0,0,0.08),0 3px 6px rgba(0,0,0,0.13);
}
.box404 h2,.box404 h3 {
color:#222;display:block;
text-align:center;
font-size:1.5rem;
margin:10px auto;
font-weight:400
}
.box404 h2 {
font-size:7rem;
color:#e74c3c
}
.box404 h3 {
margin:10px auto 20px auto;
}
.box404 p {
display:block;
margin:10px 0
}
.box404 ul li {
margin:0 0 8px 20px;
list-style:initial;
list-style-type:square
}
.box404 ul li a {
color:#e74c3c;
}
.box404 ul li a:hover {
color:#000;
}
.copyright404 {
display:block;
text-align:center;
margin:auto;
font-weight:normal;
max-width:640px;
min-width:200px;
padding:20px;
border-radius:0 0 5px 5px
}
.copyright404 a,.copyright404 a:hover {
color:#000
}
@media screen and (max-width:1024px) {
.box404 h2 {
font-size:4rem;
}
.container404 {
margin:4% auto 0 auto;}}

2. Kemuadian tempatkan kode HTML berikut ini dibawah <body> atau setelah </footer>
<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<div class='container404'>
  <div class='box404'>
    <h2>404</h2>
    <h3>The page could not be found</h3>
    <p>The page you are looking for might have been removed had its name changed or is temporarily unavailable</p>
    <p>Please try the following :</p>
    <ul>
      <li>If you type the page address in the <strong>Address bar</strong>, make sure that it is spelled correctly.</li>
      <li>Click <strong><a expr:href='data:blog.homepageUrl'>here</a></strong> to return to our main page.</li>
      <li>If you were linked to this page, contact the administrator and make them aware of this issue.</li>
    </ul>
  </div>
<div class='copyright404'>
  &#169; <span id='current-year'/> <a expr:href='data:blog.homepageUrl'><data:blog.title/></a>. All Rights Reserved.
</div>
</div>
</b:if>

3. Save template dan lihat hasilnya

Demikian tutorial kali ini tentang cara membuat page costum error 404 di blogger
sumber :
https://krasnek-andreas.blogspot.co.id/2015/08/how-to-set-custom-page-not-found-on.html
http://www.arlinadzgn.com/2016/04/membuat-halaman-error-404-di-blogger.html

Membuat Custom Error Page 404 Di Blogger

Pernahkah Anda mendapatkan error page 404 pada blog?, kemungkinan ketika Anda mendapatkan error tersebut Anda memasuki area yang kosong atau postingan yang tidak ada pada blog tersebut. Biasanya setiap template memasangkan tampilan tambahan dan peringatan pada pengunjungnya bahwa apa yang mereka cari tidak ditemukan lalu terdapat pesan untuk kembali ke halaman utama.

Error 404 ini sangat sering kita jumpai, pada blog orang lain atau pada blog sendiri. Pesan error ini merupakan bawaan atau dari mesin pencari atau search engine. Pesan galat 404 atau Not Found adalah sebuah kode tanggap standar HTTP ataupun HTTPS yang menunjukkan bahwa pengunjung tetap berada pada blog kita namun blog tidak dapat menunjukkan apa yang diminta oleh pengunjung maka terjadilah error 404 ini.

Membuat custom halaman error 404
Berikut ini contoh jika ingin mengetest halaman error 404.

Coba klik link page disclaimer blog ini
https://dewaplokis.blogspot.com/p/disclaimer.html

Link diatas merupakan halaman disclaimer yang benar pada blog saya. Namun jika saya merubah salah satu huruf saja pada misalnya menambahkan huruf “t” pada kata disclaimer menjadi “disclaimert” kemudian mengunjungi link tersebut, maka pasti Anda akan menemukan halaman error 404. Apakah Anda ingin membuat halaman cutom error? Jika ingin, silahkan lanjutkan membaca tutorial ini sampai akhir, tapi kalau tidak, silahkan close saja. ☺☺☺
 

Cara Mudah Membuat Custom Page 404

Cara pertama

Masuk ke Blogger >  Pilih Setting > Search Preperences .Di sebelah kanan tab Custom page not found pilih edit

Membuat custom halaman error 404

masukkan kode dibawah ini
<style type="text/css">
#error-404 { 
border: 20px solid #1B1B1B; 
border-radius: 240px 240px 240px 240px; 
height: 240px; margin: 0 auto 40px;
text-align: center; 
transition: all 0.8s ease 0s;
width: 240px; 
} 
#error-404:hover { 
border-color: #333; 
} 
#error-404 span {
color: #FA4C29; 
font-size: 100px; 
font-weight: bold; 
line-height: 240px; 
} 
.large-heading { 
font-size: 48px; line-height: 1.2em; 
} .light-heading { 
font-weight: 400; 
} .status-msg-bg { 
background-color: transparent; 
} .sidebar-wrapper, 
.page-header { 
display: none; 
} 
.main-wrapper { 
margin-right: 0; 
} .outer-wrapper {
 min-height: 0; 
} 
.status-msg-border { 
border: 0 none; 
} 
</style>
<div id="error-404"> <span>404</span>
</div> <h2 class="large-heading" style="text-align: center;">Page not found.</h2>
<h3 class="light-heading" style="text-align: center;">Sorry, the page you were looking for on this blog does not exist.<br>You will be redirected shortly to the homepage.</h3>
<script type = "text/javascript">
BSPNF_redirect = setTimeout(function() {
location.pathname= "/"
}, 5000);
</script>
Save lalu refresh halaman blogger Anda kemuadian check hasilnya

Cara Kedua

Membuat cutom Error page 404 yang otomatis ketika terjadi kesalahan pencarian link HTML di blog Anda
Silahkan masuk terlebih dahulu ke Blogger, kemudian theme lalu ,asuk ke Edit HTML. Disin saya akan membagikan 2 pilihan style.

Style tampilan Minion

Masukkan kode CSS berikut dibawah
]]></b:skin> atau setelah <style type='text/css'>
/* CSS Custom Error Minion  */
#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} 
Perhatikan posisi CSS tiap bagiannya. Jika terdapat posisi yang tidak tepat, silahkan atur CSS
Berikutnya, letakkan kode HTML berikut ini dibawah <body>
  <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>

Style Tampilan Standar

1. Salin kode CSS dibawah ini diatas dibawah kode <style type='text/css'> atau sebelum </style>
/* Error 404 */
.container404 {
margin:8% auto 0 auto;max-width:640px;
min-width:200px;
line-height:normal;
backface-visibility:hidden;transition:all .3s;
}
.box404 {
background:#fff;
padding:20px;
font-size:100%;
color:#222;box-shadow:0 19px 38px rgba(0,0,0,0.10),0 15px 12px rgba(0,0,0,0.05);
transition:all .3s
}
.box404:hover {
box-shadow:0 3px 6px rgba(0,0,0,0.08),0 3px 6px rgba(0,0,0,0.13);
}
.box404 h2,.box404 h3 {
color:#222;display:block;
text-align:center;
font-size:1.5rem;
margin:10px auto;
font-weight:400
}
.box404 h2 {
font-size:7rem;
color:#e74c3c
}
.box404 h3 {
margin:10px auto 20px auto;
}
.box404 p {
display:block;
margin:10px 0
}
.box404 ul li {
margin:0 0 8px 20px;
list-style:initial;
list-style-type:square
}
.box404 ul li a {
color:#e74c3c;
}
.box404 ul li a:hover {
color:#000;
}
.copyright404 {
display:block;
text-align:center;
margin:auto;
font-weight:normal;
max-width:640px;
min-width:200px;
padding:20px;
border-radius:0 0 5px 5px
}
.copyright404 a,.copyright404 a:hover {
color:#000
}
@media screen and (max-width:1024px) {
.box404 h2 {
font-size:4rem;
}
.container404 {
margin:4% auto 0 auto;}}

2. Kemuadian tempatkan kode HTML berikut ini dibawah <body> atau setelah </footer>
<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<div class='container404'>
  <div class='box404'>
    <h2>404</h2>
    <h3>The page could not be found</h3>
    <p>The page you are looking for might have been removed had its name changed or is temporarily unavailable</p>
    <p>Please try the following :</p>
    <ul>
      <li>If you type the page address in the <strong>Address bar</strong>, make sure that it is spelled correctly.</li>
      <li>Click <strong><a expr:href='data:blog.homepageUrl'>here</a></strong> to return to our main page.</li>
      <li>If you were linked to this page, contact the administrator and make them aware of this issue.</li>
    </ul>
  </div>
<div class='copyright404'>
  &#169; <span id='current-year'/> <a expr:href='data:blog.homepageUrl'><data:blog.title/></a>. All Rights Reserved.
</div>
</div>
</b:if>

3. Save template dan lihat hasilnya

Demikian tutorial kali ini tentang cara membuat page costum error 404 di blogger
sumber :
https://krasnek-andreas.blogspot.co.id/2015/08/how-to-set-custom-page-not-found-on.html
http://www.arlinadzgn.com/2016/04/membuat-halaman-error-404-di-blogger.html
Load Comments
Disqus Codes
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parse Box

strong em u strike
pre code pre code spoiler
embed

Subscribe Our Newsletter