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


статьи по темеВсем доброго времени суток, читатели и гости блога. Наверняка многие обращали внимание, читая новостные сайты, на очень интересный вариант размещения похожих статей с изображением внутри сообщения. Примерно так, как на http://ria.ru/. С кратким анонсом- ссылкой или заголовком.





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

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

Как это сделать. Итак, возьмём тот же код и разберём всё остальное.
Код

<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


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

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

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

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

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

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

    ОтветитьУдалить
    Ответы
    1. Анна, мне тоже это нравится.

      Удалить

Пользовательский поиск