Интересное оформление страницы 404 Blogger
Прежде всего, страница 404 помогает улучшить пользовательский опыт. Когда пользователь попадает на несуществующую страницу, он может испытать разочарование и путаницу. Однако благодаря странице 404, пользователю предоставляется информация, что произошла ошибка, и предлагается вернуться на главную страницу или воспользоваться поиском. Это позволяет сохранить позитивное впечатление о сайте.
Кроме того, страница 404 полезна для SEO. Правильно настроенная страница 404 может помочь поисковым системам понять, что страница не существует, и помочь им проиндексировать более важные страницы сайта. Это позволяет улучшить позиции сайта в поисковой выдаче.
На Блоггере так же есть возможность установить 404 страницу. Читайте информацию:
Таким образом, страница 404 необходима на веб-сайте как инструмент для улучшения пользовательского опыта и SEO. Ее наличие помогает сохранить доверие пользователей и улучшить видимость сайта в поисковых системах.
Предлагаю посмотреть на интересные страницы ошибки 404. Проверить работоспособность кода можно в редакторе.
Вариант 1
Автор Muhammad Rauf
<img src="https://i.ibb.co/W6tgcKQ/softcodeon.gif">
<h2 class="error-text">Упс, похоже такой страницы нет на сайте</h2>
<p class="text">Проверьте правильность написания адреса страницы или перейдите на...</p>
<div class="btn1">
<a class="error" href="Адрес вашего сайта">Главная</a>
</div>
<style>
*{padding:0;margin:0;background:#f0f0f0;}
img{display: block;
margin-left: auto;
margin-right: auto;}
.btn1{text-align:center;}
.text{text-align:center;font-size:20px;margin-bottom:40px;}
.error-text{text-align:center;padding:20px; font-family: Cursive;
} .error{font-family: 'Roboto', sans-serif;font-size:1.5rem;text-decoration:none;padding:15px;background:#003c54;color:#fff;border-radius:10px;}
</style>
Поменяйте текст и пропишите адрес вашей главной страницы. Отметила в коде красным цветом. Картинку лучше перенести на свой сайт:- скачайте её, перейдя по адресу изображения (выделила зелёным)
- загрузите в редактор блога
- скопируйте адрес картинки
- удалите картинку
Так же можно поменять цвет кнопки — выделила синим цветом.
Вариант 2
Автор Anh Nhim
<div id="container-error">
<div class="minion">
<div class="hands">
<div class="left"></div>
<div class="right"></div>
<div class="fingers-l"></div>
<div class="fingers-r"></div>
<div class="glove-l"></div>
<div class="glove-r"></div>
</div>
<div class="glasses">
<div class="glassesline1"></div>
<div class="glassesline2"></div>
<div class="glass1">
<div class="eye1"></div>
</div>
<div class="glass2">
<div class="eye2"></div>
</div>
</div>
<div class="mouth">
<ul class="teeth">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="belt-left"></div>
<div class="belt-right"></div>
<div class="pants"></div>
<div class="legs">
<div class="left"></div>
<div class="right"></div>
<div class="shoe-l"></div>
<div class="shoe-r"></div>
</div>
</div>
<div id="buttonerror">
<a href="адрес сайта">Главная</a></div>
</div>
<style>
{
background: #f5f5f5;
font-family: 'Open Sans', sans-serif;
margin: 0;
padding: 0;
position: relative;
}
a,
a:visited {
color: #fff;
outline: none;
text-decoration: none;
}
a:hover,
a:focus,
a:visited:hover {
color: #fff;
text-decoration: none;
}
#container-error {
text-align: center;
z-index: 9999;
width: 100%;
height: 100%;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: 0;
background-color: #0dea99;
color: #fff;
}
#buttonerror {
clear: both;
position: absolute;
background-color: rgba(255, 255, 255, .05);
color: #0dea99;
position: absolute;
left: 0;
right: 0;
bottom: 15%;
margin: auto;
max-width: 250px;
padding: 20px;
z-index: 99999;
border-radius: 10px;
border: 5px solid #fff;
transition: all .5s;
}
#buttonerror a {
color: #fff;
font-weight: 700;
font-size: 1.5rem;
text-transform: uppercase;
letter-spacing: 1px;
}
#buttonerror:hover {
background-color: rgba(255, 255, 255, 1);
}
#buttonerror:hover a,
#buttonerror a:hover {
color: #0dea99;
}
.minion {
position: absolute;
background-color: #ffed41;
height: 360px;
width: 218px;
border-radius: 218px 218px 130px 130px;
position: absolute;
left: 50%;
top: 45%;
margin: -180px 0 0 -109px;
z-index: 99999;
}
.glassesline1 {
background-color: #494949;
border-radius: 4px;
height: 12px;
width: 238px;
position: relative;
top: 98px;
margin: 0 -10px;
}
.glassesline2 {
background-color: #2d2d2d;
border-radius: 4px;
height: 12px;
width: 238px;
position: relative;
top: 98px;
margin: 0 -10px;
box-shadow: 0px 3px 0px 0px rgba(0, 0, 0, 0.15);
}
.glass1,
.glass2 {
background-color: #e2e2e0;
height: 102px;
width: 102px;
border-radius: 102px;
position: absolute;
top: 55px;
box-shadow: -4px 4px 0px 0px rgba(50, 50, 50, 0.15), 1px -1px 0px 0px rgba(255, 255, 255, 1);
}
.glass1 {
left: 10px;
right: auto;
z-index: 2;
}
.glass2 {
right: 10px;
left: auto;
z-index: 1;
}
.glass1:before,
.glass2:before {
background-color: #e5bf36;
height: 78px;
width: 78px;
border-radius: 78px;
display: block;
position: relative;
top: 12px;
left: 12px;
content: "";
}
.glass1:after,
.glass2:after {
background-color: #FFF;
height: 58px;
width: 78px;
border-radius: 78px;
position: absolute;
top: 22px;
left: 12px;
content: "";
animation: eyes 5s linear 1s infinite;
}
.eye1,
.eye2 {
background-color: #724c25;
height: 28px;
width: 28px;
border-radius: 28px;
position: absolute;
top: 44px;
z-index: 3;
}
.eye1 {
left: 46px;
}
.eye2 {
right: 46px;
}
.eye1:before,
.eye2:before {
background-color: #2c2d2f;
height: 12px;
width: 12px;
border-radius: 12px;
display: block;
position: relative;
top: 8px;
left: 8px;
content: "";
}
.eye1:after,
.eye2:after {
background-color: #FFF;
height: 8px;
width: 8px;
border-radius: 8px;
position: absolute;
top: 6px;
left: 12px;
content: "";
}
.mouth {
background-color: #603814;
height: 36px;
width: 106px;
position: absolute;
border-radius: 0 0 106px 106px;
top: 182px;
left: 55px;
overflow: hidden;
}
.mouth:before {
background-color: #FFED41;
height: 80px;
width: 205px;
position: relative;
display: block;
border-radius: 0 0 150px 150px;
top: -70px;
left: -50px;
content: "";
z-index: 2;
box-shadow: 0px 3px 0px 0px rgba(50, 50, 50, 0.15);
}
ul.teeth {
list-style: none;
z-index: 1;
position: absolute;
top: -10px;
left: -25px;
}
ul.teeth li {
float: left;
height: 15px;
width: 20px;
background: #FFF;
display: inline-block;
border-radius: 0 0 15px 15px;
}
ul.teeth li:first-child,
ul.teeth li:last-child {
height: 10px;
}
.pants {
background-color: #2b5b89;
height: 66px;
position: relative;
top: 270px;
border-radius: 0 0 128px 128px;
z-index: 2;
}
.pants:before {
background-color: #2b5b89;
height: 58px;
width: 138px;
display: block;
position: relative;
top: -58px;
margin: 0 auto;
content: "";
}
.pants:after {
background-color: #224467;
height: 44px;
width: 58px;
display: block;
position: relative;
top: -76px;
border-radius: 0 0 58px 58px;
margin: 0 auto;
content: "";
}
.belt-left,
.belt-right {
background-color: #224467;
height: 16px;
width: 70px;
position: absolute;
top: 225px;
z-index: 3;
}
.belt-left {
left: -10px;
transform: scale(1) rotate(24deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
}
.belt-right {
right: -10px;
transform: scale(1) rotate(-28deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
}
.belt-left:after,
.belt-right:after {
background-color: #2d2d2b;
height: 11px;
width: 11px;
border-radius: 11px;
position: absolute;
content: "";
}
.belt-left:after {
left: 56px;
top: 3px;
}
.belt-right:after {
right: 57px;
top: 3px;
}
.legs .left,
.legs .right {
background: #224467;
height: 22px;
width: 44px;
position: absolute;
top: 358px;
z-index: 1;
}
.legs .left {
left: 60px;
}
.legs .right {
right: 60px;
}
.legs .left:after {
position: absolute;
content: "";
height: 0;
width: 0;
border-bottom: 22px solid #0dea99;
border-right: 10px solid transparent;
left: 0;
}
.legs .right:after {
position: absolute;
content: "";
height: 0;
width: 0;
border-bottom: 22px solid #0dea99;
border-left: 10px solid transparent;
right: 0;
}
.shoe-l,
.shoe-r {
background-color: #424242;
width: 52px;
height: 18px;
position: absolute;
top: 380px;
}
.shoe-l {
left: 50px;
border-radius: 18px 0 0 0;
}
.shoe-r {
right: 50px;
border-radius: 0 18px 0 0;
}
.shoe-l:after,
.shoe-r:after {
background-color: #2d2d2d;
width: 56px;
height: 5px;
position: absolute;
content: "";
top: 18px;
left: -2px;
}
.shoe-l:before {
position: absolute;
content: "";
height: 0;
width: 0;
border-top: 5px solid #224467;
border-left: 34px solid transparent;
left: 20px;
}
.shoe-r:before {
position: absolute;
content: "";
height: 0;
width: 0;
border-top: 5px solid #224467;
border-right: 34px solid transparent;
right: 20px;
}
.hands .left,
.hands .right {
background-color: #e5c034;
height: 100px;
width: 16px;
position: absolute;
top: 242px;
}
.hands .left {
left: -16px;
border-radius: 16px 0 0 0;
}
.hands .right {
right: -16px;
border-radius: 0 16px 0 0;
}
.hands .fingers-l,
.hands .fingers-r {
background-color: #424242;
position: absolute;
content: "";
height: 16px;
width: 16px;
top: 350px;
z-index: 1;
}
.hands .fingers-l {
left: -6px;
border-radius: 0 16px 0 0;
}
.hands .fingers-r {
right: -6px;
border-radius: 16px 0 0 0;
}
.hands .fingers-l:after,
.hands .fingers-r:after {
background-color: #383838;
height: 16px;
width: 16px;
content: "";
border-radius: 16px;
position: absolute;
top: 15px;
z-index: 2;
}
.hands .fingers-l:after {
left: 0px;
}
.hands .fingers-r:after {
right: 0px;
}
.hands .fingers-l:before,
.hands .fingers-r:before {
background-color: #2c2c2c;
height: 16px;
width: 16px;
content: "";
border-radius: 16px;
position: absolute;
top: 8px;
z-index: 1;
}
.hands .fingers-l:before {
left: 5px;
}
.hands .fingers-r:before {
right: 5px;
}
.hands .glove-l,
.hands .glove-r {
background-color: #424242;
position: absolute;
height: 36px;
width: 16px;
border-radius: 0 0 16px 16px;
top: 342px;
z-index: 3;
}
.hands .glove-l {
left: -15px;
}
.hands .glove-r {
right: -15px;
}
.hands .glove-l:before,
.hands .glove-r:before {
position: absolute;
content: "";
height: 0;
width: 0;
top: -15px;
border-bottom: 30px solid #424242;
border-left: 30px solid transparent;
transform: scale(1) rotate(45deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
}
.hands .glove-l:before {
left: -7px;
}
.hands .glove-r:before {
right: -7px;
}
</style>
Вставляйте адрес с нужной страницей своего блога и её название — выделила в коде красным.
Вариант 3
Автор Kilchenmann
<div class='container'>
<div class='post-module hover'>
<div class='thumbnail'>
<img src='http://media.lakto.org/error.jpg'>
</div>
<div class='post-content'>
<div class='category'>Error 404</div>
<h1 class='title'>Это не та страница, которую вы ищите.</h1>
<h2 class='sub_title'>404 (Страница не найдена) Ошибка</h2>
<p class='description'>
</p>
<div class='post-meta'>
<span class='comments'>
<a href='адрес блога'>← Перейти на главную страницу</a>
</span>
</div>
</div>
</div>
</div>
<style>
{
background: #f2f2f2;
font-family: 'proxima-nova-soft', sans-serif;
font-size: 16px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.post-module {
position: relative;
z-index: 1;
display: block;
background: #ffffff;
min-width: 270px;
width: 340px;
height: 470px;
-webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.15);
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.15);
-webkit-transition: all 0.3s linear 0s;
-moz-transition: all 0.3s linear 0s;
-ms-transition: all 0.3s linear 0s;
-o-transition: all 0.3s linear 0s;
transition: all 0.3s linear 0s;
margin-left: auto;
margin-right: auto;
margin-top: 80px;
}
.post-module:hover,
.hover {
-webkit-box-shadow: 0px 1px 35px 0px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 1px 35px 0px rgba(0, 0, 0, 0.3);
box-shadow: 0px 1px 35px 0px rgba(0, 0, 0, 0.3);
}
.post-module:hover .thumbnail img,
.hover .thumbnail img {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
transform: scale(1.1);
opacity: 1;
}
.post-module .thumbnail {
background: #000000;
height: 400px;
overflow: hidden;
}
.post-module .thumbnail img {
display: block;
width: 110%;
-webkit-transition: all 0.3s linear 0s;
-moz-transition: all 0.3s linear 0s;
-ms-transition: all 0.3s linear 0s;
-o-transition: all 0.3s linear 0s;
transition: all 0.3s linear 0s;
}
.post-module .post-content {
position: absolute;
bottom: 0;
background: #e0e0e0;
width: 100%;
padding: 30px;
-webkti-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.3s cubic-bezier(0.37, 0.75, 0.61, 1.05) 0s;
-moz-transition: all 0.3s cubic-bezier(0.37, 0.75, 0.61, 1.05) 0s;
-ms-transition: all 0.3s cubic-bezier(0.37, 0.75, 0.61, 1.05) 0s;
-o-transition: all 0.3s cubic-bezier(0.37, 0.75, 0.61, 1.05) 0s;
transition: all 0.3s cubic-bezier(0.37, 0.75, 0.61, 1.05) 0s;
}
.post-module .post-content .category {
position: absolute;
top: -36px;
left: 0;
background: #e74c3c;
padding: 10px 15px;
color: #ffffff;
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
}
.post-module .post-content .title {
margin: 0;
padding: 0 0 10px;
color: #333333;
font-size: 26px;
font-weight: 700;
}
.post-module .post-content .sub_title {
margin: 0;
padding: 0 0 20px;
color: #e74c3c;
font-size: 20px;
font-weight: 400;
}
.post-module .post-content .description {
display: none;
color: #666666;
font-size: 14px;
line-height: 1.8em;
}
.post-module .post-content .post-meta {
margin: 30px 0 0;
color: #999999;
}
.post-module .post-content .post-meta .timestamp {
margin: 0 16px 0 0;
}
.post-module .post-content .post-meta a {
color: #999999;
text-decoration: none;
}
.hover .post-content .description {
display: block !important;
height: auto !important;
opacity: 1 !important;
}
.container {
max-width: 800px;
min-width: 640px;
margin: 0 auto;
}
.container:before,
.container:after {
content: '';
display: block;
clear: both;
}
.container .column {
width: 50%;
padding: 0 25px;
-webkti-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.container .column .demo-title {
margin: 0 0 15px;
color: #666666;
font-size: 18px;
font-weight: bold;
text-transform: uppercase;
}
.container .info {
width: 300px;
margin: 50px auto;
text-align: center;
}
.container .info h1 {
margin: 0 0 15px;
padding: 0;
font-size: 24px;
font-weight: 400;
color: #333333;
}
.container .info span {
color: #666666;
font-size: 12px;
}
.container .info span a {
color: #000000;
text-decoration: none;
}
.container .info span .fa {
color: #e74c3c;
}
</style>
Перенесите, на всякий случай, изображение из кода на свой блог - выделила синим цветом. Меняйте текст и добавьте адрес главной страницы своего блога - в коде выделала красным цветом.Вариант 4
Автор Aleena Pathan
<h1>Произошла ошибка </h1>
<p class="zoom-area"><b>Поломка! </b> К сожалению такой страницы здесь нет.</p>
<section class="error-container">
<span><span>4</span></span>
<span>0</span>
<span><span>4</span></span>
</section>
<div class="link-container">
<a target="_blank" href="адрес сайта" class="more-link">Перейдите на главную страницу</a>
</div>
<style>
.error-container {
text-align: center;
font-size: 180px;
font-family: 'Catamaran', sans-serif;
font-weight: 800;
margin: 20px 15px;
}
.error-container > span {
display: inline-block;
line-height: 0.7;
position: relative;
color: #FFB485;
}
.error-container > span > span {
display: inline-block;
position: relative;
}
.error-container > span:nth-of-type(1) {
perspective: 1000px;
perspective-origin: 500% 50%;
color: #F0E395;
}
.error-container > span:nth-of-type(1) > span {
transform-origin: 50% 100% 0px;
transform: rotateX(0);
animation: easyoutelastic 8s infinite;
}
.error-container > span:nth-of-type(3) {
perspective: none;
perspective-origin: 50% 50%;
color: #D15C95;
}
.error-container > span:nth-of-type(3) > span {
transform-origin: 100% 100% 0px;
transform: rotate(0deg);
animation: rotatedrop 8s infinite;
}
@keyframes easyoutelastic {
0% {
transform: rotateX(0);
}
9% {
transform: rotateX(210deg);
}
13% {
transform: rotateX(150deg);
}
16% {
transform: rotateX(200deg);
}
18% {
transform: rotateX(170deg);
}
20% {
transform: rotateX(180deg);
}
60% {
transform: rotateX(180deg);
}
80% {
transform: rotateX(0);
}
100% {
transform: rotateX(0);
}
}
@keyframes rotatedrop {
0% {
transform: rotate(0);
}
10% {
transform: rotate(30deg);
}
15% {
transform: rotate(90deg);
}
70% {
transform: rotate(90deg);
}
80% {
transform: rotate(0);
}
100% {
transform: rotateX(0);
}
}
/* demo stuff */
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
background-color: #f4f4f4;
margin-bottom: 50px;
}
html, button, input, select, textarea {
font-family: 'Montserrat', Helvetica, sans-serif;
color: #bbb;
}
h1 {
text-align: center;
margin: 30px 15px;
}
.zoom-area {
max-width: 490px;
margin: 30px auto 30px;
font-size: 19px;
text-align: center;
}
.link-container {
text-align: center;
}
a.more-link {
text-transform: uppercase;
font-size: 13px;
background-color: #bbb;
padding: 10px 15px;
border-radius: 0;
color: #fff;
display: inline-block;
margin-right: 5px;
margin-bottom: 5px;
line-height: 1.5;
text-decoration: none;
margin-top: 50px;
letter-spacing: 1px;
}
</style>
Так же выделила в коде красным цветом текст, который можно поменять и место, куда вставить ссылку на главную страницу вашего блога.
Комментарии со спамом удаляются.