Как использовать кнопку вместо ссылки "Дальше" в 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. Теперь нажмите кнопку "Сохранить шаблон" и далее "Закрыть".
   
   
   

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