четверг, 19 сентября 2013 г.

Как создать ссылку на конкретное место в посте?

Иногда бывает нужно сделать ссылку не на весь пост, а на какое-то конкретное место в нем.

Зачем это нужно - примеры
Пример 1:
Пишете вы, например, отзывы на десяток книг в рамках читального марафона - удобно сделать в начале поста небольшое оглавление - нажимаешь на интересующую книгу и сразу попадаешь на нужный отзыв - не надо долго крутить колесо у мышки:)
Вот как это сделано у Наташи.
Или у меня в этом посте - специально сделала оглавление для примера.

Пример 2:
У меня на странице "Библиотека" - можно сразу перейти к Библиотеке или в рубрику "Интересное о книгах", миновав "Правила приема книг"

Пример 3:
Еще можно использовать этот прием при добавлении работ в галереи-конфетки - если у вас, например, сборный пост-солянка, и где-то в середине затесалась погремушка, которую вы хотите добавить в галерею детских игрушек. Чтобы люди не рыскали по всему поисках в недоумении, что же вы хотели продемонстрировать? А сразу попадали на нужную фотку:)

Как это сделать - html-код якоря
Используем так называемый "якорь", который вставляется перед нужным текстом (или картинкой). К этому якорю мы позднее прицепим ссылку.
Итак, открываете пост, внутри которого нужна ссылка, в режиме HTML. Копируете этот код (это и есть якорь):

и вставляете его перед вашим текстом. Вместо фразы "имя якоря" внутрь кавычек пишете любой набор цифр-букв-символов, даже на русском можно. Я использую "n1", по привычке. Мой код выглядит так:

А ваш может выглядеть, например, так:

Или так:

Это уж как фантазия подскажет:)

Куда вставлять код, если у текста есть шрифтовое оформление
Если текст у вас выделен жирным, зеленым, больше обычного - как у меня, в режиме html этот текст будет окружен всякими кодами (которые, собственно и делают его жирным, зеленым и т.д.):

Не обращайте внимания, код все равно вставляется прямо перед текстом, вот таким образом

Если вы, вставив код, перейдете в обычный режим, а потом опять в HTML, то увидите, что код изменился на такой:

Это, видимо, Blogger, что-то мудрит, но на нужную нам функцию ссылки это никак не влияет.

Как сделать несколько якорей
Если нужно сделать несколько якорей (как в первом примере - оглавление со ссылками на отзывы о книгах), используйте один и тот же код, только меняйте имя якоря внутри кавычек, например:




Как правильно написать ссылку
Якоря мы сделали, как теперь правильно написать ссылку? Совсем все просто: копируете ссылку на ваш пост, а в конце ее дописываете значок # и имя вашего якоря. Вот таким образом:

или

Ну и вставляете эту ссылку в нужное предложение - например, в оглавление. Ссылку можно использовать теперь где угодно, не обязательно только в этом посте: в другом посте, в комментариях к любому посту, в конфетке-галерее и т.д.
Если используете в этом же посте в качестве оглавления, то проследите, чтобы не стояла галочка "открывать ссылку в новом окне".

Как узнать адрес ссылки, если пост еще не опубликован
Как узнать адрес ссылки, если вы еще только пишете пост и пока его не опубликовали?
В режиме редактирования сообщения справа у вас есть столбик "Настройки сообщения", в этом столбике нажимаете "Постоянная ссылка" - Blogger выдает вам адрес автоматической ссылки. Можете задать собственную ссылку, нажав "пользовательская постоянная ссылка", об этом можно подробнее почитать в Олиной статье.

Вот и все! Если остались вопросы, пишите в комментариях:)
Этот пост традиционно отправляется в мои Blogger уроки.

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

  1. Надюш, как все подробно! Я в свое время намучилась, пока искала, как это все сделать! И для меня ново про шрифтовое оформление, возьму на заметку, спасибо!

    ОтветитьУдалить
    Ответы
    1. Я этот приемчик давно использую - на работе занимаюсь сайтом нашей компании - новости всякие добавляю, и там в админке сайта я и обнаружила однажды этот код:)
      Здорово, что мне удалось добавить что-то новое:)

      Удалить
    2. Ого, так ты еще и контент-менеджер! Здорово))))

      Удалить
    3. Ну, это сильно сказано:)))) Моя должность называется очень обтекаемо - менеджер:)
      Но в общем, да, все тексты для сайта и рекламных буклетов пишу я.

      Удалить
  2. Надя, привет! Какая полезная статья! Ты молодц, что сама разобралась и другим рассказала!
    Но я пока ничего, с утра, не поняла. Буду знать на будущее к кому обратиться за советом ;-)

    ОтветитьУдалить
  3. Я вот тоже пока ничегошеньки не поняла, но чувствую, что что-то очень полезное!!! Буду внимательно изучать! Спасибо, Надя, за труд!!!

    ОтветитьУдалить
    Ответы
    1. Пожалуйста, Жанна! Пользуйтесь, если будут вопросы, задавайте, разберемся вместе:)

      Удалить
  4. Очень интересная статья! Спасибо! иду читать все ваши блоггер уроки ))

    ОтветитьУдалить
    Ответы
    1. Пожалуйста:) Только там не только мои уроки, а ссылки на уроки многих девочек:)

      Удалить
  5. Надя! СПАСИБО!!!!
    Очень полезная вещь. Я в статью 20 фишек галерей Inlinkz благодаря тебе добавила содержание и внутри текста еще несколько ссылок))))

    ОтветитьУдалить
    Ответы
    1. Наташа, на здоровье! Да, штука эта и правда полезная, очень рада, что тебе пригодилось - вовремя я пост написала:)

      Удалить
  6. О, Надюша, это очень нужное дело! Спасибо!

    ОтветитьУдалить
  7. Надя, спасибо большое)) Пойду осваивать новые технологии))))))))

    ОтветитьУдалить
  8. Надежда, подскажите, нужно ли к таким ссылкам добавлять атрибут rel="nofollow"?

    ОтветитьУдалить
  9. Спасибо! Очень полезная информация.

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

  10. Очень полезная информация. Наконец то я нашла то что искала. Спасибо.

    ОтветитьУдалить
  11. Спасибо за полезные советы.

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

Я очень рада вашим комментариям!

Related Posts Plugin for WordPress, Blogger...