12 сентября 2012 г.

Как использовать кнопку вместо ссылки "Дальше" в Blogger'е

Раз я начал уделять внимание ссылке "Дальше" в Blogger'е, то стоит упомянуть еще один способ ее адаптации под собственные нужды.

Сам я этот трюк не использую, но так как он достаточно прост в реализации и кому-то он наверняка понадобиться, то решил им поделиться.

Речь идет о замене текста ссылки "Дальше" кнопкой.

Что вам для этого нужно?



Во-первых, вам нужно создать такую кнопку (в виде графического файла, например, png) и затем загрузить ее куда-нибудь, откуда вы можете доступиться к ней по прямой ссылке.

Например, вы можете загрузить ее в свой веб-альбом в Picasa Web, сделать ее доступной в настройках изображения (например, "Только тем, у кого есть ссылка").

Далее вам нужно будет получить прямую ссылку на нее (а не ту которую предлагает Google). Например, в Firefox'е вы можете кликнуть правой кнопкой мыши на вашей кнопке в веб-альбоме и выбрать пункт "Копировать ссылку на изображение". У вас получиться ссылка типа: https://lh3.googleusercontent.com/-nKVPzQ-7Aa0/UI8J-R4Kt9I/AAAAAAAAAms/090CZQ9cI5Q/s128/read-more-button.png

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

Теперь вы можете приступить к замене текста ссылкой:
  1. Откройте в "Настройках" вашего блога вкладку "Шаблон".
  2. Под заголовком "Сейчас в блоге" нажмите кнопку "Изменить HTML".

  3. В появившемся окне нажмите "Приступить".

  4. Теперь появившемся исходном коде шаблона найдите такой элемент (можете вопспользоваться поиском по слову jump):

    <b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'>
        <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'>
          <data:post.jumpText/>
        </a>
      </div>
    </b:if>
  5. Замените элемент <data:post.jumpText/>  элементом <img/> указав в атрибуте src адрес к вашей кнопки. Например у вас может получиться такое:

    <b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'>
        <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'>
          <img src='https://lh3.googleusercontent.com/
    -nKVPzQ-7Aa0/UI8J-R4Kt9I/AAAAAAAAAms/090CZQ9cI5Q/s128/read-more-button.png'/>
        </a>
      </div>
    </b:if>
  6. Теперь нажмите кнопку "Сохранить шаблон" и далее "Закрыть".

Можете проверять, как ваша кнопка выглядит на главной странице вашего блога.

Комментариев нет:

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