Статьи по теме внутри поста

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

статьи по теме

Мне очень нравится такое решение. Читаешь и обязательно обращаешь внимание на изображение. 

Варианты оформления сообщения в блогеРеализовать подобное и в блоге достаточно просто. Нам понадобится код, который был предложен в посте варианты оформления сообщения в блоге. Кто пропустил эту шпаргалку можете сразу перейти по ссылке под картинкой справа. Вот так и будет выглядеть итог того, о чём сегодня идёт речь.

Как это реализовать.

Возьмём тот же код и разберём всё остальное.

Код

<span style="width: 200px; float: right; text-align: center; border-top: 3px solid #000; border-bottom: 3px solid #000; padding: 10px; margin: 5px 0 5px 5px;">Здесь анонс или заголовок поста</span>

Как быть с картинкой и ссылкой? В том месте, где предполагаете установить картинку с заголовком, переходим в редакторе сообщения в режим HTML. Устанавливаем этот код и дальше просто пишем своё сообщение. Картинку загружаем обычным способом и потом передвигаем её в полученный блок. Предлагаю скриншот на примере этого сообщения.


Если так у вас не получается сделать, прочитайте другой вариант в шпаргалке, упомянутой выше.

В строке, выделенной синим цветом, впишите название сообщения или анонс статьи, на которое хотите  обратить внимание посетителей. А дальше всё, как обычно.  Задавайте тексту цвет, размер шрифта. стиль. И воспользуйтесь функцией ссылка в редакторе.

Эффекты для текста.
То же самое делаем с левой стороны.

Заменяем значение right на left.
Тут я ещё просто убрала рамку border-top: 3px solid #000; border-bottom: 3px solid #000;

Уже совершенно другой вид. Вот такими несложными действиями оформляем сообщения и даём читателям сразу перейти по ссылке на статьи по теме. 

Конечно же, много такого лепить не стоит. Всё же это лишние изображения и ссылки. 2-3 блока, думаю будет достаточно. Так или иначе, мы таким образом делаем ещё и внутреннюю перелинковку. А в этом варианте добавили и визуального эффекта.

Даже если не нужны картинки, просто ссылки тоже вариант.

Надеюсь, что это вам пригодится. Если возникнут вопросы, задавайте в комментариях. Разберёмся. 


здесь можно оформить подписку на новые шпаргалки

Введите Ваш email


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

  1. Хотелось бы, чтоб было много анонсов, которые менялись автоматически между собой, т.е. один раз посмотрел страничку, показали один анонс, при другом просмотре, другой анонс.

    ОтветитьУдалить
  2. Ну Иван. Это уже так называемые тизеры. конечно возможно такое сделать. Но пока не знаю как. Не задумывалась.

    ОтветитьУдалить
  3. Доброй ночи, Вика! Столько всего нужного и интересного для себя я нашла у Вас. Спасибо Вам за Ваш титанический труд.

    ОтветитьУдалить
    Ответы
    1. Ирина. не за что. Тут главное надо понять и определиться, что нужно именно Вам. Не стоит всё использовать у себя. Хорошо ведь, когда есть из чего выбирать.

      Удалить
  4. Спасибо, Вика! В следующем посте попробую применить. Очень нужное и интересное решение со ссылками.

    ОтветитьУдалить
  5. Здравствуй,Вика! Очень интересно,буду разбираться.

    ОтветитьУдалить
    Ответы
    1. Зоя, здравствуй. Как давно тебя не было слышно. Попробуй. Правда красиво смотрится. Вот у нас в новостях Майл. так сделано. Посмотри https://news.mail.ru/society/40284230/?frommail=1

      Удалить
  6. Летом у меня сломался ноутбук,пока чинили,переустанавливали,прошло время,в итоге у меня пропали все мои дневники с блоггер,все подписчики,пришлось заводить новый.

    ОтветитьУдалить
  7. Очень круто, забираю себе в копилку. Буду реально пробовать этот вариант, ведь так хочется обратить внимание читателей и на другие статьи блога. Но пока я только не разобралась, как же все-таки вставить картинку.

    Спасибо за пост!

    ОтветитьУдалить
  8. Вика, напиши мне через форму связи выше и я потом тебе по почте попробую взять фрагмент из твоего любого поста с картинкой в качестве примера. И перешлю тебе код. Попробуешь. Так понятнее будет.

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

ВСЕГДА РАДА УСЛЫШАТЬ ВАШЕ МНЕНИЕ!
Ели у вас возникла необходимость опубликовать код в комментарии, то воспользуйтесь encoder HTML