Создать страницу 404 ошибки в блоге на Blogger


Приветствую, Блоггеры. В данной публикации я покажу вам, как красиво оформить такую страницу своего блога, как Ошибка 404. Что это за страница и каковы ее функции? Все просто, после удаления определенной публикации с блога, где-то (на другой странице вашего блога или на другом сайте) могла сохраниться ссылка, которая продолжает ссылаться на эту публикацию, перейдя по такой ссылке и пользователь и поисковый бот будут уведомлены о том, что данная страница больше не существует.

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

Просмотрев некоторые решения по оформлению страницы я заметил, что большинство предлагают оформить страницу 404 через стандартную форму. Я же дам вам возможность побыть немного верстальщиками и поработать с HTML редактором 🤪. Не переживайте это не сложно, всего несколько кликов и страница готова 👍.

Blogger, Ошибка 404 Оформление страницы

Для установки нужных стилей и HTML используйте кода ниже. Более детальную инструкцию вы сможете найти в видео ролике.

1. CSS
<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<style type='text/css'>
body { overflow: hidden; }
#oopss{background-image: linear-gradient(107deg,#998679,#010101);text-align:center;margin-bottom:50px;font-weight:400;font-size:20px;position:fixed;width:100%;height:100%;line-height:1.5em;z-index:9999;left:0}#error-text{top:30%;position:relative;font-size:40px;color:#eee}#error-text a{color:#eee}#error-text a:hover{color:#fff}#error-text p{color:#eee;margin:70px 0 0}#error-text i{margin-left:10px}#error-text p.hmpg{margin:40px 0 0}#error-text span{position:relative;background:#ef4824;color:#fff;font-size:300%;padding:0 20px;border-radius:5px;font-weight:bolder;transition:all .5s;cursor:pointer;margin:0 0 40px}#error-text span:hover{background:#d7401f;color:#fff;-webkit-animation:jelly .5s;-moz-animation:jelly .5s;-ms-animation:jelly .5s;-o-animation:jelly .5s;animation:jelly .5s}#error-text span:after{top:100%;left:50%;border:solid transparent;content:&#39;&#39;;height:0;width:0;position:absolute;pointer-events:none;border-color:rgba(136,183,213,0);border-top-color:#ef4824;border-width:7px;margin-left:-7px}.back:active{-webkit-transform:scale(.95);-moz-transform:scale(.95);transform:scale(.95);background:#f53b3b;color:#fff}.back:hover{background:#4c4c4c;color:#fff}.back{text-decoration:none;background:#5b5a5a;color:#fff;padding:10px 20px;font-size:20px;font-weight:700;line-height:normal;text-transform:uppercase;border-radius:3px;-webkit-transform:scale(1);-moz-transform:scale(1);transform:scale(1);transition:all .5s ease-out}@-webkit-keyframes jelly{from,to{-webkit-transform:scale(1,1);transform:scale(1,1)}25%{-webkit-transform:scale(.9,1.1);transform:scale(.9,1.1)}50%{-webkit-transform:scale(1.1,.9);transform:scale(1.1,.9)}75%{-webkit-transform:scale(.95,1.05);transform:scale(.95,1.05)}}@keyframes jelly{from,to{-webkit-transform:scale(1,1);transform:scale(1,1)}25%{-webkit-transform:scale(.9,1.1);transform:scale(.9,1.1)}50%{-webkit-transform:scale(1.1,.9);transform:scale(1.1,.9)}75%{-webkit-transform:scale(.95,1.05);transform:scale(.95,1.05)}}@media only screen and (max-width:640px){#error-text span{font-size:200%}#error-text a:hover{color:#fff}}
</style>
</b:if>

2. HTML
<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<div id='oopss'>
<div id='error-text'>
<span>404</span>
<p>Страница не найдена</p>
<p class='hmpg'><a expr:href='data:blog.homepageUrl' class="back">Вернуться на главную</a></p>
</div>
</div>
</b:if>

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

Переходим к просмотру Видео:


Если у вас возникнут вопросы пишите в комментариях. Удачи 😉



Поделиться в социальных сетях:
Facebook Twitter Vkontakte

Рекомендуем

1 Коммент.:

Оставить комментарий
avatar
Galina Danchenko
мая 23, 2019

Отличная публикация. Спасибо за ваши шаблоны, очень помогает!

Ответить