12.11.10

Blogger: Картинка вместо слов 'Читать далее'.

20 comments

Здравствуйте,

очень многим блогерам, использующим платформу Blogger, да и другие платформы, нравится использовать так называемые расширяемые сообщения, когда на главной странице или странице рубрики показывается только анонс поста, а пост целиком можно прочитать по ссылке "Читать далее".

Расширяемые посты - это очень модно и современно. По наблюдению психологов, активные серферы интернета (наши с вами читатели) просто неспособны сконцентрироваться более чем на первых двух абзацах текста им обычно надо много разнообразной информации, которую мы им и предоставим, спрятав за ссылкой Читать далее "скучные" подробности для узкого круга "нудных интеллектуалов" и разместив больше разнообразных постов на главной странице блога.

Лично мне нравится несколько способов создания расширяемых сообщений:

1. Читать далее реализованное в самом Blogger'е. (То что сделано самим Blogger'ом надо любить по определению, тем более что с этим очень легко работать).

Нет в мире совершенства, даже у Blogger'а, поэтому мне в свое время пришлось написать пару постов на тему Встроенные в редактор Blogger'а расширяемые сообщения:

Как вставить 'Читать дальше' и чтобы боковая колонка осталась на месте.
Как показать видео от YouTube НАД катом от Blogger'а..

2. Очень люблю Газетный стиль шаблонов или как я его назвала, Читать далее для самых ленивых. Постоянно по просьбам читателей его дорабатываю, внося туда те или иные возможности.

3. И еще мне очень нравится так называемая Шапка-невидимка, здесь ссылка Читать далее не уводит посетителя с главной страницы.

Сегодняшний мой короткий пост является небольшой доработкой к встроенному в редактор Blogger'а ката (кат это от английского cut - резать ссылка Читать далее).

Задача: Заменить в посте ссылку Читать далее, на ссылку-картинку.

Решение:
1) Найти или нарисовать красивую картинку что-то типа Читать далее, Смотреть подробности, Дальше еще интереснее и т.д.

2) Загрузить картинку и получить ссылку на неё. Если у вас нет на примете бесплатного надежного хостинга для картинок, которым вы всегда пользуетесь, я предлагаю вам воспользоваться сервисом от Google'а Picasa Web Albums ведь именно туда загружаются все картинки, которые вы вставляете в свои сообщения через редактор Blogger'а.

Здесь можно прочитать как загрузить в Альбомы Пикаса картинку и получить на неё работающую ссылку: Picasa, отдай мою ссылку!

3) Итак, после второго шага у нас есть есть ссылка на картинку, которую мы бы хотели использовать как ссылку Читать далее.

А теперь все просто. Кликаем на Дизайн на Панели управления, Выбираем Изменить Html, обязательно Ставим галочку на Расширить шаблоны виджета.

В Html-коде шаблона находим выражение:

<data:post.jumpText/>

и меняем его на

<img src="http://ссылка на нашу картинку" alt="Читать далее" title="Дальше еще интереснее!"/>

Слова в alt и title можно поменять, а ссылку на картинку НАДО поменять обязательно.

Чтобы сместить картинку вправо ищем в коде строчку:

<div class='jump-link'>

и заменяем её на

<div class='jump-link' style='text-align:right;' >

Всем здоровья и удачи!
Света

Blogger: кошка.Комментарии и вопросы более чем приветствуются,нужна помощь - поможем! Читать дальше...

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

  1. Cпасибо за совет полезно и интересно ! Для картинок я пользуюсь самим Bloggerom, загружаю нужную картинку в пост-черновик и лёгким движением мышки получаю готовую ссылочку.

    ОтветитьУдалить
  2. Уряя, Вы вернулись! Пока ни чего не поняла \как обычно у меня бывает\ , но буду разбираться .
    Просто радуюсь новой статье!

    ОтветитьУдалить
  3. Всегда хочется отойти от шаблонов и сделать свой эксклюзивный продукт. Выпендриться,одним словом:-)) Как только найду время,попробую. Спасибо за науку.

    ОтветитьУдалить
  4. добрый день! очень интересная и нужная статья. только у меня возник вопрос. я в своем коде не могу найти такое выражение. что тогда делать?

    ОтветитьУдалить
  5. Супер!!!Все получилось!!! Так здорово теперь смотрится!!! огромное вам спасибки!!!

    ОтветитьУдалить
  6. Света, спасибо Вам большое что откликнулись на мою просьбу!!! :)

    ОтветитьУдалить
  7. Странно, тщательно просмотрел, но так и не нашел выражение

    ОтветитьУдалить
  8. Очень интересно. Я в этом деле новичок, буквально 3 дня назад блог сделал. Он еще сырой, стараюсь его поапгрейдить немного, но знаний не хватает. Может поможете немного? Буду весьма благодарен!
    http://clubmylive.blogspot.com/

    ОтветитьУдалить
  9. хелпс!!!
    вроде всё нашла, всё получилось, но картинка в блоге не появилась... и вообще никаких изменений не произошло(
    может нужно что-то изменить ещё и в настройках?

    ОтветитьУдалить
  10. Вы правы, V_Mambetov, загрузить картинку в пост и взять ссылку от туда - похоже, самый простой способ... Я немного поленилась его описать и теперь придется написать небольшой пост как добывать ссылки из Вебальбомов Пикаса, уже получила письма с просьбой пояснить.

    Спасибо, Забава! Что не поняли спрашивайте, а вообще, пост факультативный. Анна задала вопрос и мне было не сложно на него ответить, вот я и написала этот пост, а то сложные темы у меня месяцами в черновиках воляются :(.

    Не забивайте голову, ЧУМработница, мы-то с вами знаем, что контент - это король! ;)

    Вам, Анна, спасибо, что вдохновили на этот пост :).

    Здорово у вас получилось, Виктория (~Vittory~), и картинка такая необычная! :)))

    Скорее всего, у вас, Gen~Y, не поставлена галочка "Расширить сообщения видждета". Попробуйте еще раз и точно убедитесь что галочка стоит. А искать легче всего с помощью комбинации клавиш CtrlF (не обижайтесь, это я так, на всякий случай).

    Олег Олегыч, не торопитесь с апгрейдом. Контент - это все! Современем, полазив по другим блогам, сами для себя определите какие фичи вам по душе, тогда и конкретный вопрос можно будет задать - хотя бы на уровне "хочу как вот там" ;).

    Я думаю, Marlena, что осталась вставить "кат" в сам пост. Здесь я писала как это сделать: http://blogger4you.blogspot.com/2009/09/bloggers-read-more-did-your-sidebar.html

    Всем большое спасибо за комментарии и вдохновение!

    Удачи вам во всех ваших делах!
    Света

    ОтветитьУдалить
  11. Да я уже знаю что именно мне надо, просто хотел услышать ваше мнение по этому поводу. Мне очень бы хотелось сделать тэги на боковую панель для упорядочения новостей, статей и прочего. Мне кажется, это очень удобно. И также сбоку аккуратненько сделать ссылочки на интересующие меня вещи, например на ваш блог! Чтобы было ненавящиво и красиво) Извините, что пишу не по теме, просто не знаю, где еще можно написать.
    Сорри, за мое невежество, но что такое контент?

    ОтветитьУдалить
  12. Олег Олегыч,контент это, если ничего не путаю, просто содержание статьи (ну или там сообщения...).
    А на счёт тэгов достаточно добавить нужные гаджеты, тэги и ссылки (по моему вот эта статья должна помочь http://blogger4you.blogspot.com/2010/09/blogger-gadgets-counter-popular-posts.html).

    Надеюсь хоть что-то поможет.

    ОтветитьУдалить
  13. Света, у меня все получилось!!Ля-ля-ля!!!Спасибо за уроки!!!

    ОтветитьУдалить
  14. Спасибо огромное!!!!!!!!!!
    Только начинаю разбираться в блоггерстве. Голова кругом.

    ОтветитьУдалить
  15. Обязательно так и сделаю. Была задумка такая уже давно.

    ОтветитьУдалить
  16. Так и сделал. Всё работает. Спасибо.

    ОтветитьУдалить
  17. Большое спасибо очень помог пост!

    ОтветитьУдалить

Популярные сообщения