На блоге, созданном на Blogger, можно создать страницу
ошибки 404.
Эта страница нужна, если посетитель случайно перейдёт по
битой ссылке или по ссылке на удалённую с блога страницу.
Что такое битые ссылки?
Битая ссылка — это ссылка на несуществующую страницу или изображение.
Переходя по битой ссылке, пользователь видит сообщение о том, что страница не
найдена или видит служебную страницу сервера. Чем вредят блогу битые ссылки? Переходя по битой ссылке посетитель, как правило, уже не
возвращается на блог. Особенно если это новый посетитель, который у вас на
блоге впервые. Стоит ли тратить столько усилий на привлечение посетителей,
чтобы так легко их терять?
Но без битых ссылок и удалённых страниц не
обойдёшься, т.к. чистить блог тоже нужно.
Именно поэтому предлагаю создать на блоге страницу ошибки
404 с подсказками для пользователей.
Грамотными веб-разработчиками создан готовый HTML-код (его нет необходимости менять, если
только поставить ссылку на другую картинку), обладающий многими преимуществами:
- его легко редактировать,
- простая установка на блог,
- HTML-код содержит активную ссылку на главную страницу
блога, - в этом коде максимальное количество активных внутренних
ссылок на минимальной площади, - ссылки автоматически будут меняться по мере наполнения
блога новыми статьями.
Для создания HTML-кода был использован скрипт «Виджет
— последние статьи в бегущей строке».
Как настроить персонализированное сообщение об ошибке
«Страница не найдена»?
В Blogger,
административной панели блога открываем вкладку «Настройки» – «Настройки поиска»
– «Ошибки и переадресации» – «Персонализированное сообщение об ошибке
«Страница не найдена»» – «Изменить».
В открывшееся окошко вставляем HTML-код персонализированного
сообщения об ошибке «Страница не найдена», заменив в 2-х местах ссылку
на мой блог на ссылку на свой блог (ссылка выделена красным цветом).
HTML-код персонализированного сообщения об ошибке
«Страница не найдена»:
<style>
.status-msg-wrap {
margin: 10px auto;
background: #f8f8f8
url(http://4.bp.blogspot.com/-oKwlO_KTR5A/T2zWn4GadbI/AAAAAAAAC0U/RoBdswDpIuc/s1600/404.jpg)
no-repeat 50% 0%;
padding: 435px 5px 0px 5px;
}
.status-msg-body,
body, .body-fauxcolumn-outer, .status-msg-body
{
background: #f8f8f8;
outline: 5px solid #f8f8f8; outline-offset:
-2px;
}
</style>
<div
style=»color: red; font-size: 20px; font-weight: bold;»>Запрашиваемая страница не найдена</div>
<div
style=»font-size: 17px; font-weight: bold;»>ошибка 404 <a
href=»http://shpargalkablog.ru/2012/03/404.html»>?</a> </div>
<br />
<div
style=»text-align: left;padding: 0 10px;»>
<span style=»color: red; font-size:
17px; font-weight: bold;»>Что делать?</span>
<ol>
<li>Вновь
ввести адрес страницы в строку браузера, возможно была допущена
опечатка</li>
<li>Сократить адрес страницы до слэш, например, из
<pre>http://postupenjkamuspexa.blogspot.com/2014/08/404.html</pre>
сделать
<pre>http://postupenjkamuspexa.blogspot.com/2014/08/.html</pre></li>
<li>Воспользоваться поиском от Яндекса, Google <!— код поиска
( от Яндекса, Google) —> </li>
<li>Начать с <a href=»/»>Главной
страницы</a></li>
</ol>
</div>
</br></br>
После вставки HTML-кода нажимаем кнопку «Сохранить
изменения».
Чтобы проверить видимость страницы ошибки 404, в адресную
строку браузера введите URL-адрес
своего блога, добавив окончание /xyz/:
Нажмите на клавиатуре Enter и увидите красиво и
функционально оформленную страницу «Ошибка 404».
Разобравшись в предыдущих статьях с обновлениями встроенного редактора и метатегами описаний, мы плавно переходим к ещё одной очень важной настройке, которая появилась вместе с целым арсеналом инструментов поискового продвижения в новом интерфейсе Blogger.
Речь пойдёт о создании страницы ошибки 404.
Ничего таинственного и загадочного за этим набором цифр не скрывается! На страницу ошибки 404 пользователь Интернета попадает в случае перехода по битой ссылке, или по ссылке на удалённую страницу.
Долгое время эту функцию в Blogger выполнял скучный, унылый блок, который просто сообщал об ошибке и не нёс никакой другой полезной нагрузки. Вследствие этого авторы блогов теряли большое количество потенциальных читателей.
Теперь, благодаря усилиям разработчиков Blogger, мы можем создавать самые продвинутые и функциональные страницы ошибки 404.
Всё дело в том, что в форму создания страницы можно добавлять не только простой текст, но и полноценный HTML код. Это открывает новые просторы для творчества — внешний вид и эффективность страницы будет зависеть только от вашей фантазии и качества ссылок, картинок и скриптов, использованных при её создании.
Для тех, кому лень, или некогда заниматься творчеством — предлагаю готовый код, который обладает целым рядом преимуществ:
1. Его легко редактировать
2. Простая интеграция в блог
3. Он содержит действующую ссылку на главную страницу блога
4. В этом коде максимальное количество активных внутренних ссылок на минимальной площади
5. Ссылки автоматически будут меняться по мере наполнения блога новыми статьями
Для создания кода был использован скрипт из материала «Виджет последние статьи в бегущей строке».
Страница ошибки 404 для Blogger — установка
1. Заходим в Настройки — Настройки поиска — Ошибки и переадресации — Персонализированные сообщения об ошибке «Страница не найдена» — Изменить
2. В открывшееся окно вводим следующий код:
<div style=»text-align: center;»>
<span style=»color: #cc0000; font-size: large;»><b>Ой!!!</b></span></div>
<div style=»text-align: center;»>
</div>
<h3 style=»text-align: -webkit-auto;»>
<div style=»text-align: center;»>
<span style=»font-size: large;»>Вы оказались здесь, нажав на ссылку, </span></div>
<div style=»text-align: center;»>
<span style=»font-size: large;»>которая больше не работает!</span></div>
</h3>
<div align=»center»>
<span style=»color: #ed9e1f; font-size: 150px;»><strong>404</strong></span></div>
<br />
<div style=»text-align: center;»>
<span style=»font-size: large;»>Попробуйте перейти на</span><br />
<span style=»font-size: large;»> <a href=»http://vsegenialno.blogspot.com/«>Главную страницу блога</a>!</span><br />
<span style=»font-size: large;»>Или на одну из последних статей:</span></div>
<script src=»http://bloggertrickandtoolz.googlecode.com/files/bloggertricksandtoolz.js»></script><script>
var nMaxPosts = 15; var sBgColor; var nWidth; var nScrollDelay = 175; var sDirection=»left»; var sOpenLinkLocation=»N»; var sBulletChar=»»»»;
</script> <script src=»http://vsegenialno.blogspot.com/feeds/posts/default?alt=json-in-script&callback=RecentPostsScrollerv2″></script>
3. Изменяем http://vsegenialno.blogspot.com/ на URL главной страницы вашего блога (в двух местах). Можно по своему усмотрению изменять и видимый текст страницы
4. Нажимаем кнопку «Сохранить изменения»
5. Для проверки вводим в адресную строку браузера адрес вашего блога, добавив к нему /xyz/, или /blablabla/ (должно получиться приблизительно так —http://www.in-blog.com/blablabla/) и нажимаем Enter. Если всё сделано правильно — должна появиться красивая и функциональная страница ошибки 404.
Так, совместными усилиями мы добились того, что даже ошибки будут приносить нам пользу!
Доброй охоты всем нам!
Ваш Retliff
Сергей Мазураш aka Retliff Блоггер со стажем. Стиль публикаций отличается простотой изложения и весёлым, ироничным подходом к самым серьёзным проблемам. Cпециализируется на создании и продвижении бесплатных блогов на платформе Blogger.
Сегодня хочу показать несколько примеров Страницы 404. О том, для чего данная страница нужна на блоге и как её сделать, я писала ранее. В этой статье покажу какие могут быть интересные и красивые страницы ошибки 404 и напишу их коды.
Устанавливать код будем в Настройки/Ошибки переадресации. Нажимаем — Персонализированное сообщение об ошибке 404. В открывшееся окошко вставляем код. И Сохраняем.
<main class=»bl_page404″>
<h1>ОШИБКА 404. СТРАНИЦА НЕ СУЩЕСТВУЕТ</h1>
<p>Извините! Страница, которую вы ищете, не может быть найдена. Возможно, запрошенная вами страница была перемещена или удалена. Также возможно, что вы сделали ошибку при вводе адреса. Перейдите на главную страницу.
</p>
<div class=»bl_page404__wrapper»>
<img src=»https://github.com/BlackStar1991/Pictures-for-sharing-/blob/master/404/bigBoom/cloud_warmcasino.png?raw=true» alt=»cloud_warmcasino.png»>
<div class=»bl_page404__el1″></div>
<div class=»bl_page404__el2″></div>
<div class=»bl_page404__el3″></div>
<a class=»bl_page404__link» href=»https://baryshnyam.blogspot.com/«>Главная</a>
</div>
</main>
<style>
h1 {
text-align: center;
margin-top: 1%;
margin-bottom: 25px;
font-size: 30px;
font-weight: 400;
text-transform: uppercase;
}
p {
display: block;
margin: 25px auto;
max-width: 776px;
text-align: center;
color: #660000;
font-family: «Open Sans», sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
.bl_page404__wrapper {
position: relative;
width: 100%;
margin: 10px auto 10px;
max-width: 440px;
min-height: 410px;
}
.bl_page404__img {
width: 100%;
}
.bl_page404__link {
display: block;
margin: 0 auto;
width: 260px;
height: 64px;
box-shadow: 0 5px 0 #9c1007, inset 0 0 18px rgba(253, 60, 0, 0.75);
background-color: #f95801;
color: #fff;
font-family: «Open Sans», sans-serif;
font-size: 24px;
font-weight: 700;
line-height: 64px;
text-transform: uppercase;
text-decoration: none;
border-radius: 30px;
text-align: center;
}
.bl_page404__link:hover,
.bl_page404__link:focus {
background-color: #ff7400;
}
.bl_page404__el1 {
position: absolute;
top: 108px;
left: 102px;
opacity: 1;
animation: el1Move 800ms linear infinite;
width: 84px;
height: 106px;
background: url(«https://github.com/BlackStar1991/Pictures-for-sharing-/blob/master/404/bigBoom/404-1.png?raw=true»)
50% 50% no-repeat;
z-index: 2;
}
.bl_page404__el2 {
position: absolute;
top: 92px;
left: 136px;
opacity: 1;
animation: el2Move 800ms linear infinite;
width: 184px;
height: 106px;
background: url(«https://github.com/BlackStar1991/Pictures-for-sharing-/blob/master/404/bigBoom/404-2.png?raw=true»)
50% 50% no-repeat;
z-index: 2;
}
.bl_page404__el3 {
position: absolute;
top: 108px;
left: 180px;
opacity: 1;
animation: el3Move 800ms linear infinite;
width: 284px;
height: 106px;
background: url(«https://github.com/BlackStar1991/Pictures-for-sharing-/blob/master/404/bigBoom/404-3.png?raw=true»)
50% 50% no-repeat;
z-index: 2;
}
@keyframes el1Move {
0% {
top: 108px;
left: 102px;
opacity: 1;
}
100% {
top: -10px;
left: 22px;
opacity: 0;
}
}
@keyframes el2Move {
0% {
top: 92px;
left: 136px;
opacity: 1;
}
100% {
top: -10px;
left: 108px;
opacity: 0;
}
}
@keyframes el3Move {
0% {
top: 108px;
left: 180px;
opacity: 1;
}
100% {
top: 28px;
left: 276px;
opacity: 0;
}
}
</style>
Красным в коде выделила текст — меняете на свой.
Синим — ссылка на главную страницу сайта, или на ту, которую пожелаете установить. Так же меняете название кнопки Главная, если ссылка ведёт на другую страницу.
Так же можно менять шрифт, цвет текста, его размер.
Просмотреть в действии страницу можно в визуальном редакторе. Вставьте код и нажмите Показать результат.
<section class=»tv-error-404-tm» style=»background-image: url(http://home.cern/sites/home.web.cern.ch/files/image/computing_page/2013/01/tier_0_servers.jpeg); background-position:top center; background-size:cover; height:800px;»>
<div class=»tv-dark-background-tm»></div>
<div class=»container tv-error-content-tm»>
<div class=»col-md-12″>
<h1>Страница не найдена</h1>
<h3>Информация, которую вы ищете, не существует или изменилась.</h3>
<div class=»tv-error-links-tm»>
<a href=»https://baryshnyam.blogspot.com/» class=»btn»>Главная</a>
<a class=»btn» onclick=»window.history.go(-2);»>Вернуться</a>
</div>
</div>
</div>
</section>
<style>
.tv-error-404-tm {
background-color:#000;
max-height:100%;
min-height:100%;
position:relative;
padding:50px 0;
}
.tv-dark-background-tm {
position:absolute;
width:100%;
height:100%;
background:rgba(0,0,0,.6);
top:0;
left:0;
}
.tv-error-content-tm {
position:relative;
top:100px;
color:#fff;
}
.tv-error-content-tm h1 {
font-size:102px;
text-align:center;
font-weight:400;
}
.tv-error-content-tm h3 {
font-size:32px;
font-weight:300;
text-align:center;
}
.tv-error-links-tm {
width:100%;
margin-top:20%;
text-align:center;
}
.tv-error-content-tm a {
color:#fff !important;
padding:5px 30px;
border:2px solid #fff;
font-size:22px;
margin-right:30px;
border-radius:5px;
}
.tv-error-content-tm a:hover,.tv-error-content-tm a:active,.tv-error-content-tm a:visited,.tv-error-content-tm a:focus {
color:#fff !important;
}
@media (max-width: 992px) {
.tv-error-content-tm h1 {
font-size:62px;
text-align:center;
font-weight:400;
}
.tv-error-content-tm h3 {
font-size:26px;
font-weight:300;
text-align:center;
}
.tv-error-content-tm a {
color:#fff !important;
padding:5px 30px;
border:2px solid #fff;
font-size:22px;
margin-right:30px;
border-radius:5px;
}
}
@media (max-width: 425px) {
.tv-error-content-tm h1 {
font-size: 49px;
text-align: center;
font-weight: 400;
}
.tv-error-content-tm h3 {
font-size:26px;
font-weight:300;
text-align:center;
}
.tv-error-content-tm a {
color: #fff !important;
padding: 5px 30px;
border: 2px solid #fff;
font-size: 19px;
margin-right: 10px;
border-radius: 5px;
}
}
@media (max-width: 375px) {
.tv-error-content-tm h1 {
font-size: 42px;
text-align: center;
font-weight: 400;
}
.tv-error-content-tm h3 {
font-size: 22px;
font-weight: 300;
text-align: center;
}
.tv-error-content-tm a {
color: #fff !important;
padding: 5px 30px;
border: 2px solid #fff;
font-size: 18px;
margin-right: 0;
border-radius: 5px;
}
}
@media (max-width: 320px) {
.tv-error-content-tm h1 {
font-size:34px;
text-align:center;
font-weight:400;
}
.tv-error-content-tm h3 {
font-size:18px;
font-weight:300;
text-align:center;
}
.tv-error-content-tm a {
color: #fff !important;
padding: 5px 30px;
border: 2px solid #fff;
font-size: 18px;
margin-right: 0;
border-radius: 5px;
}
}
</style>
Выделенное красным в коде — текст, меняем на свой.
Синим выделила ссылку на главную страницу блога, меняем на свою.
Смотрим работу кода в визуальном редакторе.
<svg version=»1.1″ id=»error-404-img» xmlns=»http://www.w3.org/2000/svg» xmlns:xlink=»http://www.w3.org/1999/xlink» x=»0px»
y=»0px» viewBox=»0 0 344.7 276.7″ style=»enable-background:new 0 0 344.7 276.7;» xml:space=»preserve»>
<style type=»text/css»>
.st0{fill:#4C423B;}
.st1{opacity:0.2;}
.st2{fill:#FFFFFF;}
.st3{fill:rgba(132, 121, 114, .4);}
.st4{fill:#424242;}
.st5{fill:#E0E0E0;}
.st6{fill:#BDBDBD;}
.st7{opacity:0.64;fill:#212121;}
.st8{fill:#F5F5F5;}
.st9{opacity:0.8;fill:#4C423B;}
</style>
<g id=»decorations»>
<polygon class=»st0″ points=»245,52.8 241.7,49.5 238.5,52.6 235.4,49.5 232.1,52.8 235.2,55.9 232.1,59.1 235.4,62.4 238.5,59.2
241.7,62.4 245,59.1 241.8,55.9 «/>
<polygon class=»st0» points=»42.7,172 39.4,168.7 36.2,171.8 33.1,168.7 29.8,172 32.9,175.1 29.8,178.3 33.1,181.6 36.2,178.4
39.4,181.6 42.7,178.3 39.5,175.1 «/>
<polygon class=»st0» points=»102.9,30.8 99.6,27.5 96.4,30.7 93.3,27.5 90,30.8 93.1,34 90,37.2 93.3,40.5 96.4,37.3 99.6,40.5
102.9,37.2 99.8,34 «/>
<polygon class=»st0» points=»311,196.3 307.7,192.9 304.5,196.1 301.4,192.9 298.1,196.3 301.2,199.4 298.1,202.6 301.4,205.9
304.5,202.7 307.7,205.9 311,202.6 307.9,199.4 «/>
<g>
<path class=»st0″ d=»M42.7,67.2c-2.7,0-4.8-2.2-4.8-4.8c0-2.7,2.2-4.8,4.8-4.8c2.7,0,4.8,2.2,4.8,4.8
C47.5,65.1,45.4,67.2,42.7,67.2z M42.7,59.6c-1.6,0-2.8,1.3-2.8,2.8s1.3,2.8,2.8,2.8s2.8-1.3,2.8-2.8S44.3,59.6,42.7,59.6z»/>
</g>
<g>
<path class=»st0″ d=»M183.1,23.3c-2.7,0-4.8-2.2-4.8-4.8s2.2-4.8,4.8-4.8c2.7,0,4.8,2.2,4.8,4.8S185.8,23.3,183.1,23.3z
M183.1,15.7c-1.6,0-2.8,1.3-2.8,2.8s1.3,2.8,2.8,2.8s2.8-1.3,2.8-2.8S184.7,15.7,183.1,15.7z»/>
</g>
<g>
<path class=»st0″ d=»M318.6,91c-2.7,0-4.8-2.2-4.8-4.8c0-2.7,2.2-4.8,4.8-4.8c2.7,0,4.8,2.2,4.8,4.8C323.5,88.9,321.3,91,318.6,91
z M318.6,83.4c-1.6,0-2.8,1.3-2.8,2.8s1.3,2.8,2.8,2.8s2.8-1.3,2.8-2.8S320.2,83.4,318.6,83.4z»/>
</g>
<g>
<path class=»st0″ d=»M257,170.8c-2.7,0-4.8-2.2-4.8-4.8c0-2.7,2.2-4.8,4.8-4.8c2.7,0,4.8,2.2,4.8,4.8
C261.8,168.7,259.6,170.8,257,170.8z M257,163.2c-1.6,0-2.8,1.3-2.8,2.8s1.3,2.8,2.8,2.8s2.8-1.3,2.8-2.8S258.5,163.2,257,163.2z»
/>
</g>
<g>
<path class=»st0″ d=»M90,232c-2.7,0-4.8-2.2-4.8-4.8c0-2.7,2.2-4.8,4.8-4.8c2.7,0,4.8,2.2,4.8,4.8C94.8,229.8,92.6,232,90,232z
M90,224.3c-1.6,0-2.8,1.3-2.8,2.8s1.3,2.8,2.8,2.8s2.8-1.3,2.8-2.8S91.5,224.3,90,224.3z»/>
</g>
<circle class=»st0″ cx=»98.9″ cy=»65.3″ r=»9″/>
<circle class=»st0″ cx=»103.3″ cy=»168.8″ r=»4.5″/>
<path class=»st0″ d=»M332.5,154.2c0,2.5-2,4.5-4.5,4.5s-4.5-2-4.5-4.5c0-2.5,2-4.5,4.5-4.5S332.5,151.8,332.5,154.2z»/>
<path class=»st0″ d=»M17.3,96.3c0,2.5-2,4.5-4.5,4.5c-2.5,0-4.5-2-4.5-4.5s2-4.5,4.5-4.5C15.3,91.8,17.3,93.9,17.3,96.3z»/>
<path class=»st0″ d=»M243.1,96.3c0,2.5-2,4.5-4.5,4.5c-2.5,0-4.5-2-4.5-4.5s2-4.5,4.5-4.5C241,91.8,243.1,93.9,243.1,96.3z»/>
<circle class=»st0″ cx=»229.1″ cy=»222.3″ r=»6.8″/>
</g>
<g id=»_x34_-gauche»>
<g class=»st1″>
<path class=»st0″ d=»M60.6,168.4v-21.1H19.3v-16.8l47.4-60.8h12.9v60.7H92v17H79.5v21.1H60.6z M38.2,130.3h24.5v-32L38.2,130.3z»
/>
</g>
<g>
<path class=»st2″ d=»M58.6,166.4v-21.1H17.3v-16.8l47.4-60.8h12.9v60.7H90v17H77.5v21.1H58.6z M36.2,128.3h24.5v-32L36.2,128.3z»
/>
</g>
</g>
<path id=»ombre-loupe» class=»st3″ d=»M238.6,173l0.4-0.3c0.6-0.5,0.6-1.4,0.1-1.9l-7.6-8.3c7.8-9.8,12.7-22.1,13.3-35.6
c1.5-34.1-24.9-62.9-58.9-64.4c-34.1-1.5-62.9,24.9-64.4,58.9c-1.5,34.1,24.9,62.9,58.9,64.4c13.5,0.6,26.2-3.2,36.7-10.1l7.6,8.3
c0.5,0.6,1.4,0.6,1.9,0.1l0.4-0.3l56.2,61.4h21.4L238.6,173z»/>
<g id=»_x34_-droite»>
<g class=»st1″>
<path class=»st0″ d=»M281.3,168.4v-21.1H240v-16.8l47.4-60.8h12.9v60.7h12.4v17h-12.4v21.1H281.3z M259,130.3h24.5v-32L259,130.3z
«/>
</g>
<g>
<path class=»st2» d=»M279.3,166.4v-21.1H238v-16.8l47.4-60.8h12.9v60.7h12.4v17h-12.4v21.1H279.3z M257,128.3h24.5v-32L257,128.3z
«/>
</g>
</g>
<g id=»loupe»>
<path class=»st4″ d=»M311.4,252.6L219.8,161L208,172.8l91.6,91.6c3.4,3.4,9.1,3.2,12.2-0.5h0C314.6,260.5,314.4,255.6,311.4,252.6z
«/>
<path class=»st5″ d=»M199.5,167.1l11.1,11.1c0.6,0.6,1.5,0.6,2,0l12.5-12.5c0.6-0.6,0.6-1.5,0-2l-11.1-11.1L199.5,167.1z»/>
<polygon class=»st6» points=»215.8,154.2 217.2,155.7 205.4,173 200.2,167.8 «/>
<polygon class=»st7» points=»213,177.8 224.8,166 225.6,166.8 216.4,181.1 «/>
<path class=»st8″ d=»M164,51.9c-36,0-65.1,29.2-65.1,65.1s29.2,65.1,65.1,65.1s65.1-29.2,65.1-65.1S200,51.9,164,51.9z M164,168.7
c-28.5,0-51.7-23.1-51.7-51.7c0-28.5,23.1-51.7,51.7-51.7s51.7,23.1,51.7,51.7C215.7,145.5,192.5,168.7,164,168.7z»/>
<circle class=»st9″ cx=»164″ cy=»117″ r=»51.7″/>
<path class=»st2» d=»M129.7,82.7c-7.5,7.5-12,15.1-10,17c1.9,1.9,9.6-2.6,17-10c7.5-7.5,12-15.1,10-17
C144.8,70.7,137.2,75.2,129.7,82.7z»/>
</g>
</svg>
<style>
#error-404-img {
max-width: 700px;
display: block;
margin: 0 auto;
}
#loupe {
animation: bounceInUp 2s ease forwards;
}
#ombre-loupe {
animation: fadeIn 2s 3s ease forwards;
}
#_x34_-gauche, #_x34_-droite, #ombre-loupe, #decorations {
opacity: 0;
}
#_x34_-gauche, #_x34_-droite {
animation: fadeIn 2s ease forwards;
}
#_x34_-gauche {
animation-delay: 1s;
}
#_x34_-droite {
animation-delay: 2s;
}
#decorations {
transform-origin: center;
animation: fadeIn 2s ease forwards, rotate-grow 50s linear infinite alternate;
animation-delay: 4s;
}
@-webkit-keyframes rotate-grow {
from {
-webkit-transform: rotate(0) scale(.8);
transform: rotate(0) scale(.8);
}
to {
-webkit-transform: rotate(360deg) scale(1.5);
transform: rotate(360deg) scale(1.5);
}
}
@keyframes rotate-grow {
from {
-webkit-transform: rotate(0) scale(.8);
transform: rotate(0) scale(.8);
}
to {
-webkit-transform: rotate(360deg) scale(1.5);
transform: rotate(360deg) scale(1.5);
}
}
@-webkit-keyframes fadeInLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@-webkit-keyframes fadeInRight {
from {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes fadeInRight {
from {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes fadeInLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@-webkit-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@-webkit-keyframes bounceInUp {
from,
60%,
75%,
90%,
to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
from {
opacity: 0;
-webkit-transform: translate3d(0, 3000px, 0);
transform: translate3d(0, 3000px, 0);
}
60% {
opacity: 1;
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0);
}
75% {
-webkit-transform: translate3d(0, 10px, 0);
transform: translate3d(0, 10px, 0);
}
90% {
-webkit-transform: translate3d(0, -5px, 0);
transform: translate3d(0, -5px, 0);
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes bounceInUp {
from,
60%,
75%,
90%,
to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
from {
opacity: 0;
-webkit-transform: translate3d(0, 3000px, 0);
transform: translate3d(0, 3000px, 0);
}
60% {
opacity: 1;
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0);
}
75% {
-webkit-transform: translate3d(0, 10px, 0);
transform: translate3d(0, 10px, 0);
}
90% {
-webkit-transform: translate3d(0, -5px, 0);
transform: translate3d(0, -5px, 0);
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.bounceInUp {
-webkit-animation-name: bounceInUp;
animation-name: bounceInUp;
}
</style>
Если пользователь случайно неправильно скопировал адрес страницы вашего блога, или вы сами по каким-то причинам удалили страницу, то в ответ на запрос в блоге появится сообщение об ошибке 404 «Страница не найдена».
В Блоггере можно это стандартное сообщение об ошибке переделать на свой вкус. Поставить свой текст, свою картинку и свою ссылку на то, куда можно перейти посетителю вашего блога.
Итак, что же нужно сделать для того, чтобы создать собственную страницу об ошибке 404?
(все фото кликабельны — они увеличатся при нажатии на них мышкой)
Для начала нужно написать HTML-код самой странички. Это можно сделать самым элементарным способом. Создаем новое сообщение, пишем в нем все то, что хотим видеть на страничке, вставляем нужное изображение и ссылки. Все форматируем как нравится.
А после этого переходим в режим HTML редактирования сообщения и копируем получившийся код CTRL-C
Теперь заходим в «Настройки»-«Настройки поиска»-«Персонализированное сообщение об ошибке» и нажимаем «Изменить»
Появится окошко, в которое и нужно будет вставить скопированный код (CTRL-V). После чего останется только нажать «Сохранить изменения».
Личная страница об ошибке 404 сделана! Ею можно полюбоваться, набрав в строке браузера неправильный адрес любого сообщения своего блога.
Как еще можно улучшить дизайн своего блога я писала здесь:
Как сделать собственную страницу сообщения об ошибке 404
Как вставить свою кнопку «Далее»
Как упорядочить список ярлыков
Как сделать меню в блоге
Как сделать свой фавикон (значок блога)
По горячим следам новостей, где рассказано о том, что наш любимый или может не любимый Blogspot добавил серьёзные seo-функции к движку, и ведение блога на этой платформе теперь снова может показаться довольно выгодным и привлекательным делом.
Оставлю эту тему комментаторам, а сейчас давайте посмотрим на одну из главных вкусных фишек — пользовательскую страницу 404 в Blogger.
Редактирование страницы 404, страницы сообщающей об ошибке и появляющейся на любой неправильной ссылке, находится пока исключительно в дебрях новой админки, в Настройки -> Настройки поиска -> Персонализированное сообщение об ошибке «Страница не найдена:
При нажатии на кнопку «изменить» вам откроется небольшое поле для вставки своего сообщения. Вы конечно можете там написать в столбик всякую фигню, но лучше это оформить красиво, поскольку это невзрачное поле на самом деле принимает полноценный html код:
Кстати, собственный дизайн страницы 404 с картинками, блекджеком и ссылками вы можете сотворить в редакторе поста, а потом скопировав код (в html режиме), вставить его вот в это поле.
На этом заметку можно и закончить, поскольку я на тестовом блоге после всех описанных телодвижений ввёл в браузерной пдресной строке ссылку от фонаря и получил красивую 404 страницу. Но мой тестовый блог «сидит» на одном из дефолтовых шаблонов, поэтому конечно в нём всё будет работать.
Проблема со страницей «Персонализированное сообщение об ошибке»
.
А вот на этом блоге в той же самой ситуации я получил пустую страницу, и это логично. Самопальный шаблон не имеет стандартной разметки, так что вывод содержимого пользовательской страницы 404 ни к чему не привязан.
Решение было найдено довольно быстро.
Нужно поставить код (выделен зелёным):
<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div class='status-msg-wrap'>
<div class='status-msg-body'>
<data:navMessage/>
</div>
<div class='status-msg-border'>
<div class='status-msg-bg'>
<div class='status-msg-hidden'><data:navMessage/></div>
</div>
</div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>
Где-нибудь после div class=’post-footer-line post-footer-line-2 или div class=’post-footer-line post-footer-line-3 (выделены жёлтым):
Так что в итоге я получил вот такую живописную картинку, которая вылетает при любой неправильно введённой ссылке:
Что и требовалось доказать.
А чтобы избавиться от зловредного серого квадрата, я убил лишние элементы, получился такой код:
<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div class='status-msg-wrap'>
<data:navMessage/>
<div class='status-msg-hidden'><data:navMessage/></div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>
С «чистой» картинкой:
Ну и вспомним про ещё один вариант из заметки «Как создать страницу 404 для всех битых ссылок в Blogger». Он не в коем случае не потерял своей актуальности, так как скрипт отслеживает исходящие ссылки не только на свои страницы, но и на чужие, что очень полезно для старых постов, где вы могли сослаться на теперь умерший блог.