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

Сначала добавляем новый класс 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.

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

Вариант оформления кода с помощью 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. И теперь каждый раз, когда нужно оформить код, его нужно заключить между тегами:

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

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

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

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

Исходный код

Изменение стиля оформления виджета "Популярные сообщения"

Изменила стиль оформления родного Blogger-овского виджета “Популярные сообщения”.
До изменения виджет выглядел так:

После добавления CSS виджет стал таким:

Как убрать рамку вокруг изображения

По умолчанию в блогах на Blogspot-е вокруг изображений (фотографий) в тексте статьи отображается рамка с небольшой тенью. Эта несколько невнятная рамка иногда меня раздражала, но как от неё избавиться, я не знала. Пока совершенно случайно не наткнулась на статью "How To Remove Blogger Picture/Image Shadow And Border".
Оказывается, всё очень просто: нужно просто внести изменения в CSS.
Для этого открываем вкладку "Дизайн" в админке блога → ссылка "Дизайнер шаблонов" → вкладка "Дополнительно" → Добавить CSS

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
  padding: none !important;
  border: none !important;
  background: none !important;
  -moz-box-shadow: 0px 0px 0px transparent !important;
  -webkit-box-shadow: 0px 0px 0px transparent !important;
  box-shadow: 0px 0px 0px transparent !important;
}

Ниже приведу скриншоты до и после внесения изменений в CSS.

Подборка шрифта для основного текста

В этом шаблоне шрифт слишком мелкий (Trebuchet MS, 12 px), хотелось бы покрупнее. 
Почитала и просмотрела, что пишут о шрифте дизайнеры. 
А дизайнеры рекомендуют Arial (Georgia, Verdana), 16 px (а также использовать чётные значения). (Идеальный абзац) 
На блоге "Монолог" у меня сейчас как раз Arial, 14 px. (это если посмотреть в Дизайнер шаблонов - Дополнительно - Текст страницы - Шрифт). Однако, расширения браузера WhatFont и CSSViewer дают значение 15 px. (и кому же верить?)
В текстовом редакторе Blogger, оказывается, шрифты можно выбрать только из списка:  

• Arial 
• Courier
• Georgia
• Helvetica
• Times
• Trebuchet 
• Verdana   

А размеры шрифта также выбираются, как относительные к шрифту текста по умолчанию (чтобы изменить шрифт текста по умолчанию надо залезать в настройки Дизайна блога).

• Очень маленький
• Маленький
• Обычный
• Большой
• Очень большой

На этом блоге менять шрифт не буду, пусть останется, как по умолчанию.  

Оформление цитаты

Хочу изменить оформление цитат, так как стандартное оформление ну совсем простое:
отступ сверху и снизу, а также сдвиг (табуляция блока).
Такое оформление цитаты в стандартном варианте:

Погуглив, нашла несколько разных вариантов.

Вариант № 1. (самый толковый) 

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

blockquote {
border: dotted #666 1px;
border-left:solid #2388BB 5px;
margin:10px 40px;
padding:15px;
color:#333;
font-style:normal;
font-size:14px;
background:#F0F9FF;
}

Так будет внешне выглядеть цитата в статье блога:

Вариант № 2. (используется сейчас в этом блоге)

В этом варианте несколько изменены цветовое оформление и начертание шрифта.

blockquote {
margin:10px;
padding:10px;
border:1px solid #D6D6D6;
border-radius: 5px;
font-family: monospace;
background-color:#F7F7F7;
font-size:90%;
color: #000;
}

CSS варианта № 1 взят тут

Про оформление цитаты и кода:

• Вставка кода в статью блога  
• Вставка кода в статью блога (продолжение)   
• Ещё один вариант оформления кода    
• Текст с прокруткой  
• Оформление участка текста стилем "Тетрадный лист в линейку"