05 марта 2013

Оформление блоков на blogspot

Для большей читабельности текста различные его типы, такие как исходные коды, различные cmd, bash команды и просто цитаты принято выделять из общей массы и правильно оформлять. 
Оформление блоков в html делается при помощи css-стилей. Но как добавить свой стиль в блог.
Оказывается здесь нет ничего сложного и например в Blogger'е css можно легко добавлять  через дизайнер шаблонов.

В редакторе блоггера есть хорошая кнопочка "Цитата" которая быстро позволяет оформить  выделенный текст, как цитируемый.
Этой кнопке в html-шаблоне соответствует специальный тег <blockquote>. Поэтому давайте воспользуемся таким удобным выделением блоков прямо из редактора и переопределим оформление этого тега с помощью css.

Для этого перейдем в Панель инструментов > Дизайн > Дизайнер шаблонов > Дополнительно > Добавить CSS. 


И введем нужное css-оформление в область справа, например такое:
blockquote { 
border: dotted #666 1px; 
border-left:solid #ff5a00 5px; 
margin:10px 40px; 
padding:15px; 
color:#333; 
font-style:italic; 
font-size:14px; 
background:#fcfcfc; 
}

здесь: border - граница, border-radius - скругление краев, margin - отступы блока, padding - отступ внутри блока, font-size -  размер шрифта, color - цвет шрифта, background - цвет фона.

Теперь в редакторе статьи выделяем нужный текст, нажимаем кнопку "Цитата", после чего оформление будет  выглядеть так:

Пример:

Того же эффекта можно добиться прямым редактированием HTML-кода шаблона. Для этого идем в Панель инструментов > Шаблон > Изменить HTML. Увидите код шаблона.
Перед тегом </head> будет секция <b:skin>...</b:skin> внутри нее, как раз, и находятся все CSS-стили.

Там с помощью поиска находите тег blockquote и редактируете его, как вам хочется!

Комментариев нет:

Отправить комментарий