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

Стандартный вид навигации в Блоггере отображён ссылками: Следующее, Главная страница, Предыдущее.   сообщения как изменить навигацию в блоге(http://www.shpargalochki.ru/2015/04/kak-izmenit-navigaciju-v-bloge.html) и как сделать плавающие кнопки (http://www.shpargalochki.ru/2017/10/plavayushie-knopki-navigatsii-v-blogger.html) навигации.  Ещё один более интересный вариант вам на заметку. Демонстрация:https://prostotestblog.blogspot.ru/ 1. Заходим во вкладку <<Тема>>найдите вот такую строку  <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> А в этом коде синим отмечен цвет рамки кнопок при наведении курсора и розовым основной цвет рамки.