Оформление нумерованного списка в сообщении Blogger

Всем, доброго времени суток. При оформлении статьи для лучшего восприятия текста мы используем подзаголовки, картинки, диаграммы и нумерованные или маркированные списки. Cегодня пост об оформлении нумерованного списка в Blogger.
Такие списки разбавляют пространство статьи своей отличной от простого текста структурой.  Помогают лучше усвоить и запомнить материал. В редакторе сообщений у нас есть функция нумерованный список. Достаточно удобно. Просто выделил текст и нажал на иконку вверху. Этот инструмент сам формирует каждый элемент списка.

Пробуем создать самый элементарный нумерованный список. Допустим.

Что нужно для рыбалки

1. Теплую одежду
2. Рыболовные снасти
3. Пешня, ледобур
4. Наживку, прикормку
5. Рыболовный ящик, складной стульчик
6. Емкость для рыбы
7. И ещё много чего

Как - то совсем стандартно и скучно. Если мы сейчас перейдём в режим HTML, то увидим что код его выглядит вот так -

<ol style="text-align: left;">
<li>Теплую одежду</li>
<li>Рыболовные снасти</li>
<li>Пешня, ледобур</li>
<li>Наживку, прикормку</li>
<li>Рыболовный ящик, складной стульчик</li>
<li>Емкость для рыбы</li>
<li>И ещё много чего</li>
</ol>

Пробуем, использую стили CSS, сделать их более привлекательными и индивидуальными. Выбирайте тот вариант, который больше понравится, копируйте его код. Затем идём во вкладку тема - изменить HTML и перед знакомой строкой  ]]></b:skin> устанавливаем его и сохраняем шаблон.

Затем после написания сообщения, так же выделяем часть текста, оформленного списком и жмём на функцию нумерованный список. Сейчас он будет выглядет именно так, как тот, который вы подобрали.

Вариант 1. Здесь я использовала для наглядности скриншоты. При наведении курсора на кружок происходит эффект вращения.

оформление нумерованного списка

Код.

.post ol{
counter-reset: li;
list-style: none;
*list-style: decimal;
font: 13px 'trebuchet MS', 'lucida sans'; /* размер шрифта */
padding: 0;
margin-bottom: 4em;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
font-weight: bold;
}
.post ol li{
position: relative;
display: block;
padding: .4em .4em .4em 4em;
*padding: .4em;
margin: .5em 0;
text-decoration: none;
border-radius: .3em;
transition: all .3s ease-out;
}
.post ol li:hover:before{
transform: rotate(360deg);
}
.post ol li:before{
content: counter(li);
counter-increment: li;
position: absolute;
left: 10px;
top: 50%;
margin-top: -1.3em;
height: 2em;
width: 2em;
line-height: 2em;
color: #fff; /* цвет цифры */
background: #CCCCCC; /* цвет фона номера */
border: .2em solid #669999 ; /* цвет границы */

-webkit-box-shadow: 0 8px 5px -7px #888;
-moz-box-shadow: 0 8px 5px -7px #888;
box-shadow: 0 8px 5px -7px #888;
text-align: center;
font-weight: bold;
border-radius: 2em;
transition: all .3s ease-out;
}

Вариант 2.

Код.

.post ol{
counter-reset: li;
list-style: none;
*list-style: decimal;
padding: 0;
margin-bottom: 4em;
font: 13px 'trebuchet MS', 'lucida sans'; /* размер шрифта */
text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
.post ol li{
position: relative;
display: block;
padding: .4em .4em .4em .8em;
*padding: .4em;
margin: .5em 0 .5em 4.5em;
text-decoration: none;
}
.post ol li:before{
content: counter(li);
counter-increment: li;
position: absolute;
left: -30px;
top: 50%;
margin-top: -1em;
background: #6699FF; /* цвет фона для номера */
height: 2em;
width: 2em;
line-height: 2em;
text-align: center;
font-weight: bold;
}
.post ol li:after{
position: absolute;
content: '';
left: -5px;
margin-top: -.7em;
top: 50%;
width: 0;
height: 0;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left:8px solid #6699FF; /* цвет фона стрелки*/
}

Вариант 3.

Код.

.post ol{
counter-reset:li;
list-style: none;
*list-style: decimal;
margin-left:0;
padding-left:0
}
.post ol li{
position:relative;
margin:0 0 20px 15px !important;
padding:4px 5px 4px 10px !important;
list-style:none;
*list-style: decimal;
border-bottom:1px solid #666666; /* нижняя граница элемента */
background:#CCCCCC; /* цвет фона каждого элемента */
text-indent:14px;
}
.post ol li:before{
content:counter(li);
counter-increment:li;
position:absolute;
top:-6px;
left:-10px;
font-family:'Oswald', serif;
font-size:14px; /* размер шрифта номера */
width:20px;
margin:0 0 10px 0;
padding:4px !important;
color:#336666; /*цвет номера */
text-align:left;
background:#669999; /* цвет фона номера*/
text-indent:6px;
text-shadow: 1px 3px 2px #fff;
}
.post ol li:after{
content:"";
position:absolute;
top:-5px;
left:17px;
width: 0px;
height: 0px;
border-style: solid;
border-width: 5px 0 0 5px;
border-color: transparent transparent transparent #999999; /* цвет треугольника сзади */
}

Во всех кодах я отметила, где вы можете поменять цвета, в зависимости от дизайна вашего блога. при создании списков, не забывайте делать про перенос строк или прописывайте тег </BR> в режиме HTML.

Нумерованные списки очень хорошо подойдут для кулинарных блогов, блогов учителей или просто для оформления каких - то инструкций.

Всем спасибо за внимание и до встречи.

Введите Ваш email