Как настроить страницу 404 на blogger

Много пишут о том, что страница ошибки должна не только быть красивой, но и функциональной. Если ваш посетитель неправильно набрал адрес или перешел по “кривой” ссылке на ваш блог и попал на страницу 404, то он не должен просто уйти. Вы должны оформить страницу так, чтобы посетитель нашел то, что искал или его привлекли другие материалы вашего блога.

Читайте  Как настроить страницу ошибки 404 на blogger и познакомьтесь с примерами лучших 404 page not found на blogspot.

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

1. Поиск по блогу. Конечно, во многих случаях поиск по блогу устанавливают блогеры в сайдбаре, и он будет присутствовать на вашей странице ошибки, но взгляд посетителя обычно устремлен в центральную часть веб-страницы, туда, где должен находиться основной контент. Поэтому для уменьшения показателя отказов, вы можете вставить форму поиска именно в саму страницу ошибки, убрав ее из сайдбара.
   Для этого добавьте код поиска в Админ.панель –> Настройки –> Настройки поиска –> Персонализированное сообщение об ошибке "Страница не найдена". А вот и сам код поиска по вашему блогу:
   
   
   

   <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>.
   В результате у вас должен получиться такой код

2. Последние сообщения блога. Добавьте в окно следующий код:
    
   

   <script src="https://photoforum.do.am/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://photoforum.do.am/recent.css" type="text/css" rel="stylesheet" />

3. Популярные сообщения блога.
   Добавьте следующий код, прописав адрес своего блога:
   
   

   <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>

4. Случайные записи блога. Вы можете сделать это при помощи специального скрипта случайных записей блога.
5. Форма подписки
6. Карта блога,
7. галерею изображений,
8. кнопки социальных закладок, например кнопки pluso. Особенно это может пригодиться, если у вас очень оригинальная страница not found, которой будут делиться ваши друзья.