На своем блоге для выделения html-кода я уже давно стал использовать вертикальную линию слева. Чтобы не вводить код линии в каждом сообщении, разумнее использовать css (каскадные таблицы стилей). В шаблоне блогспота css помещается между тегами
<b:skin>...]]></b:skin>
Я, соответственно, поместил такой код своей вертикальной линии там же:
.link{border-left: solid #cbe176; padding-left: 10px;margin: 1.4em 0em 1.4em; text-indent: 0px;}
Далее. Для того чтобы этот стиль заработал для нужного нам куска текста, нужно этот самый кусок заключить в теги:
<div class="link">здесь наш текст</div>
Кстати, я еще дополнительно выделял текст другим цветом, и только сейчас понял, что и этот момент тоже можно добавить в css ( внутри фигурных скобок):
color: #783f04;
И целиком стиль, который надо добавить в шаблон Блоггера, будет такой:
.link{border-left: solid #cbe176; padding-left: 10px;margin: 1.4em 0em 1.4em; text-indent: 0px; color: #783f04;}
где
- .link это название элемента, который вы можете обозвать любым удобным запоминающимся для вас именем, я случайно так обозвал, теперь менять уже поздно))).
- border-left: solid #cbe176 это сама линия, зеленого цвета
- padding-left: 10px; отступ текста слева внутри блока
- margin: 1.4em 0em 1.4em; отступы сверху, слева и снизу самого блока от основного текста статьи или краев. em в данном случае — это размер используемого шрифта.
- text-indent: 0px; отсуп красной строки внутри блока. По умолчанию у меня выставляется отступ в блоге на 15px, я подумал, что здесь будет симпатичнее без него.
- И, наконец, color: #783f04; — цвет нашего текста, о чем я уже упоминал.
Идем дальше.
Собственно, таким образом можно добавить различные стили, например сделать фон другого цвета для выделения не только кода, но и, например, основных мыслей статьи, цитат и так далее.
Запомните названия своих стилей! Чтобы не подсматривать каждый раз в шаблоне!
Вот код для красного и желтого блоков:
.yell, .red{Как видите, указаны общие параметры .yell, .red (через запятую), а затем для .red отдельно указано значение цвета для фона. Также здесь прописаны тени (box-shadow) и закругленные углы (border-radius), для разных браузеров, потому как не везде они корректно отображаются.
box-shadow: 5px 5px 20px #B7B7B7;
-webkit-box-shadow: 5px 5px 20px #B7B7B7;
-moz-box-shadow: 5px 5px 20px #B7B7B7;
background:#F3DF57;
-moz-border-radius: 10px !important;
-webkit-border-radius: 10px !important;
-goog-ms-border-radius: 10px !important;
border-radius: 10px !important;
padding:15px; margin:15px
}
.red{
background: #FE7B6D;
}
Так как на блогспоте в редакторе уже есть инструмент для выделения цитат,
\
то почему бы им не воспользоваться. Для этого нужно выделить необходимый текст, нажать на эту кнопку с кавычками, перейти на вкладку HTML, найти нужный фрагмент, он будет заключен в тег
<blockquote class="tr_bq"></blockquote>
у меня, по крайней мере, так, и заменить tr_bq на название стиля. Например:
<blockquote class="link"></blockquote>
В следующем видео я показал этот интересный процесс:
Я думаю, ничего страшно нету в том, что div class заменен на blockquote class. В крайнем случае можно и blockquote заменить на div. В этом случае нужно будет заменить и закрывающий тег.
На этом все, удачи!
На этом все, удачи!