Модернизируем на страницах с постами ссылки Предыдущее - Следующее.

Blogger - Blogspot делаем стильные кнопки под ссылки Предыдущее - Следущее на страницах с постами и заодно выставляем их под правильное направление.

Всем привет. Итак сегодня без прелюдий, сразу перейдем к обсуждаемой теме. по собственному опыту знаю и с  неохотой вспоминаю, как меня бесили эти несуразные ссылки Предыдущее и Следующее к тому же они по стандарту находятся в непривычном для нас расположении, Следующее с левой стороны, Предыдущее с правой и это еще не все, по идеи они должны появляться сразу по окончинаии текста поста, а не под комментаримями. Так же под стандартнимы ссылками не отображается название следующего и предыдущего постов (сообщений) И сегодня мы с вами одним выстрелом положим даже не двух, а сразу четырех зайцев. Если вкратце, то мы выставим правильное расположение этих ссылок и придадим им более стильный вид.

Для начала переходим в раздел Шаблон - Изменить HTML ищем код <head> и после него вставляем:

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

    <link href='http://fonts.googleapis.com/css?family=georgia' rel='stylesheet' type='text/css'/>
 
Затем ищем код ]]></b:skin> и перед ним выставляем следующий код:

.mbt-pager { border-top: 2px dashed #ddd; border-bottom: 2px dashed #ddd;  margin-bottom: 10px;   overflow:hidden; padding:0px;}
.mbt-pager li.next { float: right; padding:0px; background:none; margin:0px;}
.mbt-pager li.next a { padding-left: 24px; }

.mbt-pager li.previous { margin:0px -2px 0px 0px; float: left;  border-right:1px solid #ddd; padding:0px; background:none;
}
.mbt-pager li.previous a { padding-right: 24px;  }

.mbt-pager li.next:hover, .mbt-pager li.previous:hover  {background:#333333; }

.mbt-pager li { width: 50%; display: inline; float: left; text-align: center; }
.mbt-pager li a { position: relative; min-height: 77px; display: block; padding: 15px 46px 15px; outline:none; text-decoration:none;}

.mbt-pager li i { color: #ccc; font-size: 18px; }

.mbt-pager li a strong { display: block; font-size: 20px; color: #ccc; letter-spacing: 0.5px; font-weight: bold; text-transform: uppercase; font-family:georgia, sans-serif, arial; margin-bottom:10px;}

.mbt-pager li a span { font-size: 15px; color: #666;  font-family:georgia,Helvetica, arial; margin:0px;}
.mbt-pager li a:hover span,
.mbt-pager li a:hover i { color: #ffffff; }
.mbt-pager li.previous i { float:left; margin-top:15%; margin-left:5%; }
.mbt-pager li.next i { float: right;
margin-top: 15%;
margin-right: 5%; }

.mbt-pager li.next i, .mbt-pager li.previous i ,
.mbt-pager li.next,  .mbt-pager li.previous{
-webkit-transition-property: background color; -webkit-transition-duration: 0.4s; -webkit-transition-timing-function: ease-out;
-moz-transition-property: background color; -moz-transition-duration: 0.4s; -moz-transition-timing-function: ease-out;
-o-transition-property: background color; -o-transition-duration: 0.4s; -o-transition-timing-function: ease-out;
transition-property: background color; transition-duration: 0.4s; transition-timing-function: ease-out; }

.fa-chevron-right {padding-right:0px;}

Следующий шаг, ищем код <data:post.body/> их может быть два нам нужен тот, который располагается ниже и после него вставляем код:



    <b:if cond='data:blog.pageType == &quot;item&quot;'>

    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>

    <ul class='mbt-pager'>

            <li class='next'>
    <b:if cond='data:newerPageUrl'>
    <i class='fa fa-chevron-right'/><a class='newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' rel='next'/>
    <b:else/>
    <i class='fa fa-chevron-right'/><a rel='next'><strong>Следующий пост</strong> <span>Это самый первый пост</span></a>
    </b:if>
    </li>

        <li class='previous'>
    <b:if cond='data:olderPageUrl'>
    <i class='fa fa-chevron-left'/><a class='older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' rel='previous'/>
    <b:else/>
    <i class='fa fa-chevron-left'/><a rel='previous'><strong>Предыдущий пост</strong> <span>Это самый последний пост</span></a>
    </b:if>
    </li>

        </ul>


    <script type='text/javascript'>
    //<![CDATA[
    (function($){   
        var newerLink = $('a.newer-link');
        var olderLink = $('a.older-link');
        $.get(newerLink.attr('href'), function (data) {
         newerLink.html('<strong>Следующий пост</strong> <span>'+$(data).find('.post h3.post-title').text()+'</span>');   
        },"html");
        $.get(olderLink.attr('href'), function (data2) {
         olderLink.html('<strong>Предыдущий пост</strong> <span>'+$(data2).find('.post h3.post-title').text()+'</span>');   
        },"html");
    })(jQuery);
    //]]>
    </script>

          </b:if></b:if> 
Отлично движемся дальше. Находим код <b:includable id='nextprev'> и после него нам нужно вставить код:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&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>

Если готово, тогда сохраняем шаблон и передвигаемся к своему сайту - блогу, открываем любой пост и радуемся уже не ссылкам, а кнопкам Предыдущий пост и Следующий пост.


Коммент.

Имя

Бесплатные шаблоны WordPress Блог Все для blogger Все для WordPress Графический дизайн Заказ сайта Заработок в интернете Инструменты для сайта Контакты Купить шаблон blogger Наши услуги Новичкам Оптимизация сайта Партнерки для сайтов Перевод статьи Плагины для WordPress Полезные сайты Полезные сервисы Полезные статьи Разделы сайта Сайты - блоги Шаблоны для Blogger Шаблоны для Joomla Шаблоны для PrestaShop Шаблоны для Ucoz Шаблоны на русском Шаблоны blogger 2016 Шаблоны blogger бесплатно Шаблоны blogger магазин Шаблоны Bootstrap 3 Шаблоны Magento best blogger templates
false
ltr
item
Шаблоны для сайтов и блогов: Модернизируем на страницах с постами ссылки Предыдущее - Следующее.
Модернизируем на страницах с постами ссылки Предыдущее - Следующее.
Blogger - Blogspot делаем стильные кнопки под ссылки Предыдущее - Следущее на страницах с постами и заодно выставляем их под правильное направление.
https://1.bp.blogspot.com/-8eJd9twMgZI/VjzE0ulTZcI/AAAAAAAAiFQ/CMzvlki3d3E/s640/Blogger%2B-%2BBlogspot%2B%25D1%2581%25D1%2582%25D0%25B8%25D0%25BB%25D1%258C%25D0%25BD%25D1%258B%25D0%25B5%2B%25D0%25BA%25D0%25BD%25D0%25BE%25D0%25BF%25D0%25BA%25D0%25B8%2B%25D0%25B4%25D0%25BB%25D1%258F%2B%25D1%2581%25D1%2581%25D1%258B%25D0%25BB%25D0%25BE%25D0%25BA%2B%25D0%25BF%25D1%2580%25D0%25B5%25D0%25B4%25D1%258B%25D0%25B4%25D1%2583%25D1%2589%25D0%25B5%25D0%25B5%2B%25D1%2581%25D0%25BB%25D0%25B5%25D0%25B4%25D1%2583%25D1%258E%25D1%2589%25D0%25B5%25D0%25B5.jpg
https://1.bp.blogspot.com/-8eJd9twMgZI/VjzE0ulTZcI/AAAAAAAAiFQ/CMzvlki3d3E/s72-c/Blogger%2B-%2BBlogspot%2B%25D1%2581%25D1%2582%25D0%25B8%25D0%25BB%25D1%258C%25D0%25BD%25D1%258B%25D0%25B5%2B%25D0%25BA%25D0%25BD%25D0%25BE%25D0%25BF%25D0%25BA%25D0%25B8%2B%25D0%25B4%25D0%25BB%25D1%258F%2B%25D1%2581%25D1%2581%25D1%258B%25D0%25BB%25D0%25BE%25D0%25BA%2B%25D0%25BF%25D1%2580%25D0%25B5%25D0%25B4%25D1%258B%25D0%25B4%25D1%2583%25D1%2589%25D0%25B5%25D0%25B5%2B%25D1%2581%25D0%25BB%25D0%25B5%25D0%25B4%25D1%2583%25D1%258E%25D1%2589%25D0%25B5%25D0%25B5.jpg
Шаблоны для сайтов и блогов
http://www.shablonu-dlya-blogger.ru/2015/11/moderniziruem-ssylki-predydushhee-sledujushhee.html
http://www.shablonu-dlya-blogger.ru/
http://www.shablonu-dlya-blogger.ru/
http://www.shablonu-dlya-blogger.ru/2015/11/moderniziruem-ssylki-predydushhee-sledujushhee.html
true
5286106991494805428
UTF-8
Похожих постов не найдено Отобразить все Читать дальше Ответить Отмена Удалить By Главная Страницы Пост. Отобразить все Рекомендуем Тег Архив Поиск Все посты По вашему запросу не найдено ни одного поста Вернуться на главную Воскресение Понедельник Вторник Среда Четверг Пятница Суббота Вс Пн Вт Ср Чт Пт Сб Января Февраль Март Аперль Май Июнь Июль Август Сентябрь Октябрь Ноябрь Декабрь Янв Фев Мар Апр Май Июнь Июль Авг Сен Окт Ноя Дек только что минуту назад $$1$$ мин. назад час назад $$1$$ час. назад Вчера $$1$$ дней тому назад $$1$$ недель тому назад более 5 недель Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy