2

Номериран списък в публикация на Blogger

Номериран списък в публикация
Здравейте и добър ден за всички. При оформяне на публикация в блога си използваме подзаглавия, картини, диаграми и номерирани или маркирани списъци за по-добро възприемане на това, което сме публикували. Публикацията ми днес е за оформянето на номериран списък в Blogger.



    Номериран списък в публикация

    Такива списъци разнообразяват публикацията със своята структура, различна от обикновения текст. Помагат за по-доброто възприемане и запомняне на информацията. В редактора на публикациите 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


    списък вариант 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


    списък вариант 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


    списък вариант 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 режим за пренос на нов ред.


    Номерираните списъци са много подходящи за кулинарни блогове, блогове на учители или просто за изброяване на важни въпроси и изготвяне на инструкции. 


    Доскоро.

    2 коментара :


    Copyright © БЛОГ ЗА БЛОГОВЕ©2016- | All Rights Reserved
    Използването на Blogzablogove.com означава, че сте съгласни с нашата Политика на конфиденциалност и защита