Всем доброго времени суток, читатели и гости блога. Наверняка многие обращали внимание, читая новостные сайты, на очень интересный вариант размещения похожих статей с изображением внутри сообщения. На крупных информационных сайтах такое оформление статей часто используют. С кратким анонсом - ссылкой или заголовком. Пост обновлённый и дополненный.
Варианты оформления сообщения в блогеРеализовать подобное и в блоге достаточно просто. Нам понадобится код, который был предложен в посте варианты оформления сообщения в блоге. Кто пропустил эту шпаргалку можете сразу перейти по ссылке под картинкой справа. Вот так и будет выглядеть итог того, о чём сегодня идёт речь.
Как это реализовать.
Возьмём тот же код и разберём всё остальное.
Код
<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;
Мне очень нравится такое решение. Читаешь и обязательно обращаешь внимание на изображение.
Как это реализовать.
Возьмём тот же код и разберём всё остальное.
Код
<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 блока, думаю будет достаточно. Так или иначе, мы таким образом делаем ещё и внутреннюю перелинковку. А в этом варианте добавили и визуального эффекта.
Даже если не нужны картинки, просто ссылки тоже вариант.
Даже если не нужны картинки, просто ссылки тоже вариант.
Надеюсь, что это вам пригодится. Если возникнут вопросы, задавайте в комментариях. Разберёмся.
здесь можно оформить подписку на новые шпаргалки
Хотелось бы, чтоб было много анонсов, которые менялись автоматически между собой, т.е. один раз посмотрел страничку, показали один анонс, при другом просмотре, другой анонс.
ОтветитьУдалитьНу Иван. Это уже так называемые тизеры. конечно возможно такое сделать. Но пока не знаю как. Не задумывалась.
ОтветитьУдалитьДоброй ночи, Вика! Столько всего нужного и интересного для себя я нашла у Вас. Спасибо Вам за Ваш титанический труд.
ОтветитьУдалитьИрина. не за что. Тут главное надо понять и определиться, что нужно именно Вам. Не стоит всё использовать у себя. Хорошо ведь, когда есть из чего выбирать.
УдалитьСпасибо, Вика! В следующем посте попробую применить. Очень нужное и интересное решение со ссылками.
ОтветитьУдалитьАнна, мне тоже это нравится.
УдалитьЗдравствуй,Вика! Очень интересно,буду разбираться.
ОтветитьУдалитьЗоя, здравствуй. Как давно тебя не было слышно. Попробуй. Правда красиво смотрится. Вот у нас в новостях Майл. так сделано. Посмотри https://news.mail.ru/society/40284230/?frommail=1
УдалитьЛетом у меня сломался ноутбук,пока чинили,переустанавливали,прошло время,в итоге у меня пропали все мои дневники с блоггер,все подписчики,пришлось заводить новый.
ОтветитьУдалитьОчень круто, забираю себе в копилку. Буду реально пробовать этот вариант, ведь так хочется обратить внимание читателей и на другие статьи блога. Но пока я только не разобралась, как же все-таки вставить картинку.
ОтветитьУдалитьСпасибо за пост!
Вика, напиши мне через форму связи выше и я потом тебе по почте попробую взять фрагмент из твоего любого поста с картинкой в качестве примера. И перешлю тебе код. Попробуешь. Так понятнее будет.
ОтветитьУдалитьСпасибо большое!
Удалить