Как просто вставлять коды в тело поста BLOGGER ( 2 варианта)

Доброго времени суток, друзья. Пост в первую очередь для новичков Блоггер и тех, кто пока не знает как вставить коды в тело поста для для оформления определённого участка, цитаты или других целей. Многие просто боятся что - то сделать не так. Поэтому решила подробно написать об этом и показать. Пробовать вы можете просто в черновике и в режиме просмотра уже будет виден результат.

оформление текста

В статье про красивое оформление участка текста я приводила несколько вариантов. Оттуда и взяла первый код в качестве примера сегодня. Полностью код такой. Я отметила наклонным шрифтом код CSS. Это стили и, именно они, отвечают за внешний вид.  А внизу небольшая строка кода  HTML.

<style>.set {
font-size:16px;

color: #CCA6A6;
border-left:5px solid #CCA6A6;
border-right:5px solid #CCA6A6;
padding:3px 5px 3px  20px;
border-radius:15px;
-moz-border-radius:15px;
box-shadow:0px 0px 10px #CCA6A6;
-webkit-box-shadow:0px 0px 10px #CCA6A6;
-moz-box-shadow:0px 0px 10px#CCA6A6;
}
.set:hover {
font-size:16px;
color: #A6BDCC;
border-left:5px solid #A6BDCC;
border-right:5px solid #A6BDCC;
box-shadow:0px 0px 10px #A6BDCC;
-webkit-box-shadow:0px 0px 10px #A6BDCC;
-moz-box-shadow:0px 0px 10px #A6BDCC;
}</style>

<div class="set ">здесь ваш текст</div>


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

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

Вариант 1

Проще всего это сделать используя блокнот. Это одна из стандартных программ-компонентов ОС Windows. Она прилагается к любой версии этой операционной системы в обязательном порядке. Откройте «Пуск» и перейдите во «Все программы».  Выбираете папку «Стандартные» и кликните по «Блокнот». У кого 10 - ка или другие ОС немного по другому. 

Сейчас копируете предложенный код и устанавливаете его там. И там же, вместо строки  «здесь ваш текст» пишите тот текст, который нужно выделить. Теперь просто уже из блокнота копируете то, что получилось и в редакторе BLOGGER, переходите в формат  HTML. В нужном месте вашей статьи его вставьте.


Вариант 2.

Если вы написали уже сообщение и хотите в тексте оформить участок, в том месте, где это предполагается, так же переходите на формат HTML и вставляем первую часть кода CSS. В примере это участок, заключённый в теги <style>......</style>  о нём я писала в начале поста


Потом в конце выделяемого участка устанавливаем HTML код . В примере это класс "set "

<div class="set ">здесь ваш текст</div>



Опять же, там где написано "здесь ваш текст", должно быть то, что вы хотите выделить. Вот такой примерно результат


Вот что в итоге у нас должно получиться после всех не сложных манипуляций с применением этого кода. Красота.

Даже если у вас сразу не получается и результат  в режиме просмотра не виден, не отчаивайтесь. Удалите содержания поста в черновике и попробуйте снова. Потихоньку  придёт понимание что да как.

Здесь ещё стоит обратить внимание на один момент. Если выделяется таким образом стихотворение или список, то нужно между строками обязательно в конце прописывать тег </dr> (он переносит текст на другую строку). 

Кодов для возможности красиво оформить веб - страницу или части её, очень много. И согласитесь, что это и воспринимается легче, чем сухой текст, как бы вы его не выделили цветом или шрифтом.

И ещё небольшое дополнение. Если вы остановились на каком - то одном определённом варианте оформлении участка текста, и именно его предполагаете использовать всегда, то лучше установить код CSS непосредственно в шаблоне блога перед строкой ]]></b:skin>, но только уже без тегов <style>......</style> . Потом только при необходимости останется добавить в тело поста только строку кода HTML. У меня именно так в шпаргалках для выделения всех кодов сделано.

Если что - то не донесла ещё или не совсем понятно, пишите в комментариях.

Вот, как обещала некоторые ссылки

Как оригинально оформит участок в тексте
3 варианта оформления участка в тексте 
Цитата или участок в текст 

Ещё больше других вариантов оформления текста можно увидеть на странице «все статьи» в меню сверху в разделе «текст».

Удачи всем и до встречи. 

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

Введите Ваш email


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

  1. Спасибо, Виктория! Интересно!

    ОтветитьУдалить
    Ответы
    1. Ирина, вроде как поподробнее постаралась объяснить. Когда делаю, кажется взял да вставил. Но это с опытом приходит, а люди теряются, особенно начинающие, да и не только..

      Удалить
  2. Хи-хи! Про "тело" мне понравилось. А ещё в Ваш пост вставили рекламу с какими-то искусственными клыками. Уж лучше бы чьё-нибудь красивое тело.

    ОтветитьУдалить
  3. Семён, ну про тело это сленг такой. Вот вы увидели рекламу с клыками. А у меня с доменами высвечивается. И упаси боже с чьим - то телом.

    ОтветитьУдалить
    Ответы
    1. Абсолютно согласен, Вика! Про тело - это я написал похабель. Извини.

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

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

      Удалить
  5. Семён, да бросьте Вы. Рекламу сам Гугл подбирает релевантную рекламу.

    ОтветитьУдалить
  6. очень многого не знаю, но интересно

    ОтветитьУдалить
  7. Семён, вроде старалась весьма подробно эту процедуру описать. Тут, как говорится, бери и делай.

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

    ОтветитьУдалить
    Ответы
    1. Пожалуйста. Только бы без перебора. С этим вообще аккуратно надо.

      Удалить

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