» » Страница 404. Урок 13

Страница 404. Урок 13

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

Сообщение об ошибке "Страница не найдена"

Нам нужен любой XTML редактор, желательно визуальный. Я делала в редакторе самого блога. Удобно тем, что картинки не нужно отправлять в фотохостинг. Можно так же делать страницу на тестовом блоге.

Никаких особых, специальных кодов, как для виджетов, нам не потребуется. Нужны только картинки, если есть желание, то можно поискать красивый CSS текст и рамки.
Подойдут анимированные картинки, различные гифки. Одним словом, делайте страничку по своему вкусу.

Открываем редактор и либо пишем текст (в режиме создать), либо ставим какой-нибудь код с красивым текстом (в режиме ХТМЛ). Какой текст писать? На ваш вкус - смешной, серьёзный и так далее, что бы он подходил картинке, если вы её поставите на страницу 404.
В тексте сообщите об ошибке и тут же предложите читателю другие варианты действий, что бы он остался на сайте. Например: перейти на главную страницу блога, посмотреть карту сайта или найти что-нибудь в поиске по блогу. Заинтересуйте посетителя!

Если нет желания заморачиваться - напишите простой текст Ошибка 404 и дайте ссылку на Главную страницу своего блога.

Ещё вариант - поставить на этой странице простенькую игру и конечно не забыть про ссылки на главную страницу вашего сайта.

Созданную страницу копируем из редактора (в режиме XTML!) и вставляем в окно настроек - Персонализированное сообщение об ошибке "Страница не найдена".
Страница не найдена
Сделала для вас несколько страничек ошибки 404, коды ниже. Если понравились - пользуйтесь. Только внесите несколько изменений в код.
Страница не найдена
Круги расходятся от центра как радиоволны. Идею нашла на сайте https://atuin.ru/. Можно ничего не менять, если вас устраивает страница, кроме ссылки на Главную страницу - её выделила синим. Иначе, ваши читатели попадут ко мне на блог.
Код:
<style>
.my_tekst-1 {
  margin: 40px auto;
  text-align: center;
  padding: 20px 10px;
  color: #2c2c2c;
  font: 700 40px/1 "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-shadow:
4px 4px 0px #d5d5d5,
7px 7px 0px rgba(0, 0, 0, 0.2);
}
</style>

<div class="my_tekst-1" style="text-align: center;">
ТАКОЙ СТРАНИЦЫ НЕТ НА САЙТЕ</div>
<div class="radiowave">
<div class="btn-data">
<div class="btn-text">
<div style="text-align: center;">
Внимание! Ошибка 404</div>
</div>
<span class="wave"></span>
        <span class="wave"></span>
        <span class="wave"></span>
        <span class="wave"></span>
    </div>
</div>
<style>
.radiowave {
    position: relative;
    display: inline-block;
    z-index: 1000;
}
.radiowave .btn-data {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #cab9f0; /* фон круга */
    border: 12px solid #7d64e0; /* окантовка круга */
    border-radius: 50%;
    height: 140px;
    width: 140px; 
}
.radiowave .btn-text {
    font-family: 'Roboto Condensed', Tahoma, sans-serif;
    color: #FFF; /* цвет текста в круге */
    font-size: 30px;  /* размер текста в круге */
}
.radiowave .wave {
    border-radius: 50%;
    border: 4px solid #7d64e0; /* цвет расходящихся кругов */
    position: absolute;
    animation: radio 4s linear infinite;
    z-index: -1;
    pointer-events: none;
}
.radiowave .wave:nth-of-type(2) {
    animation-delay: 1s;
}
.radiowave .wave:nth-of-type(3) {
    animation-delay: 2s;
}
.radiowave .wave:nth-of-type(4) {
    animation-delay: 3s;
}
.radiowave:hover .wave {
    animation-play-state: paused;
}
@keyframes radio {
    0% {
        width: 0;
        height: 0;
    }
    30% {
        opacity: 0.8;
    }
    80% {
        opacity: 0.6;
    }
    100% {
        width: 800px; /* размер расходящихся кругов */
        height: 800px; /* размер расходящихся кругов */
        opacity: 0;
    }
}</style>
<style>
.my_tekst-2 {
  margin: 40px auto;
  text-align: center;
  padding: 20px 10px;
  color: #2c2c2c;
  font: 700 40px/1 "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-shadow:
4px 4px 0px #d5d5d5,
7px 7px 0px rgba(0, 0, 0, 0.2);
}
</style>

<br />
<div class="my_tekst-2" style="text-align: center;">
ПОИЩИТЕ НУЖНУЮ ИНФОРМАЦИЮ НА <a href="https://inshabashka.blogspot.com/" rel="nofollow" target="_blank">ГЛАВНОЙ СТРАНИЦЕ</a></div>

Зелёным выделила текст, который можно поменять.
Красным - размеры и цвета круга с радиоволнами.
Страница не найдена 2
Код:
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiD8WSp1cHnBcrZJHRz3brrDSx8dmD2YLM8u8QL9O-7BPBPr5yKHsT6_UIPZizgPqqYWinU2lH0u6BuKBK3cY29h5WX7vwirBOWjvTPpbPLsLCUpXJYgriU6CPHlFnrb9BrcpqMYzaQgaM/s1600/og_og_.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="ошибка 404" border="0" data-original-height="767" data-original-width="1000" height="491" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiD8WSp1cHnBcrZJHRz3brrDSx8dmD2YLM8u8QL9O-7BPBPr5yKHsT6_UIPZizgPqqYWinU2lH0u6BuKBK3cY29h5WX7vwirBOWjvTPpbPLsLCUpXJYgriU6CPHlFnrb9BrcpqMYzaQgaM/s640/og_og_.jpg" title="ошибка 404" width="640" /></a></div>
<style>
.my_tekst-20 {
  margin: 40px auto;
  text-align: center;
  padding: 20px 10px 24px;
  color: #444;
  font:  300 30px/30px 'Fredoka One', sans-serif;
  text-shadow: 0 2px 0 #f6f7f5,
0 3px 0 #ccc,
0 4px 0 #ccc,
0 5px 0 #ccc,
0 6px 0 #ccc;
}
</style>
<div class="my_tekst-20" style="text-align: center;">
Не мучайте кота, нужной вам страницы у него нет.<br />
&nbsp;Возможно её и никогда не было.<br />
&nbsp;Лучше посетите <a href="https://inshabashka.blogspot.com/" rel="nofollow" target="_blank">Главную страницу</a> или <a href="https://inshabashka.blogspot.com/p/blog-page.html" rel="nofollow" target="_blank">Карту блога</a>, там вы найдёте много других, интересных сообщений.
</div>
Поменяйте текст и ссылки в коде.
Страница не найдена 3
Эта страница с анимированным текстом. Так же поменяйте в коде ссылку и текст.
Код:
<div class="separator" style="clear: both; text-align: center;">
<img alt="ошибка 404" border="0" data-original-height="842" data-original-width="1000" height="538" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9EqKlIU28mGwpOFHXcvgwOGXoEFpSZE8prZGMmXbM_XRHuKC78-U36xGKgzAd1UE_Nuc_qpDODrWZxZi4Pa_FB0IY8O8DdRfGrkpWBW367Y0Bwy_2H5HOFJkQYjm4Hc_QOnkerKvdcp3O/s640/animals.jpg" title="ошибка 404" width="640" /></div>
<div class="pouring">
Уважаемый читатель!<br />
Извините, но похоже что статьи, которую вы искали на сайте нет.<br />
Код ошибки 404<br />
Не злитесь, заходите ко мне в гости на <a href="https://inshabashka.blogspot.com/" rel="nofollow" target="_blank">Главную страницу</a>, уверена вы найдёте там много других интересных статей.</div>
<style>.pouring {
    font-size: 30px;
    line-height: 40px;
    font-family: Verdana, sans-serif;
    font-weight: 500;
    position: relative;
    background: white;
    overflow: hidden;
    text-align: center;
}
.pouring:before {
    content: '';
    position: absolute;
    filter: blur(10px);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    mix-blend-mode: screen;
    background-image: repeating-linear-gradient(-45deg, transparent, transparent 1em, #ffffff 1em,
#333528 50%), repeating-linear-gradient(45deg, #000000, #000000 1em, #FFF 1em, #262720 50%);
    background-size: 3em 3em, 2em 2em;
    animation-name: ani;
    animation-duration: 10s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
@keyframes ani {
    from {
        background-position: 0 0;
    }
    to {
        background-position: 100% 0;
    }
}
@media (max-width:690px) { 
    .pouring {font-size: 20px;} 
}</style>
Зелёным выделила цвета букв в тексте.
Страница не найдена 4
Код:
<div class="my_tekst-8" style="text-align: center;">
Ошибка 404</div>
<style>
.my_tekst-8 {
  margin: 40px auto;
  text-align: center;
  padding: 20px 10px 20px;
  color: red;
  font: 100 40px/1 "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
  background: transparent;
  letter-spacing: 5px;
  text-shadow: -1px -1px 0px #420000, 2px 2px 0px #eaeaea, 3px 3px 0px #814359;
}
</style>
<table cellpadding="0" cellspacing="0" style="background: transparent; border: 1px solid transparent; margin: 0 0 10px 0; width: 244px;"><tbody>
<tr><td style="color: black; font-family: &quot;verdana&quot;; font-size: 11px; padding: 5px 5px;"><div style="text-align: center;">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" height="480" width="640"><param name="movie" value="https://www.games68.com/games/bubble_shooter.swf"><param name="quality" value="high"></param>
<param name="menu" value="false"></param>
<embed src="https://www.games68.com/games/bubble_shooter.swf" width="640" height="480" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" menu="false" wmode="direct"></embed></object></div>
</td></tr>
<tr><td align="center" style="border-top: 1px solid transparent; font-family: &quot;verdana&quot;; font-size: 11px; padding: 5px 10px;"><br /></td></tr>
</tbody></table>
<div class="my_tekst-8" style="text-align: center;">
Как только наиграетесь, милости прошу на <a href="https://inshabashka.blogspot.com/" rel="nofollow" target="_blank">Главную страницу</a>!
Жаль только странички, которую вы искали на сайте - нет, но надеюсь вам понравятся другие сообщения.</div>
<style>
.my_tekst-8 {
  margin: 40px auto;
  text-align: center;
  padding: 20px 10px 20px;
  color: dimgray;
  font: 100 40px/1 "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
  background:  transparent;
  letter-spacing: 5px;
  text-shadow: -1px -1px 0px #420000, 2px 2px 0px #eaeaea, 3px 3px 0px #814359;
}
</style>
Меняйте в коде слова и ссылку.
Проверить установилась или нет страница можно вставив в браузерную строку такую строчку:
https://inshabashka.blogspot.com/tratata/
Вместо моего адреса блога, поставьте свой.

Идеи для страниц 404 можно подсмотреть:
https://yraaa.ru/templates/original-404-ucoz
https://freefrontend.com/html-css-404-page-templates/
https://obninsksite.ru/blog/html-and-css/404-oformlenie
http://beloweb.ru/shablonyi/neskolko-besplatnyih-i-adaptivnyih-html-stranits-s-404-oshibkoy.html
https://tproger.ru/devnull/best-404-notfound-pages/
https://nisnom.com/veb-razrabotki/krasivaya-css-animatsiya-dlya-404-stranitsy/

Отправить комментарий

Комментарии со спамом удаляются.