Красивые кнопки панели навигации для Блоггер

Привет, друзья. Стандартный вид навигации в Блоггере отображён ссылками: Следующее, Главная страница, Предыдущее. Как - то совсем тоскливо. У меня уже были сообщения как изменить навигацию в блоге и как сделать плавающие кнопки навигации. Ещё один более интересный вариант вам на заметку. Так сказать простенько, но со вкусом. С красивой картинкой - домиком и кнопками со стрелочками. hover эффект при наведении курсора добавит им ещё привлекательности.

И чтобы не ходить "вокруг да около", давайте сразу смотреть о чём идёт речь на тестовом блоге в самом низу страницы.

Демонстрация

1. Чтобы такое реализовать заходим во вкладку <<Тема>>. Сделайте на всякий случай резервную копию. С помощью клавиш Ctrl + F найдите вот такую строку

 <b:includable id='nextprev'>

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

Всё что находится между

<b:includable id='nextprev'>

тут весь код

</b:includable>

Нужно удалить весь код между строками <b:includable id='nextprev'> и </b:includable> и вставить следующий код. Чтобы было вот так.

 <b:includable id='nextprev'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <div class='blog-pager' id='blog-pager'>
    <b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
      </span>
    </b:if>

    <b:if cond='data:olderPageUrl'>
      <span id='blog-pager-older-link'>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
      </span>
    </b:if>

    <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>

    <b:if cond='data:mobileLinkUrl'>
      <div class='blog-mobile-link'>
        <a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
      </div>
    </b:if>
  </div>
  <div class='clear'/>
    </b:if>
<b:if cond='data:blog.pageType != &quot;item&quot; and data:blog.pageType != &quot;static_page&quot;'>
      <div class='blog-pager' id='blog-pager'>
    <b:if cond='data:newerPageUrl'>
      <div id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><svg viewBox='0 0 24 24'>
    <path d='M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z' fill='#000000'/>
</svg></a>
      </div>
    </b:if>
    <b:if cond='data:olderPageUrl'>
      <div id='blog-pager-older-link'>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><svg viewBox='0 0 24 24'>
    <path d='M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z' fill='#000000'/>
</svg></a>
      </div>
    </b:if>
     <div class='mobile-link-button' id='blog-pager-home-link'>
    <a class='home-link' expr:href='data:blog.homepageUrl' expr:title='data:homeMsg'><svg viewBox='0 0 24 24'>
    <path d='M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z' fill='#000000'/>
</svg></a>
    </div>
<div class='home-box' title='предыдущий пост '><svg viewBox='0 0 24 24'>
    <path d='M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z' fill='#000000'/>
</svg>
</div>
<div class='lasthome-box' title='следующий пост'><svg viewBox='0 0 24 24'>
    <path d='M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z' fill='#000000'/>
</svg>
</div>
</div>
    </b:if>
      <div class='clear'/>
</b:includable>

Замените отмеченное розовым на свои названия.

2. Там же в шаблоне ищем закрывающийся тег </head>. Обычно он в начале шаблона. И над ним вставляем этот код

<b:if cond='data:blog.pageType != &quot;static_page&quot; and data:blog.pageType != &quot;item&quot;'>
<style type='text/css'>
/*<![CDATA[*/
#Blog1{padding-bottom:55px;position:relative}
.home-box,.lasthome-box,a.blog-pager-newer-link,a.blog-pager-older-link,a.home-link{padding:0;line-height:45px;position:absolute;width:43px;height:43px;text-align:center}
#blog-pager-newer-link{float:left}
#blog-pager-older-link{float:right}
#blog-pager-newer-link a,#blog-pager-older-link a,a.home-link{color:#141924;transition:all .4s ease-in-out}
#blog-pager-newer-link a:hover,#blog-pager-older-link a:hover,a.home-link:hover{color:#e8554e}
.blog-pager svg{width:24px;height:24px;vertical-align:-5px}
#blog-pager,.blog-pager{clear:both;text-align:center;position:absolute;width:200px;height:45px;line-height:45px;bottom:0;left:50%;margin:0 0 0 -100px;overflow:visible}
#blog-pager-home-link a.home-link,a.blog-pager-newer-link,a.blog-pager-older-link{background:#fff;border:1px solid #dedede;color:#141924;transition:all .4s ease-in-out;bottom:0}
a.blog-pager-older-link{border-radius:3px;right:0;z-index:2}
a.blog-pager-newer-link{border-radius:3px;left:0;z-index:2}
#blog-pager-home-link a.home-link{border-radius:3px;left:50%;margin-left:-22.5px}
#blog-pager-home-link a.home-link:hover,#blog-pager-newer-link a:hover,#blog-pager-older-link a:hover{color:#e8554e;border:1px solid rgba(232,85,78,1)}
.home-box,.lasthome-box{background:#fff;color:#888;border:1px solid #dedede;border-radius:3px;bottom:0;z-index:1}
.home-box{left:0}
.lasthome-box{right:0}
.home-box svg path,.lasthome-box svg path{fill:#888}
.clear{clear:both}
/*]]>*/
</style>
</b:if>

А в этом коде синим отмечен цвет рамки кнопок при наведении курсора и розовым основной цвет рамки. Тут уж на ваше желание. Можете воспользоваться этой таблицей цветов. 

Нажмите на просмотр и увидите обновлённую и красивую панельку навигации. Всем спасибо и  с наступающим 2018 годом. Здоровья вам, успехов и всяческих благ в новом году.

Получайте новые сообщения с блога прямо на почту

Введите Ваш email