Error 404 Page Đẹp Phong Các Minion

Trang 404 là một trang thiết yếu cho blog của mỗi blogger, trang 404 giúp báo lỗi cho người dùng không tìm thấy thông tin hoặc thông tin bị xóa. Nhưng bây giờ đã phát triển hơn nhiều, chúng ta không cần một trang báo lỗi 404 bình thường, chúng ta muốn trang trí cho nó đẹp hơn, thân thiện lấy điểm người dùng hơn. Vì vậy mình xin chia sẽ code tạo Page 404 đẹp cho blogspot phong cách minion rất thân thiện.

Tao Trang Loi 404 Dep Cho Blogspot Phong Cach Minion

 

Các Bước Tạo Trang Lỗi 404 ( Error 404 Page )

Bước 1: Các bạn copy đoạn code bên dưới để vào trước ]]></b:skin>

This is box title
/* 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:#0dea99;color:#fff}

#buttonerror{clear:both;position:absolute;background-color:rgba(255,255,255,.05);color:#0dea99;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:#0dea99}

.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 #0dea99;border-right:10px solid transparent;left:0}

.legs .right:after{position:absolute;content:””;height:0;width:0;border-bottom:22px solid #0dea99;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}

Bước 2: Sau đó tìm </body> và chèn đoạn code bên dưới lên trên hoặc dưới nó

This is box title
<body><b:if cond=”data:blog.pageType != &quot;error_page&quot;”></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 href=”//howktech.com”>Homepage</a></div></div></b:if></body>

Bước 3: Lưu template lại và kiểm tra

Cảm Ơn Các Bạn Đã Đọc Bài Viết.

Hãy Ghé Thăm Các Bài Viết Của Howktech Nếu Bạn Thích

Bạn Đang Cần Công Cụ Hỗ Trợ SEO Cho Blog:

Xem Ngay

LEAVE A REPLY

Please enter your comment!
Please enter your name here