TẠO TRANG BÁO LỖI 404 HIỆU ƯỚNG 3D BẰNG CSS TUYỆT ĐẸP CHO BLOGSPOT

KIỀU GIA HUY / lúc 09:29 ngày Thứ Sáu, 21 tháng 7, 2017 / 2 bình luận

Kết bạn Kiều Gia Huy để cùng trao đổi, học hỏi và nhận nhiều bài viết hay, hữu ích nhé!

Hôm nay xin chia sẻ với các bạn 1 mẫu 404 đẹp cho Blog. Mẫu này được bác Đăng Bùi thiết kế và hôm nay mình xin chia sẻ lại cho các bạn.

DEMO

HƯỚNG DẪN

Bước 1: Đăng nhập Blogger => Mẫu
Bước 2: Thêm đoạn code sau trước thẻ </head>

<b:if cond='data:blog.pageType == "error_page"'><link href="https://dl.dropboxusercontent.com/s/qn5mr56p3yyzwju/bootstrap.min.css" rel="stylesheet"/><link href="https://dl.dropboxusercontent.com/s/02z8w7zlf7x5p82/shader.css" rel="stylesheet"/></b:if>

Bước 3: Thêm đoạn code sau dưới thẻ <body>

<b:if cond='data:blog.pageType == "error_page"'> <div class="theme-fire"> <div id="background-container" class="background-container"> <div id="background-output" class="background-output"><canvas width="0" height="0" style="display: block;"></canvas></div> <div id="vignette" class="background-vignette"></div> <div id="noise" class="background-noise"></div> </div> <div class="content"> <div class="container"> <div class="row"> <h1 class="header col-sm-8 col-sm-offset-2">404 Error</h1> </div> <div class="row"> <p class="description col-sm-8 col-sm-offset-2"> Oops! That page can’t be found.<br/> It looks like nothing was found at this location. <a href="/" style="color: #111;">Back to homepage</a> </p> </div> </div> </div> <div></div> <script src='https://dl.dropboxusercontent.com/s/m1cjsogan6awc0e/jquery.countdown.js'/> <script src='https://dl.dropboxusercontent.com/s/9uzit85iai7n9yl/placeholders.min.js'/> <script src='https://dl.dropboxusercontent.com/s/0qi7d11zioe0h13/flat-surface-shader.js'/> <script src='https://dl.dropboxusercontent.com/s/xo6qkcyrkkiaghm/main.config.js'/> <script src='https://dl.dropboxusercontent.com/s/7v0jn787tikjst6/shader.js'/></div> </b:if>

Bước 4: Lưu lại và xem kết quảChúc các bạn thành công