Много пишут о том, что страница ошибки должна не только быть красивой, но и функциональной. Если ваш посетитель неправильно набрал адрес или перешел по “кривой” ссылке на ваш блог и попал на страницу 404, то он не должен просто уйти. Вы должны оформить страницу так, чтобы посетитель нашел то, что искал или его привлекли другие материалы вашего блога.
Читайте Как настроить страницу ошибки 404 на blogger и познакомьтесь с примерами лучших 404 page not found на blogspot.
Сегодня мы будем укомплектовывать страницу 404 полезными виджетами, которые помогут вашему посетителю не растеряться, а вам улучшить поведенческие факторы.
- Поиск по блогу. Конечно, во многих случаях поиск по блогу устанавливают блогеры в сайдбаре, и он будет присутствовать на вашей странице ошибки, но взгляд посетителя обычно устремлен в центральную часть веб-страницы, туда, где должен находиться основной контент. Поэтому для уменьшения показателя отказов, вы можете вставить форму поиска именно в саму страницу ошибки, убрав ее из сайдбара.
Для этого добавьте код поиска в Админ.панель –> Настройки –> Настройки поиска –> Персонализированное сообщение об ошибке "Страница не найдена". А вот и сам код поиска по вашему блогу:
<div class="widget CustomSearch" id="CustomSearch1">
<div class="widget-content">
<div id="CustomSearch1_form"><form class="gsc-search-box" accept-charset="utf-8"><table cellspacing="0" cellpadding="0" class="gsc-search-box"><tbody><tr><td class="gsc-input"><input autocomplete="off" type="text" size="10" class=" gsc-input" name="search" title="поиск"><input type="hidden" name="bgresponse" id="bgresponse"></td><td class="gsc-search-button"><input type="submit" value="Поиск" class="gsc-search-button" title="поиск"></td></tr></tbody></table><table cellspacing="0" cellpadding="0" class="gsc-branding"><tbody><tr style="display: none;"><td class="gsc-branding-user-defined"></td><td class="gsc-branding-text"><div class="gsc-branding-text">технология</div></td><td class="gsc-branding-img-noclear"><img src="https://www.google.com/uds/css/small-logo.png" class="gsc-branding-img-noclear"></td></tr></tbody></table></form></div>
</div>
<style type="text/css">
#uds-searchControl .gs-result .gs-title,
#uds-searchControl .gs-result .gs-title *,
#uds-searchControl .gsc-results .gsc-trailing-more-results,
#uds-searchControl .gsc-results .gsc-trailing-more-results * {
color:#2288bb;
}
#uds-searchControl .gs-result .gs-title a:visited,
#uds-searchControl .gs-result .gs-title a:visited * {
color:#888888;
}
#uds-searchControl .gs-relativePublishedDate,
#uds-searchControl .gs-publishedDate {
color: #000000;
}
#uds-searchControl .gs-result a.gs-visibleUrl,
#uds-searchControl .gs-result .gs-visibleUrl {
color: #2288bb;
}
#uds-searchControl .gsc-results {
border-color: #dddddd;
background-color: #ffffff;
}
#uds-searchControl .gsc-tabhActive {
border-color: #dddddd;
border-top-color: #dddddd;
background-color: #ffffff;
color: #666666;
}
#uds-searchControl .gsc-tabhInactive {
border-color: #dddddd;
background-color: transparent;
color: #2288bb;
}
#uds-searchClearResults {
border-color: #dddddd;
}
#uds-searchClearResults:hover {
border-color: #dddddd;
}
#uds-searchControl .gsc-cursor-page {
color: #2288bb;
}
#uds-searchControl .gsc-cursor-current-page {
color: #666666;
}
</style>
<div class="clear"></div>
<span class="widget-item-control">
<span class="item-control blog-admin">
</span>
</span>
<div class="clear"></div>
</div>Как убрать поиск с боковой колонки (сайдбара) на страницы ошибки:
В Шаблоне блога находим виджет поиска по блогу, раскрываем код, нажав на стрелочку напротив кода, а далее на многоточие (смотрите скриншоты):
В код виджета CustomSearch1 вставляем условный оператор <b:if cond='data:blog.pageType != "error_page"'> после строки <b:includable id='main'> и добавляем </b:if> перед </b:includable>.
В результате у вас должен получиться такой код - Последние сообщения блога. Добавьте в окно следующий код:
<script src="https://spishu.ru/json.js"></script>
<script type='text/javascript'>
var numposts = 5;
var showpostthumbnails = true;
var displaymore = false;
var displayseparator = true;
var showcommentnum = false;
var showpostdate = false;
var showpostsummary = true;
var numchars = 100;</script>
<script type="text/javascript" src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=labelthumbs"></script>
Теперь откройте редактор шаблона blogger и добавьте перед </head> строчку:
<link href="https://spishu.ru/recent.css" type="text/css" rel="stylesheet" />
- Популярные сообщения блога.
Добавьте следующий код, прописав адрес своего блога:
<script type="text/javascript">
function getYpipePP(feed) {
document.write('<ol >');
var i;
for (i = 0; i < feed.count ; i++)
{
var href = "'" + feed.value.items[i].link + "'";
var pTitle = feed.value.items[i].title;
var pComment = " (" + feed.value.items[i].commentcount + ")";
var pList = "<li>" + "<a href="+ href + '" target="_blank">' + pTitle;
document.write(pList);
document.write(pComment); //to remove comment count delete this line
document.write('</a></li>');
}
document.write('</ol>');
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?
YourBlogUrl=http://адрес вашего блога/ &ShowHowMany=10
&_id=390e906036f48772b2ed4b5d837af4cd
&_callback=getYpipePP
&_render=json"
type="text/javascript"></script> - Случайные записи блога. Вы можете сделать это при помощи специального скрипта случайных записей блога.
- Форма подписки
- Карта блога,
- галерею изображений,
- кнопки социальных закладок, например кнопки pluso. Особенно это может пригодиться, если у вас очень оригинальная страница not found, которой будут делиться ваши друзья.
Красивая да, функциональная да, все верно, но вы столько понаписали, что я думаю все просто не влезет на страницу или делать страницу с прокруткой, да и огромное число информации может сбить с толку. Может достаточно ссылки на главную, поиск по блоку? Зачем лишние навороты, если перейдя на блог посетитель найдет все то же самое.
Действительно полезно знать, как настроить страницу 404. Например, часто мне приходится указывать ссылки без определённых символов, которые не пускает форма. По этой ссылке пользователь может попасть на страницу 404.
Анонимный, вовсе не нужно снабжать всеми возможными виджетами страницу 404. Я лишь привела пример что может на ней быть, а что выбрать - решать владельцу блога.
Я в свое время пропускал мимо ушей призывы опытных блогеров и не настраивал страницу ошибки полагая, что это лишняя трата времени. Ну вот мне пришлось полностью переделывать свой сайт, переезжать на новый движок и делать редизайн. И вот тут то я понял, насколько важно правильно настроить страницу 404. Автору спасибо за рекомендации.
Я сама уже делала страницу ошибка 404, у меня все получилось. Страничка была красивая, сейчас у меня другая тема и там уже стоит страница 404. Для удобства читателей- это важная страница
Очень важный шаг нужно и мне ещё создать у себя на блоге.
Можно просто добавить скрипт окне настроек и будет происходить автоматическое перенаправление на главную страницу блога