несколько вариантов оформления страницы 404 с кодами

Доброго времени суток, друзья. Не так давно обещала выложить варианты оформления страницы 404 в Блоггере. Предлагаю вам несколько таких дизайнерских решений сразу с кодами. 

У меня была уже небольшая статья о том для чего нужна эта страница 404 и простые способы её оформления. Кто пропустил можно посмотреть здесь. Я свою страницу меняю очень часто. Очень нравиться что - то новенькое придумать. Так что в старом посте код моей первой страницы ошибка 404.  

На данный момент она выглядит так.

Не рассуждая долго, посмотрите подборку оформления страницы вместе с кодами. Все проверены и опубликованы на тестовых блогах для наглядности.

Вариант 1. Тёмная страница с неоновым свечением. 

Чтобы посмотреть вбейте в поиск адрес https://b-v-blog.blogspot.com/лоло .

тёмная страница 404


Код

<div id="dendingac_rosanels">
  <div class="dendingac_rosanels">
  <div class="dendingac_rosanels-404">
  <h1>404</h1>
  <h2>страница не найдена</h2>
  </div>
  <a href="http://www.shpargalochki.ru/">можно перейти на главную</a>
  </div>
  </div>
<style>
#dendingac_rosanels {
  position: relative;
  height: 100vh;
  background: #030005;
}

#dendingac_rosanels .dendingac_rosanels {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.dendingac_rosanels {
  max-width: 567px;
  width: 100%;
  line-height: 1.4;
  text-align: center;
}

.dendingac_rosanels .dendingac_rosanels-404 {
  position: relative;
  height: 180px;
  margin-bottom: 20px;
  z-index: -1;
}

.dendingac_rosanels .dendingac_rosanels-404 h1 {
  font-family: 'Montserrat', sans-serif;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50% , -50%);
  -ms-transform: translate(-50% , -50%);
  transform: translate(-50% , -50%);
  font-size: 130px;
  font-weight: 900;
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: -12px;
  color: #190327;
  text-transform: uppercase;
  text-shadow: -1px -1px 0px #8b43ce, 1px 1px 0px #ef256c;
  letter-spacing: -20px;
}

.dendingac_rosanels .dendingac_rosanels-404 h2 {
  font-family: 'Montserrat', sans-serif;
  position: absolute;
  left: 0;
  right: 0;
  top: 110px;
  /* font-size: 42px; */
  font-weight: 700;
  color: #dadada;
  text-transform: uppercase;
  text-shadow: 0px 2px 0px #e00cb3;
  letter-spacing: 14px;
  margin: 0;
}

.dendingac_rosanels a {
  font-family: 'Montserrat', sans-serif;
  display: inline-block;
  text-transform: uppercase;
  color: #ff005a;
  text-decoration: none;
  border: 2px solid;
  background: transparent;
  padding: 10px 40px;
  font-size: 14px;
  font-weight: 700;
  -webkit-transition: 0.2s all;
  transition: 0.2s all;
}

.dendingac_rosanels a:hover {
  color: #8400ff;
}

@media only screen and (max-width: 767px) {
  .dendingac_rosanels .dendingac_rosanels-404 h2 {
  font-size: 28px;
  }
}

@media only screen and (max-width: 480px) {
  .dendingac_rosanels .dendingac_rosanels-404 h1 {
  font-size: 132px;
  }
}</style>


Вариант 2. Симпатичная страничка с анимацией и переходом на главную страницу.

анимация страницы 404

Чтобы посмотреть на странице вбейте в поиск https://prostotestblog.blogspot.com/лоо

Код

<div id="notfound">
  <div class="notfound">
  <div class="notfound-404">
  <h1>4<span></span>4</h1>
  </div>
  <h2>Oops! Страница не найдена</h2>
  <p>Извините, но страница, которую вы ищете, не существует. Возможно была удалена или временно не доступна</p>
  <a href="http://www.shpargalochki.ru/">Вернуться на главную страницу</a>
  </div>
</div>
<style>
#notfound {
  position: relative;
  height: 100vh;
}

#notfound .notfound {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.notfound {
  max-width: 520px;
  width: 100%;
  text-align: center;
  line-height: 1.4;
}

.notfound .notfound-404 {
  height: 190px;
}

.notfound .notfound-404 h1 {
  font-family: "Montserrat", sans-serif;
  font-size: 146px;
  font-weight: 700;
  margin: 0px;
  color: #232323;
}

.notfound .notfound-404 h1 > span {
  display: inline-block;
  width: 120px;
  height: 120px;
  background-image: url("https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/160/mozilla/36/pensive-face_1f614.png");
  background-size: cover;
  -webkit-transform: scale(1.4);
  -ms-transform: scale(1.4);
  transform: scale(1.4);
  z-index: -1;
  animation-name: floating;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

.notfound h2 {
  font-family: "Montserrat", sans-serif;
  font-size: 22px;
  font-weight: 700;
  margin: 0;
  text-transform: uppercase;
  color: #232323;
}

.notfound p {
  font-family: "Montserrat", sans-serif;
  color: #787878;
  font-weight: 300;
}

.notfound a {
  font-family: "Montserrat", sans-serif;
  display: inline-block;
  padding: 12px 30px;
  font-weight: 700;
  background-color: #f99827;
  color: #fff;
  border-radius: 40px;
  text-decoration: none;
  -webkit-transition: 0.2s all;
  transition: 0.2s all;
}

.notfound a:hover {
  opacity: 0.8;
}

@media only screen and (max-width: 767px) {
  .notfound .notfound-404 {
  height: 115px;
  }
  .notfound .notfound-404 h1 {
  font-size: 86px;
  }
  .notfound .notfound-404 h1 > span {
  width: 86px;
  height: 86px;
  }
}

@keyframes floating {
  from {
  transform: scale(1.4) translate(0, 0);
  }

  50% {
  transform: scale(1.4) translate(0, 15px);
  }

  to {
  transform: scale(1.4) translate(0, 0);
  }
}

</style>


Вариант 3. Совсем простая страничка. Картинку можно поменять на более жизнеутверждающую

светлая страница ошибка 404

Чтобы увидеть вбейте в поиск https://teststudiblog.blogspot.com/лоло

Код

<div id="tukortunovounal">
  <img src="https://pngicon.ru/file/uploads/ljagushonok-pepe-256x243.png" id="logo404">
  <h1>Вау ... Как не хорошо получилось!</h1>
  <h2>Пожалуйста перейдите на<a href="http://www.shpargalochki.ru/" target="_blank"> главную страницу</a></h2>
</div>
<style>
.ncelede-dupcoming {
  width: 100%;
  height: 100%;
  position: relative;
  margin: 0;
  padding: 0;
  top: -100px;
  opacity: 0.05;
  z-index: 230;
  user-select: none;
  user-drag: none;
}

.mosterta-inlymoved {
  text-align: center;
  font-family: 'Gilda Display', serif;
  font-size: 95px;
  font-style: italic;
  text-align: center;
  width: 100px;
  height: 60px;
  line-height: 60px;
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60px;
  right: 0;
  animation: noise 2s linear infinite;
  overflow: default;
}

.mosterta-inlymoved:after {
  content: '404';
  font-family: 'Gilda Display', serif;
  font-size: 100px;
  font-style: italic;
  text-align: center;
  width: 163px;
  height: 57px;
  line-height: 57px;
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0;
  color: blue;
  animation: noise-1 .2s linear infinite;
}

.tenarkedes {
  text-align: center;
  font-family: 'Gilda Display', serif;
  font-size: 23px;
  font-style: italic;
  text-align: center;
  width: 225px;
  height: 58px;
  line-height: 59px;
  margin: auto;
  position: absolute;
  top: 153px;
  bottom: 0;
  left: 0;
  right: 0;
  animation: noise-3 3s linear infinite;
}

.mosterta-inlymoved:before {
  content: '404';
  font-family: 'Gilda Display', serif;
  font-size: 100px;
  font-style: italic;
  text-align: center;
  width: 97px;
  height: 58px;
  line-height: 58px;
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0;
  color: red;
  animation: noise-2 .3s linear infinite;
}

@keyframes noise-1 {
  0%, 20%, 40%, 60%, 70%, 90% {opacity: 0;}
  10% {opacity: .1;}
  50% {opacity: .5; left: -6px;}
  80% {opacity: .3;}
  100% {opacity: .6; left: 2px;}
}

@keyframes noise-2 {
  0%, 20%, 40%, 60%, 70%, 90% {opacity: 0;}
  10% {opacity: .1;}
  50% {opacity: .5; left: 6px;}
  80% {opacity: .3;}
  100% {opacity: .6; left: -2px;}
}

@keyframes noise {
  0%, 3%, 5%, 42%, 44%, 100% {opacity: 1; transform: scaleY(1);}
  4.3% {opacity: 1; transform: scaleY(1.7);}
  43% {opacity: 1; transform: scaleX(1.5);}
}

@keyframes noise-3 {
  0%,3%,5%,42%,44%,100% {opacity: 1; transform: scaleY(1);}
  4.3% {opacity: 1; transform: scaleY(4);}
  43% {opacity: 1; transform: scaleX(10) rotate(60deg);}
}</style>


Вариант 4. Вот такая с котейкой. Тоже с картинкой и соответствующими ссылками.

страница 404 с котиком

Вбейте в поиск https://test-tri.blogspot.com/лоло

Код

<table width="100%" style="height:100%;" border="0" cellspacing="0" cellpadding="0">
<tbody><tr>
<td height="100%" align="center" valign="top">

<div style="height:400px;width:70%;overflow:hidden;position:relative">
<img src="https://image.freepik.com/free-vector/404_114360-1900.jpg" alt="" style="position:absolute;left:0;top:0;width:100%;height:100%" />
<div style="position:absolute;left:0;top:0;z-index:1;width:100%;height:100%"><span style="color:purple"><span style="font-family:'Geneva'"><span style="font-size:23pt"><b>Страница 404</b></span></span></span></div> </div>
<tbody><tr>
<td>
<h1>Страница не найдена! (ошибка 404)</h1>
<p>Ну и дела! На сайте <a href="http://www.shpargalochki.ru/"></a> нет такой страницы!<br>
Причины могут быть разные</p>
<ul>
<p>Вы ошиблись, набирая адрес</p>
<p>Страница была давно удалена и ваша ссылка устарела</p>
</ul>
<p><a href="http://www.shpargalochki.ru/">Перейдите на главную страницу сайта ШПАРГАЛКИ БЛОГЕРШИ"</a> чтобы продолжить работу.</p>
</td>
</tr>
</tbody></table>


Вариант 5. Такое оформление в виде анимации заставит улыбнуться пользователя

анимационная страница 404

Чтобы увидеть на странице вбейте в поиск https://dlynaglydnosti.blogspot.com/лоо

Код

<section class="page_404">
  <div class="container">
  <div class="row">
  <div class="col-sm-12 ">
  <div class="col-sm-10 col-sm-offset-1 text-center">
  <div class="four_zero_four_bg">
  <h1 class="text-center ">404</h1>
</div>
 
  <div class="contant_box_404">
  <h3 class="h2">
  Ой, что - то пошло не так
  </h3>
 
  <p>страница, которую вы ищете, недоступна!</p>
 
  <a href="http://www.shpargalochki.ru/" class="link_404">перейдите на главную</a>
  </div>
  </div>
  </div>
  </div>
  </div>
</section>
<style>.page_404{ padding:40px 0; background:#fff; font-family: 'Arvo', serif;
}

.page_404 img{ width:100%;}

.four_zero_four_bg{
 
  background-image: url(http://zornet.ru/Abavaga/dribbble_1.gif);
  height: 400px;
  background-position: center;
  }
 
 
  .four_zero_four_bg h1{
  font-size:80px;
  }
 
  .four_zero_four_bg h3{
  font-size:80px;
  }
 
  .link_404{
  color: #fff!important;
  padding: 10px 20px;
  background: #39ac31;
  margin: 20px 0;
  display: inline-block;}
  .contant_box_404{ margin-top:-50px;}

</style>


Во всех кодах пишите свои тексты, меняйте картинки если нужно и вставляйте нужные ссылки на главную, контакты, содержание. Туда куда вы предлагаете перейти пользователю.

Теперь как и куда вставлять коды. Если работаете в старом интерфейсе Блоггер, то в статье, ссылка на которую в начале этого поста, подробно написано про это. В обновлённом интерфейсе, идём тем же путём. Админпанель - настройки и в длинном списке находим функцию персонализированная страница об ошибке 404. Нажимаем и в открывшемся окне вставляем код, выбранной вами страницы. не забудьте сохранить.



Всё. Обязательно оформляйте вашу страницу с ошибками 404. Пусть она будут интересной и уникальной.

Все добра, удачи и летних денёчков. 

хотите оформить подписку на новые шпаргалки

введите пожалуйста свой email :

45 комментариев:

  1. все варианты классные,но жабка просто супер,забрала себе,спасибо Вика за чудесную идею

    ОтветитьУдалить
    Ответы
    1. Infodar, думала что жаба не понравится. Я её взяла первую, что под руку попалась. А оно вон как.

      Удалить
  2. Жабочка мне тоже понравилась. Но мой Серый все равно лучший.

    ОтветитьУдалить
  3. Черт, Вика, вроде разобрался в новом интерфейсе. Все нашел, кроме знака разрыва текста (значок с изображением разрыва), а без него как?

    ОтветитьУдалить
  4. Семён, значок читать дальше (разрыва) в редакторе около смайлика справа в виде двух чёрточек. А вместо жабы и Серого фотку можно поставить.

    ОтветитьУдалить
    Ответы
    1. Немедленно разберусь в разрыве. А Серого буду пихать во все чаты! Абсолютно гениальная собака, не то, что жабки!

      Удалить
    2. Спасибо, Вика! С разрывом разобрался. А в целом, новый интерфейс мне очень нравится.

      Удалить
  5. Приветик, Вика! Столько красоты выложила :-) А я свою как поставила вначале, так до сих пор и стоит...))) Спасибо, обязательно воспользуюсь, пора уже что-то поменять. :-)

    ОтветитьУдалить
    Ответы
    1. Елена, привет. А я люблю с ними играться. Попробуй сои каие картинки поставить. здорово будет.

      Удалить
  6. Вика, а у меня, оказывается проблема... ((( Кинулась, а у меня и старая страница не отображается... Открыла страницы, а там и страницы этой совсем нет почему-то...
    Попробовала сделать все заново, в новом интерфейсе не получается. Сделала все в старом, завела страничку, все настроила, скопировала код и вставила в Персонализированное сообщение об ошибке "Страница не найдена" . Страница работает, когда ее открываю, а когда ввожу в поде поиска неправильный адрес, открывается пустая страница... Вот теперь не знаю, можно ли это как-нибудь исправить... или уже оставить все так как есть...

    ОтветитьУдалить
  7. Вика, попробуй, пожалуйста, зайти ко мне с ошибкой в адресе... Если что, вот такая должна быть сейчас у меня страница https://mirosslava55.blogspot.com/p/404_51.html

    ОтветитьУдалить
  8. Елена, так просто код из этой статьи возьми и вставь в сообщение об ошибке "Страница не найдена". Со своими данными конечно.

    ОтветитьУдалить
    Ответы
    1. Так я вставляла... Брала код готовый, вставляла свой адрес и... В новом интерфейсе вставляла как написано, пишут не закрыт тег, код не принимается, пробовала закрыть, не получается... Все равно страница пустая открывается... Затем пробовала это проделать в старом интерфейсе без страницы и со страницей... Вобщим с готовыми кодами не работает у меня, а некоторые из них показывают вообще абракадабру... Короче, у меня постоянно что-то глючит и не работает. А я в кодах не мастер, может где-то в коде сайта ошибка, но я не умею ее найти... Без 404, конечно, плохо, но что делать...

      Удалить
  9. Елена, вышлите мне на почту тот код, который стоит в сообщении на странице. возможно переводчик срабатывает поэтому и аброкадабра.

    ОтветитьУдалить
    Ответы
    1. Я переводчик отключила, все сделала по новой. Теперь у меня вот такая страничка - https://mirosslava55.blogspot.com/p/blog-page_81.html
      Но все равно при ошибке открывается пустая страница... Я уже думаю - может я ошибки в адресе неправильно пишу ))) аж самой стало смешно...

      Удалить
  10. Елена, НЕ НУЖНО СОЗДАВАТЬ отдельную страницу, а потом с неё копировать код и вставлять. Там видимо разметка другая. Просто сразу в окно в Персонализированное сообщение об ошибке "Страница не найдена"

    ОтветитьУдалить
    Ответы
    1. Ну все ((( Я больше не могу... Аж до слез уже... Я удалила страницы, скопировала коды, вставила все по очереди и ничего... у меня открывается вот такая страница https://ia.wampi.ru/2020/07/06/Clip2net_200706153303.png
      При этом, я вставляла все эти коды к себе и переходила потом на твою страницу. На всех открывается твоя красота. Больше сил нет, пусть будет уже без нее...

      Удалить
    2. Я имела в виду - вставляла все коды с твоим адресом и они работают, а с моим адресом не работают...

      Удалить
    3. Кстати, в тестовом блоге у меня та же история. Хочется уже удалить этот блог, да жалко, столько в него вложено. Может пора на новый решиться )))

      Удалить
  11. Обычно сам рисовал. Но сделал новый блог - и позор, забыл о странице с ошибкой. А тут все сделано. Забрал кота))))https://silverboxmdm.blogspot.com/p/news.html/ А вообще лениться нельзя, эти мелочи помогают блогу)

    ОтветитьУдалить
    Ответы
    1. Light Knight Ааа.. посмотрела. Здорово.

      Удалить
    2. Чудесно, мне очень понравилось. А у меня не работает...

      Удалить
  12. Елена. Отдохнуть надо просто тебе. С каким твоим и моим адресом. Тут только адреса страниц на главную и прочие. Про какой адрес ты. Да видела эту пустую страничку у тебя. давай так . Успокойся и завтра подробно мне напиши через форму связи все твои шаги и код, куда ты и что вставляешь. всё должно получиться.

    ОтветитьУдалить
    Ответы
    1. Вика, дорогая, я все уже писала... Адрес - имею в виду твой адрес блога - я вставляла к себе, а потом пробовала открывать твои странички, все работает. А че тут подробно рассказывать - скопировала код, вставила вместо твоего свой адрес блога, а потом вставила в "Персонализированное сообщение об ошибке 404". ВСЁ!

      Удалить
  13. Там надо дважды адрес сменить. Т.е. сделать замены адреса Вики на свой

    ОтветитьУдалить
  14. Елена, отправила на почту сообщение

    ОтветитьУдалить
    Ответы
    1. Что то нету письма... может я адрес неправильно написала, вроде проверяла. Щас еще раз тебе напишу.

      Удалить
  15. В ВКонтакте продублировала письмо.

    ОтветитьУдалить
    Ответы
    1. Привет Вика. Странички супер. А сообщения сейчас не доходят, в блоггер сломан виджет Форма для связи. Я у себя предупредила читателей, что форма временно не работает, в Google отправила письмо о проблеме, будем ждать.

      Удалить
  16. Оля, как я рада тебя видеть. Спасибо, что нашла время. Дело в том, что у Елены сторонняя форма связи. Там в шаблоне накоясечено. А остальные вроде (у меня так - то работают). Но как мы знаем пути Гугл неисповедимы.

    ОтветитьУдалить
  17. Девочки, Olga Protasova, Вика - оказывается, у меня действительно перестала работать форма обратной связи. Я нашла рабочую, теперь все нормально (хотя раньше и со старой все было нормально, как быстро все меняется). Вика, как будет время и желание, напиши мне что-нибудь через форму. Спасибо! Приятного вечера!!! )))

    ОтветитьУдалить
  18. Ирина, выбирай любую.

    ОтветитьУдалить
    Ответы
    1. прошла ща по статье одной у тебя,хотела посмотреть че там такое,а у тебя такой потешный там мопсик лежит,как раз из серии "не туда попали",суперский пёсик

      Удалить
  19. Да у меня и в этой статье ссылка на пёсика.

    ОтветитьУдалить
  20. жабка пусть посидит у меня чуток,она шкодная,потом песика твоего поставлю для разнообразия

    ОтветитьУдалить
  21. So it appears as it is removed or another matter someone removes, wrong page is made.

    ОтветитьУдалить
    Ответы
    1. Yes exactly. When the page is deleted for some reason or the address is not correct

      Удалить
  22. Интересные вариант! Особенно мне понравились второй и, конечно же, четвертый дизайн с котейкой )))

    ОтветитьУдалить
  23. Вика, у меня вопросик.
    Вот когда начинаем делать страницу с ошибкой, то как надо озаглавить эту страницу, что нужно написать по латинице?

    ОтветитьУдалить
  24. Ольга. Я дала уже готовые коды и не нужно делать не какую страницу. Просто копируете понравившейся и идёте путём Админпанель - настройки- настройки поиска Персонализированное сообщение об ошибке "Страница не найдена" Нажимаем и в открывшемся окне вставляем код, выбранной вами страницы. не забудьте сохранить.
    Это в старом сообщении я приводила пример, как самому можно создать страницу с которой потом код копировали и потом вставляли . В этом случае коды уже готовые. Не надо создавать отдельной страницы ни какой. И название ни какое не нужно. Если сами вдруг надумаете сделать, как в прошлом варианте то всё равно как бы вы страницу не назвали смысла нет. Её потом удаляют после установки кода.

    ОтветитьУдалить

ВСЕГДА РАДА УСЛЫШАТЬ ВАШЕ МНЕНИЕ!
Ели у вас возникла необходимость опубликовать код в комментарии, то воспользуйтесь encoder HTML