Своя фиксированная панель навигации для Blogger

ВНИМАНИЕ! Статья экспериментальная, написанная в порыве вдохновения. Реализовывать написанное тут не советую, поскольку для окончательного варианта нужны определённые знания кода.

Соорудила сегодня вот такую панель, которая открывается по наведению на Своя панель навигации для Blogger. Она является эффективной при отсутствии боковых колонок. За основу был взят футер блога.

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

Шаг 1. Добавляем код гаджетов.

В "Шаблон"-"Изменить HTML"-"Приступить" устанавливаем галочку "Расширить шаблоны виджета". Не волнуйтесь из-за обилия кода: мы сразу добавляем несколько стандартных гаджетов, которые впоследствии легко удалить. Фрагмент
<b:section-contents id='footer-1'>.....</b:section-contents>
или если данное поле пусто, он может выглядеть как
<b:section-contents id='footer-1'/>
и заменяем на
<b:section-contents id='footer-1'>
<b:widget id='Image56' locked='false' title='' type='Image'>
<b:includable id='main'>
    <div class='widget-content'>
<b:if cond='data:link != &quot;&quot;'>
        <a expr:href='data:link'>
          <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_img&quot;' expr:src='data:sourceUrl' expr:width='data:width' expr:title='data:title'/>
        </a>
      <b:else/>
        <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_img&quot;' expr:src='data:sourceUrl' expr:width='data:width' expr:title='data:title'/>
      </b:if>
      <br/>
      <b:if cond='data:caption != &quot;&quot;'>
        <span class='caption'><data:caption/></span>
      </b:if>
    </div>
    <b:include name='quickedit'/>
  </b:includable>
</b:widget>
<b:widget id='CustomSearch50' locked='false' title='' type='CustomSearch'>
<b:includable id='main'>
    <!-- only display title if it's non-empty -->

    <div class='widget-content'>
      <div expr:id='data:widget.instanceId + &quot;_form&quot;'>
        <span class='cse-status'><data:loadingMsg/></span>
      </div>
    </div>

    <!-- override gsearch.css -->
    <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:<data:linkColor/>;
      }

      #uds-searchControl .gs-result .gs-title a:visited,
      #uds-searchControl .gs-result .gs-title a:visited * {
        color:<data:visitedLinkColor/>;
      }

      #uds-searchControl .gs-relativePublishedDate,
      #uds-searchControl .gs-publishedDate {
        color: <data:dateColor/>;
      }

      #uds-searchControl .gs-result a.gs-visibleUrl,
      #uds-searchControl .gs-result .gs-visibleUrl {
        color: <data:urlColor/>;
      }

      #uds-searchControl .gsc-results {
        border-color: <data:borderColor/>;
        background-color: <data:backgroundColor/>;
      }

      #uds-searchControl .gsc-tabhActive {
        border-color: <data:borderColor/>;
        border-top-color: <data:activeBorderColor/>;
        background-color: <data:backgroundColor/>;
        color: <data:textColor/>;
      }

      #uds-searchControl .gsc-tabhInactive {
        border-color: <data:borderColor/>;
        background-color: transparent;
        color: <data:linkColor/>;
      }

      #uds-searchClearResults {
        border-color: <data:borderColor/>;
      }

      #uds-searchClearResults:hover {
        border-color: <data:activeBorderColor/>;
      }

      #uds-searchControl .gsc-cursor-page {
        color: <data:linkColor/>;
      }

      #uds-searchControl .gsc-cursor-current-page {
        color: <data:textColor/>;
      }
    </style>

    <b:include name='quickedit'/>
  </b:includable>
</b:widget>
<b:widget id='Image55' locked='false' title='' type='Image'>
<b:includable id='main'>
    <div class='widget-content'>
<b:if cond='data:link != &quot;&quot;'>
        <a expr:href='data:link'>
          <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_img&quot;' expr:src='data:sourceUrl' expr:width='data:width' expr:title='data:title'/>
        </a>
      <b:else/>
        <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_img&quot;' expr:src='data:sourceUrl' expr:width='data:width' expr:title='data:title'/>
      </b:if>
      <br/>
      <b:if cond='data:caption != &quot;&quot;'>
        <span class='caption'><data:caption/></span>
      </b:if>
    </div>
    <b:include name='quickedit'/>
  </b:includable>
</b:widget>
<b:widget id='Image54' locked='false' title='' type='Image'>
<b:includable id='main'>
    <div class='widget-content'>
<b:if cond='data:link != &quot;&quot;'>
        <a expr:href='data:link'>
          <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_img&quot;' expr:src='data:sourceUrl' expr:width='data:width' expr:title='data:title'/>
        </a>
      <b:else/>
        <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_img&quot;' expr:src='data:sourceUrl' expr:width='data:width' expr:title='data:title'/>
      </b:if>
      <br/>
      <b:if cond='data:caption != &quot;&quot;'>
        <span class='caption'><data:caption/></span>
      </b:if>
    </div>
    <b:include name='quickedit'/>
  </b:includable>
</b:widget>
<b:widget id='Image53' locked='false' title='' type='Image'>
<b:includable id='main'>
    <div class='widget-content'>
<b:if cond='data:link != &quot;&quot;'>
        <a expr:href='data:link'>
          <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_img&quot;' expr:src='data:sourceUrl' expr:width='data:width' expr:title='data:title'/>
        </a>
      <b:else/>
        <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_img&quot;' expr:src='data:sourceUrl' expr:width='data:width' expr:title='data:title'/>
      </b:if>
      <br/>
      <b:if cond='data:caption != &quot;&quot;'>
        <span class='caption'><data:caption/></span>
      </b:if>
    </div>
    <b:include name='quickedit'/>
  </b:includable>
</b:widget>
<b:widget id='Image52' locked='false' title='' type='Image'>
<b:includable id='main'>
    <div class='widget-content'>
<b:if cond='data:link != &quot;&quot;'>
        <a expr:href='data:link'>
          <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_img&quot;' expr:src='data:sourceUrl' expr:width='data:width' expr:title='data:title'/>
        </a>
      <b:else/>
        <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_img&quot;' expr:src='data:sourceUrl' expr:width='data:width' expr:title='data:title'/>
      </b:if>
      <br/>
      <b:if cond='data:caption != &quot;&quot;'>
        <span class='caption'><data:caption/></span>
      </b:if>
    </div>
    <b:include name='quickedit'/>
  </b:includable>
</b:widget>
<b:widget id='Image51' locked='false' title='' type='Image'>
<b:includable id='main'>
<b:if cond='data:link != &quot;&quot;'>
        <a expr:href='data:link'>
          <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_img&quot;' expr:src='data:sourceUrl' expr:width='data:width' expr:title='data:title'/>
        </a>
      <b:else/>
        <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_img&quot;' expr:src='data:sourceUrl' expr:width='data:width' expr:title='data:title'/>
      </b:if>
      <br/>
      <b:if cond='data:caption != &quot;&quot;'>
        <span class='caption'><data:caption/></span>
      </b:if>
    <b:include name='quickedit'/>
  </b:includable>
</b:widget>
<b:widget id='BlogList50' locked='false' title='Последние статьи' type='BlogList'>
<b:includable id='main'>
    <!-- only display title if it's non-empty -->
  <b:if cond='data:title'><p class='title'><data:title/></p></b:if>
    <div class='widget-content'>
      <div class='blog-list-container' expr:id='data:widget.instanceId + &quot;_container&quot;'>
        <ul expr:id='data:widget.instanceId + &quot;_blogs&quot;'>
          <b:loop values='data:items' var='item'>
            <b:if cond='data:blog.url != data:item.itemUrl'>
            <li expr:style='data:item.displayStyle'>
               <div class='blog-content'>
                <b:if cond='data:showItemTitle == &quot;true&quot;'>
                   <div class='blog-title'>
                  <b:if cond='data:item.itemUrl != &quot;&quot;'>
                        <a expr:href='data:item.itemUrl' target='_blank'>
                          <data:item.itemTitle/></a>
                      <b:else/>
                        <data:item.itemTitle/>
                      </b:if>
                </div></b:if>
                <div class='item-content'>
                  <b:if cond='data:showItemThumbnail == &quot;true&quot;'>
                    <b:if cond='data:item.itemThumbnail'> 
                      <div class='item-thumbnail'>
                        <a expr:href='data:item.itemUrl' target='_blank'>
                          <img border='0' expr:alt='data:item.itemTitle' expr:height='data:item.itemThumbnail.height' expr:src='data:item.itemThumbnail.url' expr:width='data:item.itemThumbnail.width'/>
                        </a>
                      </div>
                      <b:else/>
<div class='item-thumbnail'><a expr:href='data:item.itemUrl' target='_blank'><img alt='Blogger' border='0' height='72' src='http://3.bp.blogspot.com/_hljKDuw-cxQ/SsmfbhHhGrI/AAAAAAAAOU0/vCmT5Y4wzEo/s1600/vagaPlantilla_resumenpostsnoimage.gif' width='72'/></a></div>
                    </b:if>
                  </b:if>
                  <b:if cond='data:showItemSnippet == &quot;true&quot;'> 
                    <span class='item-snippet'>
                      <data:item.itemSnippet/>
                    </span>
                  </b:if>
                  <b:if cond='data:showTimePeriodSinceLastUpdate == &quot;true&quot;'>
                    <div class='item-time'>
                      <data:item.timePeriodSinceLastUpdate/>
                    </div>
                  </b:if>
                </div>
              </div>
              <div style='clear: both;'/>
            </li>
            </b:if>
          </b:loop>
        </ul>

        <b:if cond='data:numItemsToShow != 0'>
          <b:if cond='data:totalItems &gt; data:numItemsToShow'>
            <div class='show-option'>
              <span expr:id='data:widget.instanceId + &quot;_show-n&quot;' style='display: none;'>
                <a href='javascript:void(0)' onclick='return false;'><data:showNText/></a>
              </span>
              <span expr:id='data:widget.instanceId + &quot;_show-all&quot;' style='margin-left: 5px;'>
                <a href='javascript:void(0)' onclick='return false;'><data:showAllText/></a>
              </span>
            </div>
          </b:if>
        </b:if>

        <b:include name='quickedit'/>
      </div>
    </div>
  </b:includable>
</b:widget>
<b:widget id='PopularPosts50' locked='false' title='Популярные сообщения' type='PopularPosts'>
<b:includable id='main'>
  <b:if cond='data:title'><p class='title'><data:title/></p></b:if>
  <div class='widget-content popular-posts'>
    <ul>
      <b:loop values='data:posts' var='post'>
      <li>
        <b:if cond='data:showThumbnails == &quot;false&quot;'>
          <b:if cond='data:showSnippets == &quot;false&quot;'>
            <!-- (1) No snippet/thumbnail -->
            <a expr:href='data:post.href'><data:post.title/></a>
          <b:else/>
            <!-- (2) Show only snippets -->
            <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            <div class='item-snippet'><data:post.snippet/></div>
          </b:if>
        <b:else/>
          <b:if cond='data:showSnippets == &quot;false&quot;'>
            <!-- (3) Show only thumbnails -->
            <div class='item-thumbnail-only'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            </div>
            <div style='clear: both;'/>
          <b:else/>
            <!-- (4) Show snippets and thumbnails -->
            <div class='item-content'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
              <div class='item-snippet'><data:post.snippet/></div>
            </div>
            <div style='clear: both;'/>
          </b:if>
        </b:if>
      </li>
      </b:loop>
    </ul>
    <b:include name='quickedit'/>
  </div>
</b:includable>
</b:widget>
</b:section-contents>

Шаг 2. Определяем стиль CSS.

До
]]></b:skin>
пишем
#footer-1 {width: 100%; float: left; padding: 2px 0 0 0; margin: -2px 0 0 0px; position: fixed; bottom: -15px; right: 100%;}

#footer-1:hover {right: auto; background: #313c40; background-image: -webkit-gradient(linear, left top, left bottom, from(#313c40), to(#eeeeee)); 
   background-image: -webkit-linear-gradient(top, #313c40, #eeeeee); 
   background-image:    -moz-linear-gradient(top, #313c40, #eeeeee); 
   background-image:     -ms-linear-gradient(top, #313c40, #eeeeee); 
   background-image:      -o-linear-gradient(top, #313c40, #eeeeee); }

#footer-1 img {margin: 0; padding: 0; background: transparent; border: none;}

#Image55, #Image54, #Image53, #Image52, #Image51{
 float: left; width: 40px; margin: 0px; }

#Image56 { width: 35px; position: fixed; left: 0; background: transparent; padding-top: 2px; margin-top: -2px;}

#Image56:hover { width: 100%; background: #313c40; }

#CustomSearch50, #BlogList50, #PopularPosts50 { float: left; width: 200px; margin: 0 40px;}

#CustomSearch50 { background: #313c40; margin: -2px 40px 0 -1000px; padding: 2px 0 0 1000px; background-image: -webkit-gradient(linear, left top, left bottom, from(#313c40), to(#eeeeee)); 
   background-image: -webkit-linear-gradient(top, #313c40, #eeeeee); 
   background-image:    -moz-linear-gradient(top, #313c40, #eeeeee); 
   background-image:     -ms-linear-gradient(top, #313c40, #eeeeee); 
   background-image:      -o-linear-gradient(top, #313c40, #eeeeee); }

#BlogList50, #PopularPosts50 {position:relative;}

#PopularPosts50 {margin: 0;}

#BlogList50 .title, #PopularPosts50 .title {background: transparent url(http://2.bp.blogspot.com/-iIkd6NLTEGo/Tk6ELH0uOlI/AAAAAAAACLk/Jogq5HivmsA/s1600/2uparrow.png) no-repeat 0 10px; padding: 10px 0 10px 20px; margin: 0px 0 -10px 0; text-shadow: 1px 1px 1px #000; font-weight: bold;}

#BlogList50:hover .title, #PopularPosts50:hover .title {background: transparent url(http://2.bp.blogspot.com/-5s9QjK3AuL0/Tk6ELm0BKfI/AAAAAAAACLs/PrVPQuoXRzo/s1600/2dowarrow.png) no-repeat 0 10px;}

#BlogList50 .title .widget-content, 
#BlogList50 .widget-content,
#PopularPosts50 .title .widget-content, 
#PopularPosts50 .widget-content
{display: none; list-style:none; padding: 5px 5px 40px 5px; margin: 0; width: 100%; position: absolute; left:0; bottom:-20px; background: #313c40; opacity: .8; filter: alpha(opacity=80); -webkit-border-radius: 20px; 
-khtml-border-radius: 20px;
border-radius: 20px;
border-top: groove 6px red; border-bottom: groove 6px red;}

#BlogList50 .title:hover .widget-content, 
#BlogList50:hover .widget-content,
#PopularPosts50 .title:hover .widget-content, 
#PopularPosts50:hover .widget-content
{display: block; }

Шаг 3. Заполнение гаджетов.

В итоге на вкладке "Дизайн" после прямоугольника "Сообщения блога" у нас появятся новые поля с гаджетами. В гаджеты "Картинка" вносим в порядке очерёдности в поле "Изображения"-"Из интернета":
  • http://1.bp.blogspot.com/-zUw2OcejQQY/Tk6ELQNM7zI/AAAAAAAACLo/ln-OQWbW0YI/s1600/arrow-right.png
  • http://3.bp.blogspot.com/-meKV0bC7NzE/Tk4ppdMB7kI/AAAAAAAACLY/kTf-R3p4yT4/s400/rss.png
  • http://3.bp.blogspot.com/-Vp8eaLwOOPI/Tk4psdE1GOI/AAAAAAAACLg/095aMeZNZ7s/s400/email.png
  • http://2.bp.blogspot.com/-RUzReo5vfxE/Tk9RJZ7df1I/AAAAAAAACMA/cv-ErvlNPRc/s1600/twitter-32.png
  • http://2.bp.blogspot.com/-H-U4ZY7GMmw/Tk9RLcapl-I/AAAAAAAACMI/0WAQ_3W1VzM/s1600/vkontakte-32.png
  • http://4.bp.blogspot.com/-_XJCgvLvars/Tk9RLAkH-0I/AAAAAAAACME/PA0CqZ0oBE0/s1600/g-plus-32.png
Помимо URL изображения указываем также адрес страницы (искл.: первый рисунок без ссылки), на которую нужно перейти по щелчку в "Связать" и даём "Название".
Гаджет Картинка
Гаджет "Последние статьи" заполняем ссылками согласно одноимённой публикации (подробнее).
в f t
наверх ↑

13 комментариев:

Пам-пам-парам я хороший человек.
А на деле, по результату как это будет выглядеть на сайте, есть возможность показать?)
NMitra
Ссылка в первом абзаце в тексте "вот такую панель". Только разные браузеры показывают её по-разному, взглянула-ужаснулась. Ещё не удалила причину. Доработаю - отпишусь в комментариях.
Алексей
Можно вопрос "мимо кассы"? :)
Подскажите, пожалуйста, а вы давно добавляли блог в РСЯ? Просто в правилах написано - "сайт должен располагаться на платном хостинге", а у вас Блоггер, хоть и свой домен. Если в принципе берут, то это здорово:)
NMitra
Да, берут. Я не первая была.
NMitra
Панель доработана.
fuck_blogspot
Надо увеличить высоту (в фаерфоксе5) поиск гугла не помещается).
Если вы не возражаете, я её попробую переделать :)
Кстати, где кнопка почтовой подписки для комментариев?
NMitra
Конечно нет, будет интересно посмотреть на результат. У меня Firefox. Специально его немного опустила. Поле ввода есть и ладно.

Чтобы подписаться, нужно выбрать аккаунт Google.
fuck_blogspot
Ну тогда, если соображу что-нибудь, напишу статью (я "ворую" чужие интерфейсы). Конечно, детальный первоисточник гарантирую)
толя
сссс
Надежда Николаева
Пишите для начинающих!!!!!!! Ничего не понятно!!!!! Если, для начинающих, то больше наглядного материала (в картинках), коды , для программистов, а я простой пожилой человек, так и пишите готовый код на то то, другое типа просто скопируйте этот код и поставьте у себя там то!!!!!!!!!! Столько времени потеряла , пока пыталась вникнуть, только крыша уехала!!!!!!!!!! Удачи!!!!
NMitra
Надежда, вы абсолютно правы! Статья была написана в порыве наплыва вдохновения больше года назад и не предполагала, что её будут повторять. Так сказать демонстрация возможностей Blogger.

Спасибо за критику, я её учитываю. В статье сделала пометку.

Ещё раз извините.
Александр Слезов
мдааа а можно как ни будь по подробнее описать все это? Ни чего не понимаю)))
NMitra
Не, не нужна она (панель навигации) вам, не советую