Как заменить ссылку "читать далее" на картинку в Блоггере

 
Друзья всем привет. Многие пользователи бесплатной площадки Blogspot, хотят внести  изменения в дизайн своего блога. Что бы как-то выделить своё детище среди стандартных  шаблонов, и придать своему блогу какую-то изюминку, нечто оригинальное.
 
Большинство блогеров на главной странице своего блога пишут лишь анонс своей статьи в два-три абзаца, а всё остальное прячут под кат, то есть скрывают под надписью "читать далее". И сегодня я покажу вам, как изменить стандартную ссылку "читать далее" на ссылку в виде графического изображения. Как это выглядит, вы можете посмотреть у меня на блоге на главной странице.
 

И так приступим:
1) Заходим в "Панель управления"
2) Нажимаем "Дизайн"
3) Далее нажимаем "Изменить Html"
4) В правом верхнем углу над кодом, обязательно ставим галочку "Расширить шаблоны виджета".

Затем, при помощи кнопок Ctrl+F, в коде шаблона находим строку:
<data:post.jumpText/>

И заменяем её на эту:
<img src="http://ссылка на вашу картинку" alt="Читать далее" title="Узнай все подробности!"/>



Всё что вы видите в этом коде, т.е. alt и title вы можете поменять на свои. Ну и, конечно же вставьте ссылку на своё изображение.

Если вы хотите сместить картинку вправо, опять при помощи тех же кнопок Ctrl+F, в коде ищем строчку:

<div class='jump-link'>

И заменяем её на эту:
<div class='jump-link' style='text-align:right;' >

Если хотите сменить влево, то меняем right на left



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

Ну вот друзья и всё. Теперь вы знаете как заменить ссылку "читать далее" на картинку в Блоггере, придав тем самым некую индивидуальность вашему ресурсу. Возможно вас так же заинтересует статья "Выделение цитаты в тексте на Blogspot".



URL записи