Так можно оформить любой текст, код, специальное предложение, объявление. Пофантазируйте немного.
Вот как это может выглядеть.
ингредиенты
400гр свинины
1 небольшая морковка
1 лук-шалот
1 стебель сельдерея
1 веточка свежего розмарина
3 листа свежего шалфея
веточка свежего тимьяна
2 зубчика чеснока
3 лавровых листа
1/2 ст. белого сухого вина
Реализовать такой вариант достаточно просто. Можно сделать подобное и в теле сообщение или установить код в гаджет HTML/JavaScript и поместить его в сайдбаре или подвале блога. Кстати, если вы проводите конкурсы на блоге или розыгрыши. Посетители обязательно обратят на него внимание. Хотите такое сделать у себя? Тогда копируйте код, приведённый ниже в блокнот или черновик блога. И потом подробно разберём весь процесс установки.
код
.boxkets {border:dashed #333 2px;padding:8px;background-color:#ffefd5;width: 95%;margin:0 auto;}
.V-B {
position: relative;
padding: 5px;
margin: 20px 0px;
color: #FFFFFF;
width: 40%;
text-align: center;
text-shadow: 1px 1px 1px rgb(0, 0, 0);
color:#FFFFFF;
font-weight:bold;
background-color:#a9a9a9 ;
}
.V-B:before {
content:"";
display:block;
position:absolute;
bottom:-20px;
left:40px;
width:0;
height:0;
border:0;
border-right-width:30px;
border-bottom-width:20px;
border-style:solid;
border-color:transparent #a9a9a9;
}
.V-B {
position: relative;
padding: 5px;
margin: 20px 0px;
color: #FFFFFF;
width: 40%;
text-align: center;
text-shadow: 1px 1px 1px rgb(0, 0, 0);
color:#FFFFFF;
font-weight:bold;
background-color:#a9a9a9 ;
}
.V-B:before {
content:"";
display:block;
position:absolute;
bottom:-20px;
left:40px;
width:0;
height:0;
border:0;
border-right-width:30px;
border-bottom-width:20px;
border-style:solid;
border-color:transparent #a9a9a9;
}
Что здесь можно изменить, чтобы подогнать цвет под дизайн вашего блога. То, что выделено синим цветом, это фон самой ленты, где написано ингредиенты ( в моём случае). Красным - в двух местах кода отмечен цвет фона, где пишем само сообщение. И зелёным-цвет текста.
После того, когда поменяли цвета на свои необходимо определиться, как часто предполагается использовать данную конструкцию. Если часто, то имеет смысл установить её непосредственно в шаблон блога.
Идём знакомым уже путём. Вкладка шаблон-изменить HTML. Находим строку ]]></b:skin> и прямо над ней вставляем код. Сохраняем шаблон. Далее, при написании сообщения, в том месте, где хотите выделить определённый, участок нам понадобиться код такого вида.
<div class=" V-B">надпись на ленте</div>
<div class='boxkets'>
здесь будет любой текст
</div>
<div class='boxkets'>
здесь будет любой текст
</div>
Вот здесь хочу подробнее остановиться на том, как это сделать. Здесь в шпаргалке вкратце уже об этом шла речь. Но не всем было до конца понятно. Смотрим на скриншот.

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

Возвращаемся обратно в обычный режим и продолжаем писать сообщение. Чтобы строчки располагались списком после каждой прописываем тег <br>.Таким образом, можно выделить и несколько участков текста.
В случае если применять такой вариант иногда, уместней будет не вносить первый код СSS в шаблон, а установить его также в режиме HTML прямо в сообщении. Но для этого нужно только заключить его в теги <style> </style>. При этом он будет выглядеть так.
<style> тут вставляем весь первый код СSS</style>
Лучше всего будет, если приткнуть его в конце сообщения (в режиме HTML), перед закрывающимся тегом </div>

А маленький код вызова использовать так же, как описано выше.
Да. И, наконец, как установить всё это хозяйство в гаджет HTML/JavaScript. Как это выглядит, посмотрите на самое первое изображение этого поста. Просто вставьте в гаджет сначала 1 код СSS с тегами <style> </style> и под ним второй код. В поле название гаджета писать ничего не надо.
Поверьте, мне пришлось дольше всё это расписывать сегодня, чем вы это сможете сделать. Оформляйте свои сообщения. Обращайтесь если кому непонятно что-то или возникнут затруднения. И до новых встреч.
оформите подписку на новые шпаргалки
Вика, у Вас все новые и интересные фишки. Спасибо.
ОтветитьУдалитьВалерий, спасибо за спасибо. Вы тоже не скромничайте. Ваши статья всегда очень полезны и информативны. Читаю с удовольствием.
УдалитьСпасибо! Мне хотелось реализовать что-то подобное, но я не знала как. Попробую по вашему методу! Надеюсь получится...
ОтветитьУдалитьMynameisyanaf.blogspot.ru - Style, Books, Psychology
Яна, привет. Сколько лет сколько зим. Рада, что заглянула. Что-то у меня перестали в ленте твои сообщения отображаться. Сейчас гляну. Если пригодится этот вариант для оформления, буду просто рада.
УдалитьВика, привет! :))
ОтветитьУдалитьОчень интересное оформление, надо будет попробовать, спасибо за идею!
И, кажется, ингредиенты мои... :))))
Кристина, я же пример привела с твоего рецепта последней статьи. Обрати внимание, чтобы списком отображались продукты не забудь про теги BR. Я в сообщении на это обратила внимание.
ОтветитьУдалитьДа, да, я всё заметила. Как будет побольше времени обязательно сяду и разберусь. :) Спасибо ещё раз!
УдалитьУдачи, Кристина.
ОтветитьУдалитьВика, сегодня села разбираться. Действительно, когда читаешь, кажется, что сложно, а на деле всё проще. Я попробовала на одной из своих старых статей, и вот, что у меня получилось http://www.amoreperlacucina.ru/2012/04/blog-post_28.html
УдалитьПо моему, очень даже неплохо смотрится. :)))
Кристина, привет. Смотрится нормально. А ты специально не стала выделять ленту цветом где надпись ингредиенты. И цвет фона не сделала.? Мне кажется и так ОК,
УдалитьЕсли честно, то не специально, это у меня такая ошибка получилась :))))) мне ещё надо разбираться как цвета менять, а то я их поменяла, но они вообще исчезли. Может у тебя где-то уже написано про это?
УдалитьНо вот такой "белый" вариант в рамочке мне тоже нравится. Я уже видела подобный в одном из болгов и он мне приглянулся. :))
Кристина Цвет ленты background-color:#ffefd5; а именно менять надо только #ffefd5. Так же в двух местах значения цвета фона в рамке #a9a9a9. Возможно ты при смене случайно удалила или точку, или двоеточие в коде. А всё это в коде очень важно. Но если тебе так нравиться как есть , то пусть будет. Тоже оригинально.
УдалитьОк, поняла, в следующий раз буду внимательнее. Спасибо Вика! :)
УдалитьВика, спасибо. Очень понравилось. Буду использовать.
ОтветитьУдалитьЛюдмила Геннадьевна. пожалуйста. Кстати, да. Для Вашего блога такой вариант вполне может подойти. Спасибо.
Удалить