Оформляем Следующая, Главная и Предыдущая страницы blogspot

1. убрать навигацию Следующие, Главная, Предыдущие страницы
2. изменить названия
3. заменить на картинки
4. изменить следующая, предыдущая названием поста
5. плавающие кнопки
6. стили

Читайте также урок по оформлению кнопки читать дальше

1. Убираем ссылки на следующую, главную и предыдущую страницы. Находим в шаблоне блога отрезок кода “nextprev” и удаляем из шаблона код:

    

   <b:includable id='nextprev'> 
     <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 + "_blog-pager-newer-link"' 
           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 + "_blog-pager-older-link"' 
           expr:title='data:olderPageTitle'> 
           <data:olderPageTitle/></a> 
         </span> 
       </b:if>
       <b:if cond='data:blog.homepageUrl != data:blog.url'> 
         <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a> 
         <b:else/> 
         <b:if cond='data:newerPageUrl'> 
           <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a> 
         </b:if> 
       </b:if>
     </div> 
     <div class='clear'/> 
   </b:includable>

2. Если вы не хотите убирать ссылки на предыдущую и следующую страницы блога, то вы можете изменить их названия. Например, назвать их шутливо “туда”, “сюда”, “вперед”, “назад”  или дать английские названия “Newer Posts" , “Home”, "Older Posts. Для того, чтобы изменить название для Следующей страницы, найдите в шаблоне блога код <data:newerPageTitle/> и измените его на ваше название страницы.

   
   Меняем название предыдущей странице – изменяем код шаблона <data:olderPageTitle/> на ваше название.
   Главная страница определяется в шаблоне <data:homeMsg/>, этот код находим и меняем.

3. Для того, чтобы заменить ссылки навигации на картинки, например на иконки или анимацию, нужно коды, указанные в пункте 2 заменить на код изображения вида <img src=”URL картинки”/>

   
   

4. В пункте 2 и 3 мы заменяли названия страниц на постоянный текст. С помощью  jQuery кода, мы можем изменить названия предыдущей и следующей записи на заголовки соответствующих постов. Так, на странице отдельного сообщения вместо кнопки “Предыдущая” будет, например, Горизонтальное выпадающее меню, а вместо “Следующая” – Кнопка Pinterest на изображениях блога. На главной же странице блога, страницах ярлыков и архивов названия “Предыдущая” и “Следующая” страницы блога сохранятся. Как установить:
   • Сначала нужно подключить библиотеку  jQuery, если у вас она не подключена. Иными словами, ищите в шаблоне код скрипта:
     

     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

     Если у вас этот код отсутствует, то прописывайте его перед тегом </head>

   • Теперь найдите в шаблоне блога </body> и вставьте перед ним код:
     
     

     <b:if cond='data:blog.pageType == &quot;item&quot;'> 
           <script type='text/javascript'> 
             $(document).ready(function(){ 
               var newerLink = $(&quot;a.blog-pager-newer-link&quot;).attr(&quot;href&quot;); 
               $(&quot;a.blog-pager-newer-link&quot;).load(newerLink+&quot; .post-title:first&quot;, function() { 
                 var newerLinkTitle = $(&quot;a.blog-pager-newer-link&quot;).text(); 
                 $(&quot;a.blog-pager-newer-link&quot;).text(&quot;&quot; + newerLinkTitle); 
               }); 
               var olderLink = $(&quot;a.blog-pager-older-link&quot;).attr(&quot;href&quot;); 
               $(&quot;a.blog-pager-older-link&quot;).load(olderLink+&quot; .post-title:first&quot;, function() { 
                 var olderLinkTitle = $(&quot;a.blog-pager-older-link&quot;).text(); 
                 $(&quot;a.blog-pager-older-link&quot;).text(olderLinkTitle + &quot;&quot;);//rgt 
               }); 
             }); 
           </script> 
         </b:if>

      

5. Устанавливаем плавающие кнопки навигации страниц.

   
   
   
   Вместо статичных вы можете установить плавающие кнопки по краям вашего шаблона.
   
   Вначале добавим стили для новых кнопок. Для этого найдите код
   ]]></b:skin> и добавьте перед ним:

   .arrowLeft a {position: fixed;z-index: 100;left: -5px;top: 45%;padding: 25px 20px;-webkit-transition: .2s ease-in;-moz-transition: .2s ease-in;-o-transition: .2s ease-in;transition: .2s ease-in;}.arrowLeft a:hover {left: 0;-webkit-transition: .2s ease-in;-moz-transition: .2s ease-in;-o-transition: .2s ease-in;transition: .2s ease-in;color: #fff;}.arrowRight a {position: fixed;z-index: 100;right: -5px;top: 45%;padding: 25px 20px;-webkit-transition: .2s ease-in;-moz-transition: .2s ease-in;-o-transition: .2s ease-in;transition: .2s ease-in;}.arrowRight a:hover {right: 0;-webkit-transition: .2s ease-in;-moz-transition: .2s ease-in;-o-transition: .2s ease-in;transition: .2s ease-in;color: #fff;}.arrowNav a {background: #000000;color: #fff;text-decoration: none;font-size: 16px;}

   Теперь найдите в шаблоне отрезок кода nextprev при помощи CTRL + F.  Таких отрезков может быть несколько, нас интересует именно тот, который заключает код <b:includable …..  </b:includable>. Пример найденного кода ниже:

   <b:includable id='nextprev'>
   <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:includable>

   Ваш код может отличаться несколько от моего, но суть остается. Проще всего найти этот код следующим образом. Отформатируйте шаблон (в редакторе шаблона для этого есть специальная кнопка), введите в поиск по шаблону nextprev. Нажимайте enter до тех пор, пока не увидите код, как на скриншоте (кликабелен) ниже:
   Вы можете его раскрыть, как показано выше красной стрелкой и выделить весь код от одного треугольника до другого, как на рисунке ниже. Для удобства я отделила код красными линиями. Опытные пользователи могут этот шаг пропустить и заменять код, не раскрывая его.
   
        Замените найденный код на следующий: /*

   <b:includable id='nextprev'>  <div class='blog-pager' id='blog-pager'>  <div class='arrowNav'>         <b:if cond='data:newerPageUrl'>      <span id='blog-pager-newer-link'>    <!-- DHI the newer post -->  <div class='arrowLeft'> <a class='prev' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle' id='nextLink'>   <span class='arrow'/>   <span class='prevnext'>&#8592;</span></a>  </div>      </span>    </b:if>    <b:if cond='data:olderPageUrl'>      <span id='blog-pager-older-link'>     <!-- DHI the older post -->  <div class='arrowRight'> <a class='next' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle' id='prevLink'>   <span class='arrow'/>   <span class='prevnext'>&#8594;</span><br/>  </a></div>      </span>      </b:if></div>    <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:includable>

   Если вы все сделали правильно, то увидите в своем блоге две плавающие стрелки.

6. Изменяем оформление кнопок. В шаблоне блога за оформление ссылок “Главная, предыдущая и следующая страницы” отвечают стили:

   
   #blog-pager-newer-link {…….
   }
   #blog-pager-older-link {…….
   }
   #blog-pager {…….
   }
   
   
   или
   .blog-pager-older-link {…….
   }
   .home-link {…….
   }
   .blog-pager-newer-link {…….
   }
   
   
   Для того, чтобы изменить внешний вид, изменяем свойства и значения (прописываем в фигурных скобках). Увеличиваем шрифт, делаем жирнее:

   font-size: 150%;
   font-weight: bold;

   Используем фон или изменяем цвет фона:

   background-image:url('URL OF YOUR IMAGE');
   background-color:#cccccc;

   Изменяем цвет ссылок:

   color:#B10000