Оформление участка текста стилем "Тетрадный лист в линейку"

Сначала добавляем новый класс CSS ("quote") через:
Дизайн → Дизайнер шаблонов → Дополнительно → Добавить CSS

/* Стиль оформления текста Лист в линейку */
.quote {
  background: linear-gradient(90deg,
      rgba(255, 255, 255, 0) 1.8em, rgba(34, 136, 187, .5) 2em)
      3em 0 repeat-y,
    linear-gradient(
      rgba(255,255,255, 0) 1.9em, rgba(0, 0, 0, .15) 2em)
    0 0;
  background-size: 2em 2em;
  background-color: #f2f9fc;
  margin: 1em 0em 1em 0em;
  padding: 2.5em 2em 1em 6em;
  font: 16px/2 Georgia;
  font-style:italic;
}
/* END Стиль оформления текста Лист в линейку */

Сохраняем.

Текст в виде клавиш клавиатуры с помощью CSS

Клавиши в тексте статьи блога можно выделить интересным образом, нужно внести лишь небольшие изменения в CSS.

Для этого изменим стиль оформления тега <kbd> через:

Дизайн → Дизайнер шаблонов → Дополнительно → Добавить CSS.

Антиреклама

Сегодня при попытке открыть свой блог в Яндекс.Браузере наткнулась на такое сообщение:

Предупреждение Яндекс.Браузера при попытке открыть мой блог

Интересно, что доступ к моему блогу из другого браузера (Firefox) оказался без проблем. 

Кроме того, Google Webmaster в блоге также ничего опасного не заметил:

Ещё один вариант оформления кода

Вариант оформления кода с помощью CSS (вручную) в целом похож на последний способ, описанный в статье "Вставка кода в статью блога (продолжение)".

1. Создала новый класс .mykod, для которого расписала CSS стиль такого вида:

.mykod {
margin:10px;
padding:15px 15px 15px 70px;
border:2px solid #2288bb;
border-radius: 10px;
background-position:10px 50%;
background-repeat:no-repeat;
position:relative;
background-color:#F0F9FF;
font-family: monospace;
font-size:90%;
color: #2288bb;
background-image:url("https://dl.dropboxusercontent.com/u/54357058/kod.png");
}

Этот стиль CSS сохранила (как всегда) через  Дизайн → Дизайнер шаблонов → Дополнительно → Добавить CSS.

2. И теперь каждый раз, когда нужно оформить код, его нужно заключить между тегами:

Текст с прокруткой

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

Длинный код в статье можно оформить в виде текста с прокруткой

Чтобы вставить такой участок текста в пост, переходим в HTML-редактор и в нужном месте вставляем конструкцию вида:

Полезности для блогера из Google+ (сентябрь 2013)

Совсем недавно в Blogger появилась возможность вставлять в посты своего блога любые общедоступные сообщения из социальной сети Google+.  Поэтому я попробовала сделать небольшую подборку заинтересовавших меня сообщений из моих круглов в этой соц. сети. Конечно же, темы постов окажутся полезными в первую очередь блогеру на Blogspot-е и будут затрагивать вопросы оформления и ведения блога именно на этой платформе.
Итак, заслуживающими внимание мне показались следующие сообщения:

1. Aldous Snow. Расширяем возможности Blogger - ЧаВо по сторонним гаджетам.  
2. Наталья Иванова. Подключаем SyntaxHighlighter – подсветку синтаксиса кода. 
3. Анна Шефер. Как сделать одно сообщение постоянно вверху на blogger. 
4. Сергей Загуляев. Как сохранять изображения, ссылки, документы из интернета в Google Drive. 
5. Павел Яковлев. Кнопки Share42 для блоггер. 

А теперь можно увидеть и сами сообщения.

Изменение стиля оформления страницы "Содержание блога"

В предыдущей статье перечислены несколько способов оформления страницы "Содержание" в блоге. Иногда попадаются интересные варианты, однако не всегда их стиль оформления соответствует дизайну вашего блога. Эту проблему можно решить, введя некоторые изменения в файл CSS, прописанный в коде.
Для примера посмотрим, как будет выглядеть страница "Содержание" до и после внесения подобных изменений в файл CSS.
Источник кода взят в статье "Tabbed Table of Contents for Blogger".

Отображение страницы "Содержание":
слева - исходный вариант, справа - изменённый вариант

Исходный код (красным подчёркнут файл CSS, с которым будем работать):

Исходный код