Hot Post

Trang báo lỗi 404 mang phong cách Giáng sinh dành cho Blogger

12/04/2016 A+ a-
Chia sẻ Facebook Blog This! Chia sẻ Email
Bình luận
0

404 Error Page with Xmas style

Tháng 12 đã đến và đêm Giáng sinh đã cận kề. Hãy cùng Iris Tips mang không khí đêm Noel vào website của bạn với trang báo lỗi 404 mang âm hưởng Christmas bạn nhé.




Cách 1

1Vào Blogger >> Cài đặt >> Tùy chọn tìm kiếm. Nhìn sang khung bên phải tìm đến dòng Lỗi và chuyển hướng >> Không tìm thấy trang tùy chỉnh >> Click vào chữ Chỉnh sửa và dán đoạn code bên dưới vào.


<style type="text/css">
html,body{height:100%;min-height:450px;font-family:'Dosis',sans-serif;font-size:32px;font-weight:500;color:#5d7399}
.content{height:100%;position:relative;z-index:1;background-color:#d2e1ec;background-image:-webkit-linear-gradient(top,#bbcfe1 0%,#e8f2f6 80%);background-image:linear-gradient(to bottom,#bbcfe1 0%,#e8f2f6 80%);overflow:hidden}
.snow{position:absolute;top:0;left:0;pointer-events:none;z-index:20}
.main-text{padding:20vh 20px 0 20px;text-align:center;line-height:2em;font-size:5vh}
.home-link{font-size:0.6em;font-weight:400;color:inherit;text-decoration:none;opacity:0.6;border-bottom:1px dashed rgba(93,115,153,0.5)}
.home-link:hover{opacity:1}
.ground{height:160px;width:100%;position:absolute;bottom:0;left:0;background:#f6f9fa;box-shadow:0 0 10px 10px #f6f9fa}
.ground:before,.ground:after{content:'';display:block;width:250px;height:250px;position:absolute;top:-62.5px;z-index:-1;background:transparent;-webkit-transform:scaleX(0.2) rotate(45deg);transform:scaleX(0.2) rotate(45deg)}
.ground:after{left:50%;margin-left:-166.66667px;box-shadow:-330px 270px 15px #b7c1d3,-640px 560px 15px #8798b6,-900px 900px 15px #9dabc4,-1200px 1200px 15px #9dabc4,-1540px 1460px 15px #94a3be,-1810px 1790px 15px #8193b2,-2130px 2070px 15px #8798b6,-2435px 2365px 15px #94a3be,-2700px 2700px 15px #8798b6,-3045px 2955px 15px #a1aec6,-3315px 3285px 15px #8e9eba,-3580px 3620px 15px #a4b1c8,-3940px 3860px 15px #b4bed1,-4205px 4195px 15px #a1aec6,-4515px 4485px 15px #8e9eba,-4770px 4830px 15px #9dabc4}
.ground:before{right:50%;margin-right:-166.66667px;box-shadow:285px -315px 15px #8193b2,555px -645px 15px #8193b2,890px -910px 15px #8798b6,1250px -1150px 15px #97a6c0,1490px -1510px 15px #8496b4,1845px -1755px 15px #8496b4,2150px -2050px 15px #b7c1d3,2405px -2395px 15px #b0bccf,2745px -2655px 15px #8a9bb8,2970px -3030px 15px #7e90b0,3350px -3250px 15px #9aa9c2,3625px -3575px 15px #8e9eba,3940px -3860px 15px #a4b1c8,4245px -4155px 15px #8a9bb8,4505px -4495px 15px #b0bccf,4830px -4770px 15px #7e90b0}
.mound{margin-top:-80px;font-weight:800;font-size:180px;text-align:center;color:#dd4040;pointer-events:none}
.mound:before{content:'';display:block;width:600px;height:200px;position:absolute;left:50%;margin-left:-300px;top:50px;z-
</style>
<div class="content">
  <canvas id="snow" class="snow" width="1349" height="400"></canvas>
  <div class="main-text">
    <h1>Aw jeez<br>This page has gone missing</h1><br/>
    <p><a href="http://iris-tips.blogspot.com/">Back to homepage</a></p>
  </div>
  <div class="ground">
    <div class="mound"> 
      <div class="mound_text">404</div>
      <div class="mound_spade"></div>
    </div>
  </div>
</div>
  
  
    <script>
    (function() {
    function ready(fn) {
        if (document.readyState != 'loading'){
            fn();
        } else {
            document.addEventListener('DOMContentLoaded', fn);
        }
    }
    
    function makeSnow(el) {
        var ctx = el.getContext('2d');
        var width = 0;
        var height = 0;
        var particles = [];
        
        var Particle = function() {
            this.x = this.y = this.dx = this.dy = 0;
            this.reset();
        }
        
        Particle.prototype.reset = function() {
            this.y = Math.random() * height;
            this.x = Math.random() * width;
            this.dx = (Math.random() * 1) - 0.5;
            this.dy = (Math.random() * 0.5) + 0.5;
        }
        
        function createParticles(count) {
            if (count != particles.length) {
                particles = [];
                for (var i = 0; i < count; i++) {
                    particles.push(new Particle());
                }
            }
        }
                
        function onResize() {
            width = window.innerWidth;
            height = window.innerHeight;
            el.width = width;
            el.height = height;
            
            createParticles((width * height) / 10000);
        }
        
        function updateParticles() {
            ctx.clearRect(0, 0, width, height);
            ctx.fillStyle = '#f6f9fa';
            
            particles.forEach(function(particle) {
                particle.y += particle.dy;
                particle.x += particle.dx;
                
                if (particle.y > height) {
                    particle.y = 0;
                }
                
                if (particle.x > width) {
                    particle.reset();
                    particle.y = 0;
                }
                
                ctx.beginPath();
                ctx.arc(particle.x, particle.y, 5, 0, Math.PI * 2, false);
                ctx.fill();
            });
            
            window.requestAnimationFrame(updateParticles);
        }
        
        onResize();
        updateParticles();
        
        window.addEventListener('resize', onResize);
    }
    
    ready(function() {
        var canvas = document.getElementById('snow');
        makeSnow(canvas);
    });
})();
  </script>

Cách 2

1Vào Mẫu >> Chỉnh sửa HTML tìm đến thẻ </body> và dán đoạn code bên dưới vào trước thẻ đó. 
<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<style type="text/css">
html,body{height:100%;min-height:450px;font-family:'Dosis',sans-serif;font-size:32px;font-weight:500;color:#5d7399}
.content{height:100%;position:relative;z-index:1;background-color:#d2e1ec;background-image:-webkit-linear-gradient(top,#bbcfe1 0%,#e8f2f6 80%);background-image:linear-gradient(to bottom,#bbcfe1 0%,#e8f2f6 80%);overflow:hidden}
.snow{position:absolute;top:0;left:0;pointer-events:none;z-index:20}
.main-text{padding:20vh 20px 0 20px;text-align:center;line-height:2em;font-size:5vh}
.home-link{font-size:0.6em;font-weight:400;color:inherit;text-decoration:none;opacity:0.6;border-bottom:1px dashed rgba(93,115,153,0.5)}
.home-link:hover{opacity:1}
.ground{height:160px;width:100%;position:absolute;bottom:0;left:0;background:#f6f9fa;box-shadow:0 0 10px 10px #f6f9fa}
.ground:before,.ground:after{content:'';display:block;width:250px;height:250px;position:absolute;top:-62.5px;z-index:-1;background:transparent;-webkit-transform:scaleX(0.2) rotate(45deg);transform:scaleX(0.2) rotate(45deg)}
.ground:after{left:50%;margin-left:-166.66667px;box-shadow:-330px 270px 15px #b7c1d3,-640px 560px 15px #8798b6,-900px 900px 15px #9dabc4,-1200px 1200px 15px #9dabc4,-1540px 1460px 15px #94a3be,-1810px 1790px 15px #8193b2,-2130px 2070px 15px #8798b6,-2435px 2365px 15px #94a3be,-2700px 2700px 15px #8798b6,-3045px 2955px 15px #a1aec6,-3315px 3285px 15px #8e9eba,-3580px 3620px 15px #a4b1c8,-3940px 3860px 15px #b4bed1,-4205px 4195px 15px #a1aec6,-4515px 4485px 15px #8e9eba,-4770px 4830px 15px #9dabc4}
.ground:before{right:50%;margin-right:-166.66667px;box-shadow:285px -315px 15px #8193b2,555px -645px 15px #8193b2,890px -910px 15px #8798b6,1250px -1150px 15px #97a6c0,1490px -1510px 15px #8496b4,1845px -1755px 15px #8496b4,2150px -2050px 15px #b7c1d3,2405px -2395px 15px #b0bccf,2745px -2655px 15px #8a9bb8,2970px -3030px 15px #7e90b0,3350px -3250px 15px #9aa9c2,3625px -3575px 15px #8e9eba,3940px -3860px 15px #a4b1c8,4245px -4155px 15px #8a9bb8,4505px -4495px 15px #b0bccf,4830px -4770px 15px #7e90b0}
.mound{margin-top:-80px;font-weight:800;font-size:180px;text-align:center;color:#dd4040;pointer-events:none}
.mound:before{content:'';display:block;width:600px;height:200px;position:absolute;left:50%;margin-left:-300px;top:50px;z-
</style>
<div class="content">
  <canvas id="snow" class="snow" width="1349" height="400"></canvas>
  <div class="main-text">
    <h1>Aw jeez<br>This page has gone missing</h1><br/>
    <p><a href="http://iris-tips.blogspot.com/">Back to homepage</a></p>
  </div>
  <div class="ground">
    <div class="mound"> 
      <div class="mound_text">404</div>
      <div class="mound_spade"></div>
    </div>
  </div>
</div>
  
  
    <script>
    (function() {
    function ready(fn) {
        if (document.readyState != 'loading'){
            fn();
        } else {
            document.addEventListener('DOMContentLoaded', fn);
        }
    }
    
    function makeSnow(el) {
        var ctx = el.getContext('2d');
        var width = 0;
        var height = 0;
        var particles = [];
        
        var Particle = function() {
            this.x = this.y = this.dx = this.dy = 0;
            this.reset();
        }
        
        Particle.prototype.reset = function() {
            this.y = Math.random() * height;
            this.x = Math.random() * width;
            this.dx = (Math.random() * 1) - 0.5;
            this.dy = (Math.random() * 0.5) + 0.5;
        }
        
        function createParticles(count) {
            if (count != particles.length) {
                particles = [];
                for (var i = 0; i < count; i++) {
                    particles.push(new Particle());
                }
            }
        }
                
        function onResize() {
            width = window.innerWidth;
            height = window.innerHeight;
            el.width = width;
            el.height = height;
            
            createParticles((width * height) / 10000);
        }
        
        function updateParticles() {
            ctx.clearRect(0, 0, width, height);
            ctx.fillStyle = '#f6f9fa';
            
            particles.forEach(function(particle) {
                particle.y += particle.dy;
                particle.x += particle.dx;
                
                if (particle.y > height) {
                    particle.y = 0;
                }
                
                if (particle.x > width) {
                    particle.reset();
                    particle.y = 0;
                }
                
                ctx.beginPath();
                ctx.arc(particle.x, particle.y, 5, 0, Math.PI * 2, false);
                ctx.fill();
            });
            
            window.requestAnimationFrame(updateParticles);
        }
        
        onResize();
        updateParticles();
        
        window.addEventListener('resize', onResize);
    }
    
    ready(function() {
        var canvas = document.getElementById('snow');
        makeSnow(canvas);
    });
})();
  </script>
</b:if>


Nếu có bất kỳ vấn đề khó khăn hay câu hỏi gì, bạn đừng ngần ngại, hãy để lại bình luận ở form bên dưới nhé.
Chúc bạn thành công!

Created by Iris Tips
Iris Tips

Đăng ký nhận tin khuyến mãi, thủ thuật mới

Mẹo nhỏ khi bình luận
  • - Để viết chữ in đậm hãy sử dụng thẻ <b>chữ in đậm</b>
  • - Để viết chữ in nghiêng hãy sử dụng thẻ <i>chữ in nghiêng</i>
  • - Để viết code hãy sử dụng công cụ Conversion ở bên dưới để mã hóa và sau đó dán vào khung bình luận.
  • - Để chèn hình ảnh, video chỉ cần dán link trực tiếp của hình ảnh hoặc video vào khung bình luận (hỗ trợ: jpg, gif, png, bmp, Youtube).
  • - Bạn có thể upload hình ảnh, tập tin trực tiếp từ máy tính bằng cách sử dụng công cụ Up ảnh hoặc Up file ở bên dưới.
  • - Bạn có thể check vào ô Notify me ở khung nhận xét để nhận thông báo qua email khi ai đó trả lời bình luận của bạn.

0 Response to "Trang báo lỗi 404 mang phong cách Giáng sinh dành cho Blogger"

Đăng nhập bằng Google


Trở thành người đầu tiên bình luận cho bài viết này!

Đăng ký: Đăng Nhận xét (Atom)