Страница 404. Урок 13
Дополнение на 26.09.2021
На Блоггере изменился внешний вид настроек, редактора, некоторых элементов, но функции остались прежними.
Сообщение об ошибке "Страница не найдена"
Нам нужен любой XTML редактор, желательно визуальный. Я делала в редакторе самого блога. Удобно тем, что картинки не нужно отправлять в фотохостинг. Можно так же делать страницу на тестовом блоге.
Никаких особых, специальных кодов, как для виджетов, нам не потребуется. Нужны только картинки, если есть желание, то можно поискать красивый CSS текст и рамки.
Подойдут анимированные картинки, различные гифки. Одним словом, делайте страничку по своему вкусу.
Подойдут анимированные картинки, различные гифки. Одним словом, делайте страничку по своему вкусу.
Открываем редактор и либо пишем текст (в режиме создать), либо ставим какой-нибудь код с красивым текстом (в режиме ХТМЛ). Какой текст писать? На ваш вкус - смешной, серьёзный и так далее, что бы он подходил картинке, если вы её поставите на страницу 404.
В тексте сообщите об ошибке и тут же предложите читателю другие варианты действий, что бы он остался на сайте. Например: перейти на главную страницу блога, посмотреть карту сайта или найти что-нибудь в поиске по блогу. Заинтересуйте посетителя!
Если нет желания заморачиваться - напишите простой текст Ошибка 404 и дайте ссылку на Главную страницу своего блога.
Ещё вариант - поставить на этой странице простенькую игру и конечно не забыть про ссылки на главную страницу вашего сайта.
Созданную страницу копируем из редактора (в режиме XTML!) и вставляем в окно настроек - Персонализированное сообщение об ошибке "Страница не найдена".
Код:
<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>
.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>
Красным - размеры и цвета круга с радиоволнами.
<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 />
Возможно её и никогда не было.<br />
Лучше посетите <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>
Поменяйте текст и ссылки в коде.<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 />
Возможно её и никогда не было.<br />
Лучше посетите <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>
Код:
<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>
Зелёным выделила цвета букв в тексте.<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>
<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: "verdana"; 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: "verdana"; 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>
Меняйте в коде слова и ссылку.Ошибка 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: "verdana"; 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: "verdana"; 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/
Комментарии со спамом удаляются.