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

Здравствуйте, дорогие читатели. Мы уже знаем как добавлять стили CSS в шаблон блога на Blogger. Стили мы добавляли для красивого и стильного оформления ярлыков.

Подробно как это делать можно почитать в моем блоге в статьях «Красивое оформление ярлыков в блоге на Blogger (Blogspot)» и «Еще одно стильное оформление ярлыков в блоге на Blogger (Blogspot)».

 И так, запоминаем! 

1. Все стили CSS добавляются перед тегом ]]></b:skin>
2. Для экспериментов заведите себе тестовый демонстрационный блог. Обязательно в настройках отметить чтобы блог не сканировался поисковыми системами.

Сегодня мы будем оформлять списки и рубрики с помощью стилей CSS и HTML .

Добавляем понравившийся вам код CSS в шаблон блога. Создаем новое сообщение, заходим в редактор HTML, вставляем код HTML и публикуем сообщение.

Что бы добавить список или рубрику в боковую панель, заходим в Админ панель > Дизайн > Добавить гаджет > HTML/JavaScript и вставляем скопированный HTML код > Сохраняем.

Примеры красивого оформления списков и рубрик в blogger (blogspot)

Первый вариант оформления списков

При наведении курсора циферки переворачиваются на 180°

Стиль CSS

.rounded {counter-reset: li; list-style: none; font: 14px "Trebuchet MS", "Lucida Sans";padding: 0;text-shadow: 0 1px 0 rgba(255,255,255,.5);}.rounded a {position: relative;display: block;padding: .4em .4em .4em 2em;margin: .5em 0;background: #72B626;color: #FFFFFF;text-decoration: none;border-radius: .3em;transition: all .3s ease-out;}.rounded a:hover {background: #99da50;}.rounded a:hover:before {transform: rotate(360deg);}.rounded a:before {content: counter(li);counter-increment: li;position: absolute;left: -1.3em;top: 50%;margin-top: -1.3em;background: #72B626;height: 2em;width: 2em;line-height: 2em;border: .3em solid white;text-align: center;font-weight: bold;border-radius: 2em;transition: all .3s ease-out;}

Код HTML

<ol class="rounded"> <li><a href="#">Элемент списка</a></li> <li><a href="#">Элемент списка</a></li> <li><a href="#">Элемент списка</a></li> <li><a href="#">Элемент списка</a></li> <li><a href="#">Элемент списка</a></li></ol>

Второй вариант оформления списков

Стиль CSS
.first {list-style: none;padding: 0;}.first li {padding: 10px 30px;background: linear-gradient(to left, #f8ab8d 0%, white, #f8ab8d);border-bottom: 1px solid grey;color: #506a6b;font-size: 20px;box-shadow: 0 5px 5px 0 rgba(0,0,0, .2);margin-bottom: 5px;}.first li:last-child {border-bottom: none;}

Код HTML

<ul class="first"> <li>Элемент списка</li> <li>Элемент списка</li> <li>Элемент списка</li> <li>Элемент списка</li> <li>Элемент списка</li></ul>

Третий вариант оформления списков

Стиль CSS
/* Список #4 */#list4 { width:320px; font-family:Georgia, Times, serif; font-size:15px; }#list4 ul { list-style: none; }#list4 ul li { }#list4 ul li a { display:block; text-decoration:none; color:#000000; background-color:#FFFFFF; line-height:30px;border-bottom-style:solid; border-bottom-width:1px; border-bottom-color:#CCCCCC; padding-left:10px; cursor:pointer; }#list4 ul li a:hover { color:#FFFFFF; background-image:url(../images/hover.png); background-repeat:repeat-x; }#list4 ul li a strong { margin-right:10px; }

Код HTML

<div id="list4">
<ul>
<li><a href="#">Элемент списка</a></li>
<li><a href="#">Элемент списка</a></li>
<li><a href="#">Элемент списка</a></li>
<li><a href="#">Элемент списка </a></li>
</ul>
</div>

Четвертый вариант оформления списков. Древовидный стиль.

Стиль CSS

/* Список #5 */
#list5 { color:#000000; }
#list5 ol { font-size:18px; }
#list5 ol li { }
#list5 ol li ol { list-style-image: url("../images/nested.png"); padding:5px 0 5px 18px; font-size:15px; }
#list5 ol li ol li { color:#0817e0; height:15px; margin-left:10px; }

Код HTML

<div id="list5"><ol><li>Название рубрики<ol><li>Элемент списка</li><li>Элемент списка</li><li>Элемент списка</li></ol></li><li>Название рубрики<ol><li>Элемент списка</li><li>Элемент списка</li><li>Элемент списка</li></ol></li><li>Название рубрики<ol><li>Элемент списка</li><li>Элемент списка</li><li>Элемент списка</li></ol></li></ol></div>

С помощью последнего кода получиться симпатичная карта сайта. Стоит добавить только этот кусочек кода перед закрывающим тегом </div> .

<li>Название рубрики<ol><li>Элемент списка</li><li>Элемент списка</li><li>Элемент списка</li></ol></li>