Маркированные списки на blogger
https://inshabashka.blogspot.com/2019/07/oformlenie-spiskov-na-blogger.html
https://inshabashka.blogspot.com/2019/07/numerovannye-spiski-na-blogger.html
то сегодня решила уделить время маркированным спискам. Родные маркеры выглядят на блоге чёрными шариками и если вам они надоели, и есть желание их изменить, то начнём:
Меняем маркеры на блоге
Маркеры - картинки
Устанавливаем код в шаблоне выше строки ]]></b:skin>. Как быстро найти код читайте здесь..post-body li {list-style:none;Адрес картинки — ваша картинка, залитая на любой фотохостинг. Например, в Япикс. Смотрим разные ссылки на картинку, выбираем: Прямая ссылка на изображение.
list-style:url("адрес картинки");}
- png
- gif
- jpg
- jpeg
- и другие
Если вам трудно или боязно лезть в шаблон, можно вставить код в Дизайн/Добавить гаджет/ XTML JAVA SCRIPT.
<style>Следующий вариант оформления:
.post-body li {
list-style:none;
list-style:url("адрес картинки");
}
</style>
Смена внешнего вида маркеров
Вставляем код перед тегом ]]></b:skin>.post ul liВместо решёток вставляем обозначения предложенные ниже:
{
list-style-type:########; }
none - Нет маркеров
disc - Маркер в виде закрашенного кружка
circle - Маркер в виде незакрашенной окружности
square - Маркер в виде квадрата
armenian - Традиционная армянская нумерация
decimal - Числовая нумерация
decimal-leading-zero - Числовая нумерация с нулем перед цифрой
georgian - Традиционная грузинская нумерация
lower-alpha или lower-latin - Строчные латинские буквы
lower-greek - Строчные греческие буквы
upper-alpha или upper-latin - Заглавные латинские буквы
lower-roman - Римские цифры в нижнем регистре
upper-roman - Римские цифры в верхнем регистре
cjk-ideographic - Идеографическая нумерация
hebrew - Традиционная еврейская нумерация.
hiragana - Японская нумерация хирагана
hiragana-iroha - Японская нумерация хирагана ироха
katakana - Японская нумерация катакана
katakana-iroha - Японская нумерация катакана ироха
Заменяем маркеры символами
Этот способ ручной и не требует никаких кодов. Его я использую если маркированный и нумерованный список уже использовался в статье или смотрятся списки не слишком удачно.Всё нужное есть в редакторе блога.
Несколько примеров:
▣Мужчину надо воспитывать до пятидесяти… а после уже перевоспитывать надо.
▣Женщина, чтобы преуспеть в жизни, должна обладать двумя качествами. Она должна быть достаточно умна для того, чтобы нравиться глупым мужчинам, и достаточно глупа, чтобы нравиться мужчинам умным.
▣Если требуется очернить человека, то уж, будьте уверены, никто не сделает этого лучше его родственников.
✴Дети бывают плохими или хорошими, но внуки всегда изумительны.
✵Каждого человека можно выслушать, но не с каждым стоит разговаривать.
✶Достоинство человека определяется тем, каким путем он идет к цели, а не тем, достигнет ли он ее.
💖Бог сотворил нас по своему образу и подобию. Но откуда уверенность, что он работал в реалистической манере?
💖Мой лучший друг тот, кто ищет лучшее во мне.
💖Ручонки наших внуков заводят часы нашей старости.
🌸Если у человека нет ни одного подлинного увлечения, он подобен деревянному идолу, который стоит там, где его поставили.
🌸Обнаженная женщина являет, вероятно, меньшую опасность, нежели женщина, облаченная в одежду, если последняя расположена так искусно, что, все скрывая, вместе с тем все выставляет напоказ.
Готовые коды списков
Коды можно найти в интернете. Добавить их можно двумя способами.
Добавляйте каждый раз, когда нужно добавить список, код в редактор блога в режиме XTML. В редакторе оформление маркеров не будет видно, поэтому для просмотра нажмите Просмотр.
В каждую строку добавляем пункт списка, если недостаточно 5 строк, добавляем строку <li>Элемент списка</li> в код столько, сколько нужно.
Код 1
<ul class="zebra">
<li>Элемент списка</li>
<li>Элемент списка</li>
<li>Элемент списка</li>
<li>Элемент списка</li>
<li>Элемент списка</li>
</ul>
<style>
.zebra {
list-style: none;
border-left: 10px solid #FC7574;
padding: 0;
font-family: "Lucida Sans";
}
.zebra li {padding: 10px;}
.zebra li:nth-child(odd) {background: #E1F1FF;}
.zebra li:nth-child(even) {background: white;}</style>
Код 2
<ul class="list6b">
<li>Элемент списка</li>
<li>Элемент списка</li>
<li>Элемент списка</li>
<li>Элемент списка</li>
<li>Элемент списка</li>
</ul>
<style>
.list6b {
padding:0;
list-style: none;
}
.list6b li{
padding:6px;
}
.list6b li:before {
padding-right:10px;
font-weight: bold;
color: #C0C0C0;
content: "\2714";
transition-duration: 0.5s;
}
.list6b li:hover:before {
color: #ff0000;
content: "\2714";
}
</style>
#ff0000 - цвет галочки при наведении курсора
\2714 - это символа Юникода. Они разные и их можно менять. Подробнее о символах напишу в дальнейшем.
Код 3
<ul class="first">
<li>Элемент списка</li>
<li>Элемент списка</li>
<li>Элемент списка</li>
<li>Элемент списка</li>
<li>Элемент списка</li>
</ul>
<style>
.first {
list-style: none;
padding: 0;
}
.first li {
padding: 10px 30px;
background: linear-gradient(to left, #7118FF 0%, white, #7118FF);
border-bottom: 1px solid grey;
color: #87CEEB;
font-size: 20px;
box-shadow: 0 5px 5px 0 rgba(0,0,0, .2);
margin-bottom: 5px;
}
.first li:last-child {border-bottom: none;}</style>
#7118FF
#87CEEB
В статье использовались коды, найденные на сайтах:
https://html5book.ru/
https://atuin.ru/blog/
https://www.bdblogov.ru
Комментарии со спамом удаляются.