2014-01-02

Textual description of firstImageUrl

Оформляем Следующая, Главная и Предыдущая страницы 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 картинки”/>

    Следующая страница, Главная, Предыдущая blogspot
  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. Устанавливаем плавающие кнопки навигации страниц.

    2014-01-03_00-38-45

    Вместо статичных вы можете установить плавающие кнопки по краям вашего шаблона.

    Вначале добавим стили для новых кнопок. Для этого найдите код
    ]]></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 до тех пор, пока не увидите код, как на скриншоте (кликабелен) ниже:
    Следующая страница, Главная, Предыдущая blogspot Вы можете его раскрыть, как показано выше красной стрелкой и выделить весь код от одного треугольника до другого, как на рисунке ниже. Для удобства я отделила код красными линиями. Опытные пользователи могут этот шаг пропустить и заменять код, не раскрывая его.
    Следующая страница, Главная, Предыдущая blogspot
         Замените найденный код на следующий: /*
    <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

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

Grissa Silberwood комментирует...

Здравствуйте. Мне очень нужна помощь! Дело в том, что я заменила надписи картинками, но под ними остались видны серые кружочки. Есть ли возможность их убрать? Заранее спасибо!

Иванова Наталья комментирует...

Grissa, дайте ссылку на блог, чтобы я понимала о каких кружках идет речь )

Evgenia Dolinenko комментирует...

Спасибо! правда, у меня в шаблоне код гораздо меньше. В итоге,




просто заменила на


То есть спрятала. Так гораздо читабельнее блог.

Иванова Наталья комментирует...

Evgenia, коды у всех различаются, но когда привыкаешь работать с ними, то видишь идентичные.

stroimizbetona.blogspot.ru комментирует...

Наталья нихао, раскидайте пожалуйста по полочкам как сделать чтобы на стрелках показывалось название следующей статьи. Я вот нашёл (ну вы наверное это и сами уже читали) как мусульмане делают, так прикольно блин, и коды там дают, у кого то получается у кого то нет, делов всего два действия, скопировать и вствить. В общем вот так хотелось бы

http://eutectics.blogspot.ru/2015/01/add-next-previous-post-navigation-in-blogger.html

Или может у вас есть подобный пост?

Дядя Женя комментирует...

Наталья давайте вот эту тему с навигацией разберём, чтобы на стрелках отображался заголовок статей, даже коды есть, только вот втыкаешь по инструкции, а толку нет http://eutectics.blogspot.ru/2015/01/add-next-previous-post-navigation-in-blogger.html

Отправить комментарий

Комментарии, содержащие ненормативную лексику, спам, оскорбления, публиковаться не будут. Ели вы хотите опубликовать код в комментарии, то воспользуйтесь encoder HTML
Публикуя комментарии, вы соглашаетесь с политикой конфиденциальности