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 <bodyCopy code sau và dán vào sau thẻ mở đó.
<b:if cond='data:blog.pageType == "error_page"'>
<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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzmgN2orsgiFrtiQa1B8uKLRziQE9FHsF7EJKHf1W6xvGbWA02iu7vD7WMn_NWF9MS5EvfotSAJwiHEy4Yh6xI9I2vmcMFdfnmAF85tbEn0Sz4vFePmVLqPosn8icHsSClWCyuWeCHYx0Q/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
lần sau để hẳn demo đi
Trả lờiXóaDemo đâu
Trả lờiXóa