Membuat Halaman Error 404 di Blogger
Berikut inilah cara sederhana untuk Membuat Halaman Error 404, pertama kita bungkus dulu halaman yang tidak akan tampil pada halaman Error 404 / halaman kecuali pada halaman Error, berikut konsepnya :
<body> <b:if cond="data:blog.pageType != "error_page""> ... Daerah ini berisi bagian-bagian utama dalam sebuah blog ibarat main-wrapper, sidebar-wrapper, sampai footer-wrapper. Daerah ini akan diabaikan alasannya 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 ketika halaman tidak ditemukan. </div> </div> </b:if> </body>Sisanya tinggal menambahkan CSS untuk mempercantik Halaman 404
/* CSS Error by */ #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}Berikut pola halaman 404 dengan komplemen Minion (Pure CSS)
<b:if cond="data:blog.pageType != "error_page""> ... Daerah ini berisi bagian-bagian utama dalam sebuah blog ibarat main-wrapper, sidebar-wrapper, sampai footer-wrapper. Daerah ini akan diabaikan alasannya 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 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}Demikian tutorial Membuat Halaman Error 404 di Blogger, selamat mencoba.
0 Response to "Membuat Halaman Error 404 Di Blogger"
Post a Comment