Изменить изображение маркера в списке используя CSS

---

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

По умолчанию в маркированном списке обычно мы видим круг или квадрат, как на рисунке ниже.

Можно конечно просто изменить цвет маркера. Шаблон изменить шаблон в стили CSS вставьте строку ниже, цвет подчеркнут.

ul { color: green; list-style-type: disc }

Маркер этот уже изрядно надоел, давайте изменим его на свою картинку. Пример Вы можете увидеть в этом блоге внизу статьи. 

Вам нужно загрузить изображение в редактор блоггер или на диск компьютера, своё или выбрать на специальных сервисах, к примеру на этом  www.audit4web.ru/info/favicon  Размер должен быть не больше 16х16 px. 

Далее рекомендую создать маркированный список, правой кнопкой мыши нажмите по маркеру, и... просмотр кода элемента:

Здесь нам важно посмотреть значения margin и padding, которые установлены для маркера в вашем блоге (на скриншоте справа, рядом со стрелкой). А дальше совсем просто: шаблон изменить шаблон, не забывайте о резервной копии. Раскрываем первую стрелку слева и смотрим стили CSS. 

Ищем строку .post-body li{. Я пересмотрела все свои тестовые блоги на родных шаблонах, конкретно такой строки нет, в отличие от сторонних. Поэтому выше строки ]]></b:skin> добавьте CSS для маркера

.post-body li {

                                    list-style:none; *// Убираем маркер;

                             list-style:url("адрес картинки");

}

Кому трудно вставить CSS в шаблон, другой вариант: дизайн-добавить гаджет-HTML/Script, сохраните внизу макета блога.

<style>

.post-body li {

 list-style:none;

                             list-style:url("адрес картинки");

}

</style>

На сторонних шаблонах такую строку найдете без труда. Добавьте стиль CSS, значения margin и padding после указанной строки в шаблоне уже есть, при необходимости можете корректировать.

И на этом у меня сегодня всё. Все вопросы в комментариях или в меню форма для связи. Всего доброго. 

Почитайте другие полезные статьи:

• Увеличить изображения на страницах сообщений при наведении используя CSS;
• LightBox в блоггер Изменить фон с использованием CSS;
• Автоматическая прокрутка изображений и части текста на CSS для blogger; 
• Зафиксировать navbar или меню внизу страницы в blogger;
• Эффект плавающих ярлыков;
• На главной странице только заголовки постов без изображений;

Рекомендуемый контент: