Membuat Halaman Error 404 Di Blogger - Dewa Blogger

Halaman

    Social Items

Buy Now
/ / / / Membuat Halaman Error 404 Di Blogger
Membuat Halaman Error 404 di Blogger - Kali ini akan memperlihatkan tutorial sederhana Cara Membuat Halaman Error 404 di Blogger. Dalam tutorial ini kita akan memakai Tag Kondisional Halaman error untuk membuatnya, alasannya yaitu dengan memakai Tag kondisional Pengerjaan tutorial ini akan lebih gampang dan halaman Error sanggup termuat dengan cepat sabagai mana mestinya, alasannya yaitu tidak memakai Redirect.

Kali ini akan memperlihatkan tutorial sederhana Cara Membuat Halaman Error Membuat Halaman Error 404 di Blogger

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 != &quot;error_page&quot;">   ... Daerah ini berisi bagian-bagian utama dalam sebuah blog ibarat main-wrapper, sidebar-wrapper, sampai footer-wrapper. Daerah ini akan diabaikan alasannya yaitu 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 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 referensi halaman 404 dengan suplemen Minion (Pure CSS)

<b:if cond="data:blog.pageType != &quot;error_page&quot;">     ... Daerah ini berisi bagian-bagian utama dalam sebuah blog ibarat main-wrapper, sidebar-wrapper, sampai footer-wrapper. Daerah ini akan diabaikan alasannya yaitu 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 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.

Membuat Halaman Error 404 Di Blogger

Membuat Halaman Error 404 di Blogger - Kali ini akan memperlihatkan tutorial sederhana Cara Membuat Halaman Error 404 di Blogger. Dalam tutorial ini kita akan memakai Tag Kondisional Halaman error untuk membuatnya, alasannya yaitu dengan memakai Tag kondisional Pengerjaan tutorial ini akan lebih gampang dan halaman Error sanggup termuat dengan cepat sabagai mana mestinya, alasannya yaitu tidak memakai Redirect.

Kali ini akan memperlihatkan tutorial sederhana Cara Membuat Halaman Error Membuat Halaman Error 404 di Blogger

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 != &quot;error_page&quot;">   ... Daerah ini berisi bagian-bagian utama dalam sebuah blog ibarat main-wrapper, sidebar-wrapper, sampai footer-wrapper. Daerah ini akan diabaikan alasannya yaitu 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 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 referensi halaman 404 dengan suplemen Minion (Pure CSS)

<b:if cond="data:blog.pageType != &quot;error_page&quot;">     ... Daerah ini berisi bagian-bagian utama dalam sebuah blog ibarat main-wrapper, sidebar-wrapper, sampai footer-wrapper. Daerah ini akan diabaikan alasannya yaitu 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 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.
CSS HTML Tips Blogger
Langganan: Posting Komentar (Atom)