Tạo trang báo lỗi 404 hiệu ứng 3D bằng CSS tuyệt đẹp cho Blogspot | RIUSGREY

Tạo trang báo lỗi 404 hiệu ứng 3D bằng CSS tuyệt đẹp cho Blogspot | RIUSGREY

RIUS GREY IT@riusgrey đã đăng
Hiện có lượt xem và 2 bình luận

Chi tiết

Liên quan

Nhận xét

Điều hướng

Hướng dẫn

Mình đã quay trở lại rồi đây hôm nay mình sẽ hướng dẫn các tạo trang 404 cho dân IT

Các bước thực hiện

Bước 1. Truy cập vào giao diện chỉnh sửa HTML của Blogspot.
Bước 2. Tìm thẻ <body> hoặc <body

Copy code sau và dán vào sau thẻ mở đó.
<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<style type='text/css'>
#grawrap,.site-wrapperiu,.back-to-top,.footer-top,#colophoniu{display:none;}
body,html{overflow:hidden;margin:0;padding:0;width:100%;min-height:100vh;}
.hidden{display:none}body{background:#f6fae1;overflow:hidden}.u-isVisuallyHidden{width:1px;height:1px;padding:0;margin:-1px;border:0;position:absolute;clip:rect(0 0 0 0);overflow:hidden}.footer{position:fixed;right:0;bottom:0;left:0}.withanes{display:block;position:absolute;right:5px;bottom:5px;width:24px;height:32px}.withanes:after{content:'';position:absolute;top:-2px;left:-2px;width:2px;height:2px;box-shadow:8px 2px #795f41,10px 2px #795f41,12px 2px #795f41,14px 2px #795f41,16px 2px #795f41,18px 2px #795f41,6px 4px #795f41,8px 4px #795f41,10px 4px #795f41,12px 4px #795f41,14px 4px #795f41,16px 4px #795f41,18px 4px #795f41,20px 4px #795f41,4px 6px #795f41,6px 6px #795f41,8px 6px #e9d8bc,10px 6px #795f41,12px 6px #795f41,14px 6px #795f41,16px 6px #795f41,18px 6px #cbb490,20px 6px #795f41,22px 6px #795f41,4px 8px #795f41,6px 8px #e9d8bc,8px 8px #e0c9a4,10px 8px #e0c9a4,12px 8px #e0c9a4,14px 8px #e0c9a4,16px 8px #e0c9a4,18px 8px #cbb490,20px 8px #cbb490,22px 8px #795f41,2px 10px #7e6f5d,4px 10px #e9d8bc,6px 10px #e0c9a4,8px 10px #e0c9a4,10px 10px #e0c9a4,12px 10px #e0c9a4,14px 10px #e0c9a4,16px 10px #e0c9a4,18px 10px #e0c9a4,20px 10px #cbb490,22px 10px #cbb490,24px 10px #7e6f5d,2px 12px #7e6f5d,4px 12px #e9d8bc,6px 12px #e0c9a4,8px 12px #e0c9a4,10px 12px #e0c9a4,12px 12px #e0c9a4,14px 12px #e0c9a4,16px 12px #e0c9a4,18px 12px #e0c9a4,20px 12px #e0c9a4,22px 12px #cbb490,24px 12px #7e6f5d,2px 14px #7e6f5d,4px 14px #e9d8bc,6px 14px #e0c9a4,8px 14px #cbb490,10px 14px #cbb490,12px 14px #e0c9a4,14px 14px #e0c9a4,16px 14px #cbb490,18px 14px #cbb490,20px 14px #e0c9a4,22px 14px #cbb490,24px 14px #7e6f5d,2px 16px #b6a281,4px 16px #e9d8bc,6px 16px #e0c9a4,8px 16px #000000,10px 16px #000000,12px 16px #e9d8bc,14px 16px #e0c9a4,16px 16px #000000,18px 16px #000000,20px 16px #e0c9a4,22px 16px #cbb490,24px 16px #b6a281,2px 18px #cbb490,4px 18px #e9d8bc,6px 18px #e0c9a4,8px 18px #e0c9a4,10px 18px #e0c9a4,12px 18px #e9d8bc,14px 18px #e0c9a4,16px 18px #e0c9a4,18px 18px #e0c9a4,20px 18px #e0c9a4,22px 18px #cbb490,24px 18px #cbb490,4px 20px #795f41,6px 20px #e0c9a4,8px 20px #e0c9a4,10px 20px #e0c9a4,12px 20px #e9d8bc,14px 20px #e0c9a4,16px 20px #e0c9a4,18px 20px #e0c9a4,20px 20px #e0c9a4,22px 20px #795f41,4px 22px #795f41,6px 22px #e0c9a4,8px 22px #e0c9a4,10px 22px #e0c9a4,12px 22px #cbb490,14px 22px #cbb490,16px 22px #e0c9a4,18px 22px #e0c9a4,20px 22px #cbb490,22px 22px #795f41,4px 24px #795f41,6px 24px #795f41,8px 24px #795f41,10px 24px #795f41,12px 24px #795f41,14px 24px #795f41,16px 24px #795f41,18px 24px #795f41,20px 24px #795f41,22px 24px #795f41,6px 26px #795f41,8px 26px #795f41,10px 26px #e0c9a4,12px 26px #e0c9a4,14px 26px #e0c9a4,16px 26px #b6a281,18px 26px #795f41,20px 26px #795f41,8px 28px #7e6f5d,10px 28px #e0c9a4,12px 28px #7e6f5d,14px 28px #7e6f5d,16px 28px #b6a281,18px 28px #7e6f5d,8px 30px #7e6f5d,10px 30px #795f41,12px 30px #7e6f5d,14px 30px #7e6f5d,16px 30px #795f41,18px 30px #7e6f5d,10px 32px #7e6f5d,12px 32px #7e6f5d,14px 32px #7e6f5d,16px 32px #7e6f5d}.withanes-name{box-sizing:border-box;position:absolute;bottom:4px;right:16px;padding:5px 7px;text-align:center;font-size:12px;font-weight:700;background-color:white;opacity:0;transform:translateX(0);color:black;white-space:nowrap;overflow:hidden;transition:opacity 250ms ease-in-out,width 0 linear 250ms,transform 250ms cubic-bezier(0.68,-0.55,0.265,1.55)}.withanes-name:after{width:0;height:0;content:'';position:absolute;z-index:2;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:8px solid white;position:absolute;top:calc(50% - 5px);right:-6px}.withanes:hover .withanes-name{overflow:visible;opacity:1;transform:translateX(-20px) rotate(0deg);box-shadow:0 0 16px rgba(0,0,0,0.33);transition:opacity 125ms ease-in-out 100ms,transform 250ms cubic-bezier(0.68,-0.55,0.265,1.55)}.withanes:hover:before{content:'';position:absolute;top:0;right:0;bottom:0;left:-20px}.withanes-name >.heart{margin:0 3px;position:relative;display:inline-block;width:6px;height:6px;background-color:#D13E35;transform:rotate(45deg)}.withanes-name >.heart:before,.withanes-name >.heart:after{content:'';position:absolute;display:inline-block;width:6px;height:6px;top:0;left:0;background-color:#D13E35;border-radius:50%}.withanes-name >.heart:before{left:-3px}.withanes-name >.heart:after{top:-3px}.grid{display:block;display:flex;flex-wrap:wrap;margin-top:-20px;margin-left:-20px;align-items:stretch;font-size:0}.grid + .grid{margin-top:0}.grid-col{box-sizing:border-box;display:inline-block;width:100%;padding-top:20px;padding-left:20px;vertical-align:top;font-size:16px}.grid-col_1of12{width:8.33333%}.grid-col_2of12{width:16.66667%}.grid-col_3of12{width:25%}.grid-col_4of12{width:33.33333%}.grid-col_5of12{width:41.66667%}.grid-col_6of12{width:50%}.grid-col_7of12{width:58.33333%}.grid-col_8of12{width:66.66667%}.grid-col_9of12{width:75%}.grid-col_10of12{width:83.33333%}.grid-col_11of12{width:91.66667%}.grid-col_12of12{width:100%}.blocks{margin:-30px 0 0 -30px;font-size:0}.blocks >*{box-sizing:border-box;display:inline-block;padding:30px 0 0 30px;font-size:16px}.blocks_2up >*{width:50%}.blocks_3up >*{width:33.33333%}.blocks_4up >*{width:25%}.u-srOnly{width:1px;height:1px;padding:0;margin:-1px;border:0;position:absolute;clip:rect(0 0 0 0);overflow:hidden}.error404page{margin:20px auto;height:768px;transform:scale(0.7)}.body404,.head404,.eyes404,.leftarm404,.rightarm404,.chair404,.leftshoe404,.rightshoe404,.legs404,.laptop404{background:url(https://3.bp.blogspot.com/-O43gBb7gkcY/XL2YJB7FoKI/AAAAAAAAPY0/VkJjKYm9S6c2Rv7PBPmucEQ3zCzDr02uQCLcBGAs/s1600/3Ep1VnfuJsev.png) 0 0 no-repeat;width:200px;height:200px}.newcharacter404,.torso404,.body404,.head404,.eyes404,.leftarm404,.rightarm404,.chair404,.leftshoe404,.rightshoe404,.legs404,.laptop404{background-size:750px;position:absolute;display:block}.newcharacter404{position:absolute;width:100%;height:auto;left:50%;z-index:3;top:0;margin-left:-200px}.torso404{position:absolute;display:block;top:138px;left:0;width:389px;height:252px;animation:sway 20s ease infinite;transform-origin:50% 100%}.body404{position:absolute;display:block;top:0;left:0;width:389px;height:253px}.head404{position:absolute;top:-148px;left:106px;width:160px;height:194px;background-position:0 -265px;transform-origin:50% 85%;animation:headTilt 20s ease infinite}.eyes404{position:absolute;top:92px;left:34px;width:73px;height:18px;background-position:-162px -350px;animation:blink404 10s steps(1) infinite,pan 10s ease-in-out infinite}.leftarm404{position:absolute;top:159px;left:0;width:165px;height:73px;background-position:-265px -341px;transform-origin:9% 35%;transform:rotateZ(0deg);animation:typeLeft 0.4s linear infinite}.rightarm404{position:absolute;top:148px;left:231px;width:157px;height:91px;background-position:-442px -323px;transform-origin:90% 25%;animation:typeLeft 0.4s linear infinite}.chair404{position:absolute;top:430px;left:55px;width:260px;height:365px;background-position:-12px -697px}.legs404{position:absolute;top:378px;left:4px;width:370px;height:247px;background-position:-381px -443px}.leftshoe404{position:absolute;top:591px;left:54px;width:130px;height:92px;background-position:-315px -749px}.rightshoe404{position:absolute;top:594px;left:187px;width:135px;height:81px;background-position:-453px -749px;transform-origin:35% 12%;animation:tapRight 1s linear infinite}.laptop404{position:absolute;top:186px;left:9px;width:365px;height:216px;background-position:-2px -466px;transform-origin:50% 100%;animation:tapWobble 0.4s linear infinite}@keyframes sway{0%{transform:rotateZ(0deg)}20%{transform:rotateZ(0deg)}25%{transform:rotateZ(4deg)}45%{transform:rotateZ(4deg)}50%{transform:rotateZ(0deg)}70%{transform:rotateZ(0deg)}75%{transform:rotateZ(-4deg)}90%{transform:rotateZ(-4deg)}100%{transform:rotateZ(0deg)}}@keyframes headTilt{0%{transform:rotateZ(0deg)}20%{transform:rotateZ(0deg)}25%{transform:rotateZ(-4deg)}35%{transform:rotateZ(-4deg)}38%{transform:rotateZ(2deg)}42%{transform:rotateZ(2deg)}45%{transform:rotateZ(-4deg)}50%{transform:rotateZ(0deg)}70%{transform:rotateZ(0deg)}82%{transform:rotateZ(0deg)}85%{transform:rotateZ(4deg)}90%{transform:rotateZ(4deg)}100%{transform:rotateZ(0deg)}}@keyframes typeLeft{0%{transform:rotateZ(0deg)}25%{transform:rotateZ(7deg)}75%{transform:rotateZ(-6deg)}100%{transform:rotateZ(0deg)}}@keyframes typeRight{0%{transform:rotateZ(0deg)}25%{transform:rotateZ(-6deg)}75%{transform:rotateZ(7deg)}100%{transform:rotateZ(0deg)}}@keyframes tapWobble{0%{transform:rotateZ(-0.2deg)}50%{transform:rotateZ(0.2deg)}100%{transform:rotateZ(-0.2deg)}}@keyframes tapRight{0%{transform:rotateZ(0deg)}90%{transform:rotateZ(-6deg)}100%{transform:rotateZ(0deg)}}@keyframes blink404{0%{background-position:-162px -350px}94%{background-position:-162px -350px}98%{background-position:-162px -368px}100%{background-position:-162px -350px}}@keyframes pan{0%{transform:translateX(-2px)}49%{transform:translateX(-2px)}50%{transform:translateX(2px)}99%{transform:translateX(2px)}100%{transform:translateX(-2px)}}.textgrav404{z-index:2;display:block}.textgrav404 h2{position:absolute;font-weight:700;font-size:12rem;letter-spacing:2rem;text-transform:uppercase;text-align:center;color:rgba(0,0,0,0.06);margin:0;padding:0;left:0;right:0;top:30%}.textgrav404 h3{display:inline-block;position:absolute;font-size:3rem;font-weight:400;letter-spacing:20px;text-transform:uppercase;text-align:center;color:#B5B5B5;padding:10px;margin:auto;z-index:3;left:0;right:0;bottom:-20%;width:65%}.textgrav404 h3 a{color:#B5B5B5;text-decoration:none;margin:0;padding:0}.textgrav404 h3 a span{letter-spacing:0;padding-right:3px}.textgrav404 h3 a:hover{color:#e74c3c}@media (min-width:768px){.grid-col_1of12SM{width:8.33333%}.grid-col_2of12SM{width:16.66667%}.grid-col_3of12SM{width:25%}.grid-col_4of12SM{width:33.33333%}.grid-col_5of12SM{width:41.66667%}.grid-col_6of12SM{width:50%}.grid-col_7of12SM{width:58.33333%}.grid-col_8of12SM{width:66.66667%}.grid-col_9of12SM{width:75%}.grid-col_10of12SM{width:83.33333%}.grid-col_11of12SM{width:91.66667%}.grid-col_12of12SM{width:100%}}@media (min-width:960px){.grid-col_1of12MD{width:8.33333%}.grid-col_2of12MD{width:16.66667%}.grid-col_3of12MD{width:25%}.grid-col_4of12MD{width:33.33333%}.grid-col_5of12MD{width:41.66667%}.grid-col_6of12MD{width:50%}.grid-col_7of12MD{width:58.33333%}.grid-col_8of12MD{width:66.66667%}.grid-col_9of12MD{width:75%}.grid-col_10of12MD{width:83.33333%}.grid-col_11of12MD{width:91.66667%}.grid-col_12of12MD{width:100%}}@media (max-width:1024px){.newcharacter404{z-index:0;opacity:.15}.textgrav404 h2{position:relative;font-size:8rem;letter-spacing:1rem;color:#f9998f}.textgrav404 h3{position:relative;font-size:2.5rem;color:#B5B5B5;margin:40px auto;width:100%}}@media (max-width:769px){.error404page{margin:12% auto 20px auto;width:100%;transform:scale(1)}.textgrav404 h2{font-size:5rem;letter-spacing:.5rem}.textgrav404 h3{background:#fff;font-size:1.2rem;letter-spacing:10px;padding:20px}}@media (max-width:569px){.newcharacter404{opacity:1}.textgrav404 h2{display:none}.textgrav404 h3{font-size:1.1rem;letter-spacing:5px;margin:80% auto 40px auto;line-height:2rem}}

</style>
<div class='error404page'>
<div class='newcharacter404'>
<div class='chair404'></div>
<div class='leftshoe404'></div>
<div class='rightshoe404'></div>
<div class='legs404'></div>
<div class='torso404'>
<div class='body404'></div>
<div class='leftarm404'></div>
<div class='rightarm404'></div>
<div class='head404'>
<div class='eyes404'></div>
</div>
</div>
<div class='laptop404'></div>
</div>
<div class='textgrav404'>
<h2> ERROR 404 </h2>
<h3>Now Go <a href='/'>hom<span>e</span></a> You're Lost</h3>
</div>
</div>
</b:if>

Bước 3. Lưu mẫu
<3 @@ ^_^ ^^ :) :( hihi :-) :D =D :-d ;( ;-( @-) :P :o -_- (o) (p) :-s (m) 8-) :-t :-b b-( :-# (y) x-) (k) (h) cheer (li) :v :3 (c) (s) (pl) (f)
Bài đăng mới hơn Bài đăng cũ hơn
Pass giải nén mặc định: riusgrey
Chắc bạn cũng đã nhiều lần gặp những link của 123link dạng 123link.co tại những trang web chia sẻ nội dung số. Nhưng bạn không biết cách nào để truy cập vào đúng link gốc của nội dung mà mình muốn truy cập. Bài viết này sẽ giúp bạn làm điều đó.
Đầu tiên bạn truy cập vào một link 123link. Khi bạn truy cập xong thì nội dung bạn thấy sẽ tựa như hình ở dưới.
Trang 123link
Trang 123link
Đánh dấu check vào vô “I’m not a robot”. Sau đó sẽ có một bảng captcha hiện ra. Bạn trả lời theo câu hỏi của captcha rồi bấm Verify để xác nhận.
I’m not a robot
I’m not a robot
Verify
Verify
Sau khi xác nhận captcha thành công thì bấm chọn nút “Click here to continue” để sang bước tiếp theo.
Click here to continue
Click here to continue
Ở trang tiếp theo, bạn sẽ thấy một đồng hồ đếm ngược, thường thì nhiều nhất sẽ là 7 giây. Bạn đợi cho thời gian đếm ngược chạy hết.
Bạn đợi cho thời gian đếm ngược chạy hết
Bạn đợi cho thời gian đếm ngược chạy hết
Khi thời gian đếm ngược chạy hết, bạn sẽ thấy nút Get Link hiện ra. Bạn bấm vào nút đó để truy cập đến đường link đã được rút gọn bởi 123link.
Get Link
Get Link
Bạn cứ yên tâm là link từ 123link sẽ không có ẩn chứa những mối nguy hiểm như virus, các pop-up quảng cáo không lành mạnh và phiền toái khi bạn đang thao tác các bước để tới link đích.
Like
Rê chuột vào nút Like để chọn biểu tượng cảm xúc
https://www.riusgrey.cf/2019/05/tao-trang-bao-loi-404-hieu-ung-3d-bang.html

Không ngừng học hỏi, tìm tòi tri thức mới. Tôi luôn mang đến cho bạn những gì tốt nhất bạn cần...

2 nhận xét:
Xếp theo

Về Rius Grey

Được thành lập ngày 20/06/2017,Rius Grey là một website chủ yếu chuyên chia sẻ về mảng Photoshop như : PSD, Thủ Thuật PTS,..Ngoài ra chúng tôi còn chia sẻ một số thử thuật về Máy Tính, Blogger, Facebook,..vv

Ngoài ra Blog chúng tôi cũng chia sẻ những thứ linh tinh khác nữa...

Hiện tại có bài viết và bình luận trên Blog.

Liên hệ, góp ý hoặc hợp tác, quảng cáo tại đây

Bình Luận Mới

Blog Bạn Bè

Thông Báo

Mọi người hãy ủng hộ Blog thường xuyên để Ad có động lực đăng bài nhiều bài hay nhé. Rip Tony Stark. I love U 3000 !

Xong

ĐĂNG NHẬP

Chưa có tài khoản ?Đăng ký ngay!

ĐĂNG KÝ

Lưu ý: Tên đăng nhập và Email không được viết hoa
Đã có tài khoản ? Đăng nhập