Create 404 Error Pages with Beautiful and Professional CSS for Blogspot
 |
| Create 404 Error Pages with Beautiful and Professional CSS for Blogspot |
Create 404 Error Pages with Beautiful and Professional CSS for Blogspot
At the request of a friend who sent to me wanted me to share the error page that I am currently using on this blog. this is a beautiful and simple error page style that I designed specifically for Blogspot and only use CSS & HTML so it will not affect the page loading speed and the code is not conflict.
After just a few minutes of playing with CSS, I came up with a new type of error page with extremely modern style and 'aristocrat' hahaha said it for fun, but I also find it quite beautiful!
Well no more chattering, start!
Steps to follow
Step 1. Visit Blogspot's HTML editing interface.
Step 2. Find the code <body>or <body
Copy the code below and paste it after the opening tag.
<b:if cond='data:blog.pageType == "error_page"'>
<style type='text/css'>
body {
overflow: hidden!important
}
#error-page-bsw {
position: relative;
display: table;
width: 100%;
height: 100vh;
margin: 0!important;
padding: 0!important;
z-index: 999;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3cC7U3HbAIaufOjCS_6hkVq3pbWFFP4yhoau0nB_qNDXOFmVUClHslKNNo1tALE3W7Xo7bVHAbAQJU8Kv94rwN7TpJs7DlGth1LtrvnNf5UZHpXh5F8OmsEU0G4ilBi7OQl_6WXei4Z3c/s1600/background_full_Intro_bacsiwindows-com.jpg) no-repeat center center!important;
background-size: cover!important
}
#error-page-bsw:before {
content: '';
opacity: 1;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 0;
background: linear-gradient(transparent, #050a18)
}
#error-page-bsw:after {
content: '
'
;
z-index: 0;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-image: linear-gradient(transparent, rgba(51, 51, 51, 0.15) 0%, rgba(12, 23, 36, 0.4))
}
.error-page-bsw_content {
position: relative;
z-index: 3
}
.intro_label h2 {
font-size: 45px;
font-weight: 700;
color: rgba(255, 255, 255, .85);
margin: 0 0 .5em;
padding: 0;
font-family: "
Roboto Condensed"
,
sans-serif;
text-transform: uppercase
}
.intro_label p {
text-transform: uppercase;
font-size: 16px;
font-weight: 400;
color: rgba(255, 255, 255, 0.7);
margin: 0;
padding: 0;
letter-spacing: 2px
}
.intro_label {
margin: 0 auto;
text-align: center;
padding: 0
}
.btn-error-page {
color: rgba(255, 255, 255, .5)!important;
padding: 8px 25px;
display: inline-block;
margin: 1.5em .5em;
border-radius: 50px;
text-transform: uppercase;
border: 1px solid rgba(255, 255, 255, .3);
font-size: 14px;
font-weight: 500;
}
.btn-error-page:hover {
background: rgba(255, 255, 255, .15)
}
.meta_ {
display: table-cell;
vertical-align: middle;
text-align: center
}
</style>
<div id='error-page-bsw'>
<div class='meta_'>
<div class='error-page-bsw_content'>
<div class='intro_label'>
<h2 class='_title'><i aria-hidden='true' class='fa fa-gg' style='margin:0 20px 0 0'/>404 - PAGE NOT FOUND<i aria-hidden='true' class='fa fa-gg' style='margin:0 0 0 20px'/></h2>
<p>Sorry, how could you get here !?</p>
<a class='btn-error-page' href='/p/contact-us.html'>Contact - report an error</a><a class='btn-error-page' href='/'>Home</a><a class='btn-error-page' href='#go_back' onclick='goBack()'>Return to the previous page</a>
</div>
</div></div>
</div>
<script> function goBack() { window.history.back(); } </script>
</b:if>
Step 3. Save samples and ... enjoy!
Before applying this procedure, you have to delete all the code of the old 404 pages in the blog. If you don't like the current image, you can change the red image link to another image link (you should choose high-quality images to photos are not broken). Also requires the blog font Roboto, Roboto Condensed and Fone Awesome too.
If you encounter an error during the implementation, please comment below for help. Good luck.
THÔNG TIN THANH TOÁN & DỊCH VỤ:
- Tên tài khoản: Nguyễn Anh Tuấn
- Số tài khoản: 0501000058467
- Ngân hàng TMCP Ngoại thương Việt Nam (Vietcombank) - Chi nhánh Bắc Sài Gòn
- Hỗ trợ cài đặt: fb.com/kequaduongvodanh
- Dịch vụ: Xem chi tiết >>
+ Nhận convert template từ Wordpress
+ Sửa lỗi, nâng cấp template
+ Thiết kế Form Liên hệ từ Google Form
Thanks
ReplyDelete