Здравствуйте дорогие друзья, новые и постоянные читатели. Информация сегодня для вебмастеров, кто часто использует маркированный список в своих статьях, а кто время от времени тоже пригодится.
По умолчанию в маркированном списке обычно мы видим круг или квадрат, как на рисунке ниже.
Можно конечно просто изменить цвет маркера. Шаблон изменить шаблон в стили 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;
- Эффект плавающих ярлыков;
- На главной странице только заголовки постов без изображений;
Рекомендуемый контент:
Доброго времени суток Ольга! Ваш сайт кладезь и находка для таких чайников как я! Целый вечер пробовала поменять изображение маркера, но так ничего и не вышло! выше строки ]]> добавила .post-body li {
ОтветитьУдалитьlist-style:none; *// Убираем маркер;
list-style:url("https://3.bp.blogspot.com/-Al7ultoV720/V-QQyqLrOWI/AAAAAAAABT4/h-jtCSpJS30hjuwP2c8JwFZnjK8TC_3PwCLcB/s1600/01.png");
}
"Добавьте стиль CSS, значения margin и padding после указанной строки в шаблоне уже есть, при необходимости можете корректировать" может что-то еще надо добавить? У меня шаблон "венецианское стекло". По началу казалось ничего особенного, но так и не получилось! Как можно это исправить?
И можно еще один вопрос не по теме? Вы как специалист по css и html, у вас столько фишек для оформления блога в блоггере, на сайте http://www.magentawave.com/2012/02/make-more-menus-on-blogger.html#more, увидела дополнительное серого цвета меню слева фиксированное, где и меню и поиск и кнопка вверх и вниз как говорится все в одном! Можно ли такую же доп.меню сделать для блоггер? С уважением к вам и вашему труду, Тата!
Tata, Вы можете скинуть мне ссылку на скриншот, как Вы вставили CSS в шаблоне. Я сейчас проверила на тестовом блоге именно шаблон "венецианское окно", маркер изменился.
УдалитьИли другой способ: вставить дизайн-добавить гаджет-HTML/Script. Только код надо заключить в тэг style.
В статье дописала вариант.
По вопросу меню, обратитесь к Александру. У него такое меню и создано для блоггер, так как у самого блог на платформе блогспот.
Благодарю за оперативный ответ! Доброго времени суток Ольга! Я вставила в гаджет, попробовала еще раз, но воз и ныне там, вот скрин на то как я вставила https://3.bp.blogspot.com/-g_HSuKfOeBY/V-T2tTcFVhI/AAAAAAAABUo/ZlmkITbhH1sRRgUjVOY1paKMwxjJr-G4QCLcB/s1600/2016-09-23_163002.png.
ОтветитьУдалитьПо поводу меню почему к вам обратилась, увидела у вас в демо-блоге https://2.bp.blogspot.com/-suLQ94WwvfQ/V-T5J9K95KI/AAAAAAAABU4/fIu_qY1ddG4e1JhK0AEHksVPZvFAI_4FACLcB/s1600/2016-09-23_164053.png тоже боковую навигационное меню, очень понравилось, а вот описание статьи, как ее поставить у вас не нашла! Я, увидев у вас, что можно делать на блоггере, вдохновило меня создать еще один сайтик со всякими фишечками! С уважением к вам и к вашему креативному подходу! Тата.
Tata, удалите в шаблоне с секции CSS код в style, плюс строку "в код html" и все, что ниже в style удалить. Тем более, что сверху вставлен такой же стиль правильно.
УдалитьМеню в тестовом блоге создано на сайте Конструктор левого бокового меню, ссылка
http://hello-site.ru/leftmenu/
Правда не все настроенные функции меню работают.
Ольга, доброго времени суток! Благодарю вас! Вот что значит опытный глаз специалиста, убрала этот отрезок. И о чудо! Решился вопрос по оформлению заголовка (тож был злободневный вопрос, хотела приукрасить названия сообщения, и все не получалось)! НО! как были точечки в списке, так и не хотят меняться на изображение! Уже и вариант гаджета пробовала, не хочет!!! В чем еще может быть "заморочка"? А за Конструктор вам мое отдельное почтение! Благодарю вас, буду пробовать приукрашать блог! С уважением к вам и к вашему труду! Тата.
УдалитьTata, попробуйте изменить только цвет маркера, в самом начале статьи код CSS. Получится или нет?
УдалитьИ скиньте мне ссылку на Ваш блог.
Доброго времени суток Ольга! Благодарю вас за отзывчивость! Вот попробовала еще один вариант и получилось заменить, хотя в самом редакторе все равно эти точечки выставляются, а когда просматриваешь опубликованное сообщение, то все нормально вместо точек изображение!
ОтветитьУдалитьul li {
list-style-type:none;
list-style:url("https://3.bp.blogspot.com/-Al7ultoV720/V-QQyqLrOWI/AAAAAAAABT4/h-jtCSpJS30hjuwP2c8JwFZnjK8TC_3PwCLcB/s1600/01.png");
}. С уважением Тата.
Tata, маркер меняется при просмотре черновика и после публикации постов. В редакторе будут точки.
УдалитьУ Вас с таким вариантом изменился только маркер? Просмотрите все ссылки, рядом есть изображения?
Доброго времени суток Ольга! Да все поменялось! Благодарю вас за уделенное внимание! С уважением Тата!
Удалить