3 варианта оформления участка текста в сообщении

hpargallka.blogspot.ru
оформление участка текстаПриветствую всех, кто читает мои шпаргалки. Сегодня затрону тему, как красиво выделить участок текста  в сообщении нашего блога.  Приведу  несколько вариантов такого оформления.  Если вы, что-то подходящее для себя выберете  к каждому прилагается код. Давайте разберёмся, как и куда его вставить. Сложного в этом ничего нет.

Заранее нужно сделать резервное копирование шаблона .Далее  идём  в ШАБЛОН- ИЗМЕНИТЬ -HTML  и  с помощью клавиш  Ctrl +F  находим
такую строчку  ]]></b:skin> и прямо над ней нужно вставить код варианта, который вы выбрали.
Далее не забываем сохранять шаблон. 



Вот такой вариант

Это код для него

.bloknot {
margin : 15px 35px 15px 15px;
padding : 20px 10px 10px 40px;
background : #bce2eb url(http://3.bp.blogspot.com/-7BPOTkYGTxg/TlpSQjCGdMI/AAAAAAAABn4/u-L9h0RB4Pg/s800/kod.jpg) repeat-y top left;
border-top : 1px solid #3D282B;
border-right : 1px solid #3D282B;
border-bottom : 1px solid #3D282B;
border-left : 1px solid #3D282B;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

Вот такой вариант




Код для него

.bloknot {
margin : 15px 35px 15px 15px;
padding : 20px 10px 10px 35px;
background : #bce2eb url(http://3.bp.blogspot.com/-LH4mhDFmUnI/TlooB7_Oc8I/AAAAAAAABnA/UgYlIENjMLs/s1600/Bloknot.gif) repeat-y top left;
border-top : 1px solid #555555;
border-right : 1px solid #555555;
border-bottom : 1px solid #555555;
border-left : 1px solid #555555;

}

И вот такой



Код

.bloknot {    
margin : 15px 35px 15px 15px;    
padding : 20px 10px 10px 35px;    
background : #F7C65C;    
border-top : 1px solid #B5520B;    
border-right : 1px solid #B5520B;    
border-bottom : 1px solid #B5520B;    
border-left : 1px solid #B5520B;    
border-radius: 5px;    
-moz-border-radius: 5px;    
-webkit-border-radius: 5px;
}


Когда  пишем сообщение и  захочется выделить определённый участок текста , нам остаётся только заключить этот участок (перейти в редактор HTML) вот в эти  теги-

<div class="blocnot">здесь желаемый текст</div>.

В каждом варианте вы можете менять цвет на свой . Поменяйте просто значение background:  ,  которые выделены красным на своё.

В этом вам может помочь генератор цвета.  В следующий раз напишу о том, как таким же образом выделить код в сообщении.

И в завершении  хочу пожелать вам удачи . Не бойтесь экспериментировать. Помните,как у А.С.Пушкина
О сколько нам открытий чудных
Готовят просвещенья дух
И опыт, сын ошибок трудных,
И гений, парадоксов друг,
хотите оформить подписку на новые шпаргалки

введите пожалуйста свой email :




3 комментария:

  1. Здравствуйте, Вика! Огромное спасибо Вам за этот блог и за подробные и доступные объяснения. А как писать сам код в статье, чтобы он был виден читателям?

    Вот так, как у Вас под словами: "Это код для него".

    ОтветитьУдалить
  2. Этот комментарий был удален автором.

    ОтветитьУдалить
  3. Галина, здравствуйте. Выбираете один из вариантов оформления. Основной код устанавливаем перед . А маленький это код вызова. при написании сообщения пишите код или текст как обычно. Потом переходите в режим HTML и заключаем его в эти ДИВЫ. Прочитайте ещё вариант, как это можно делать вот здесь http://www.shpargalochki.ru/2014/10/kak-stilnoe-vydelit-tekst.html#more

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

Пользовательский поиск
Foto Saya
My Photo