Tips Blogger - Membuat Halaman Error 404 di Blog Lebih Menarik – Sebelumnya kita sudah membahas
mengenai Cara Memindahkan Page Not Found Ke Halaman Lain Di Blog, kali ini saya
akan membagikan tutorial mengenai bagaimana cara Membuat halaman Error 404 di
blog Lebih menarik lagi. Karena di dalam tutorial kali ini kita akan menggunakan Tag Kondisional Halaman Error utuk membuatnya, karena dengan
menggunakan teg kondisional, mengatasi halaman Error 404 tersebut
akan lebih mudah dan halaman Error akan termuat dengan cepat sebagaimana
mestinya, karena tidak menggunakan Redirect seperti tutorial sebelumnya.
Jika
menggunakan Redirect maka halaman Error 404 atau Page Not Fund akan berpindah
ke halaman lain yang benar ketika di buka oleh pengunjung, sedangkan jika
menggunakan Tag Kondisioner Halaman Error tersebut akan tetap menampilkan
Deretan Link yang Error namun dengan Teman yang luarbiasa keren. Silahkan anda
coba saja tutorial kali ini, berikut ini informasi selengkapnya.
Membuat Halaman Error atau Page not found Di Blog
1.
pertama-tama kita bungkus dulu halaman yang tidak akan tampil pada halaman
Error 404 / halaman kecuali pada halaman Error., berikut ini konsepnya:
HTML
<body>
<b:if cond="data:blog.pageType != "error_page"">... 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 == "error_page""><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>
2.
Sisanya tinggal kita tambahkan kode CSS nya untuk memper Keren halaman Blog nya.
CSS
/* CSS Error by Arlina Design */
#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}
Contoh Demo : http://codepen.io/arlinadesign/full/zqJQPQ/
Berikut
halaman 404 dengan tambahan Minion (Pure CSS)
HTML
<b:if cond="data:blog.pageType != "error_page""> ... 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 == "error_page""> <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
/* CSS Custom Error Minion by arasdesign */
#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}
Contoh Demo > http://codepen.io/arlinadesign/full/aNarGo/
Maka
halaman 404 di blog sobat akan menampilkan halaman yang super keren dengan tambahan
Minion.
Demikianlah
informasi mengenai Membuat Halaman Error 404 di Blog Lebih Menarik, yang dapat
saya sampaikan. Jangan lupa berkomentar dan selamat mencoba.
EmoticonEmoticon