Блок с важни съобщения на CSS за Blogger

Pepa Tabakova
Pepa Tabakova
сряда
Блок с важни съобщения
Привет на всички! Понякога ни се налага да привлечем вниманието на читателите си, като подчертаем и акцентираме върху някои отделни точки или фрази в публикацията ни. Или да направим важни съобщения, или пояснения в отделен информационен блок, който да поставим като притурка в страничната лента.

    Има много варианти за оформянето на такъв блок, без значение под каква форма ще е – в тялото на публикация или като притурка в страничната лента. Но най-лесното решение за това е използването на CSS. Няма да използваме иконки, изображения, фото редактор или скриптове на трети страни. Всичко е съвсем просто, защото ни трябва един код в окончателен вариант. Код, в който по желание можем да променяме:
    ➤Фона на блока и неговата ширина;
    ➤Цветовете на отделните му елементи, както и броят им;
    Имаме две възможности, които са:
    ➤Блок с важни съобщения в публикация;
    ➤Блок с важни съобщения в страничната лента;
    Представям ви ги един след друг.

    Блок с важни съобщения в публикация

    Блок в публикация

    Вижте го в този блог.

    Код:


    <div class="tabl one">
    <p>първо пояснение</p>
    </div>
    <div class="tabl two">
    <p>второ пояснение</p>
    </div>
    <div class="tabl three">
    <p>трето пояснение</p>
    </div>
    <div class="tabl foor">
    <p>четвърто пояснение</p>
    </div>
    <style>
    .tabl {
    background-color: #F5F5F5;
    width: 399px;
    padding: 1em 1em 1em 1.5em;
    border-left-width: 5px;
    border-left-style: solid;
    border-radius: 1px;
    position: relative;
    line-height: 1.3;
    margin: 49px;
    }
    .tab + .tabl {
    margin-top: 2em;
    }
    .tabl:before {
    color: white;
    width: 1.5em;
    height: 1.5em;
    position: absolute;
    top: 1em;
    left: -3px;
    border-radius: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    font-weight: bold;
    line-height: 1.5;
    text-align: center;
    }
    .tabl p {
    margin: 0 0 1em;
    }
    .tabl p:last-child {
    margin-bottom: 0;
    }
    .one {
    border-left-color: #8e1111;
    }
    .one:before {
    background-color: #a01212;
    content: "1";
    }
    .two {
    border-left-color: #dc851c;
    }
    .two:before {
    background-color: #e88409;
    content: "2";
    }
    .three {
    border-left-color: #32c232;
    }
    .three:before {
    background-color: #32c232;
    content: "3";
    }
    .foor {
    border-left-color: #26c6da;
    }
    .foor:before {
    background-color: #26c6da;
    content: "4";
    }

    </style>


    Готовият код, както винаги, се задава в самия редактор в HTML режим на правилното място в публикацията.

    Блок с важни съобщения в страничната лента

    Блок в страничната лента

    Вижте и него в лявата странична лента.

    Код


    <div class="tabl one">
    <p>първо пояснение</p>
    </div>
    <div class="tabl two">
    <p>второ пояснение</p>
    </div>
    <div class="tabl three">
    <p>трето пояснение</p>
    </div>
    <div class="tabl foor">
    <p>четвърто пояснение</p>
    </div>
    <style>
    .tabl {
    background-color: #000;
    width: 200px;
    padding: 1em 1em 1em 1.5em;
    border-left-width: 5px;
    border-left-style: solid;
    border-radius: 1px;
    position: relative;
    line-height: 1.3;
    margin: 0px;
    }
    .tab + .tabl {
    margin-top: 2em;
    }

    .tabl:before {
    color: #fff;
    width: 1.5em;
    height: 1.5em;
    position: absolute;
    top: 1em;
    left: -3px;
    border-radius: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    font-weight: bold;
    line-height: 1.5;
    text-align: center;
    }
    .tabl p {
    margin: 0 0 1em;
    }
    .tabl p:last-child {
    margin-bottom: 0;
    }
    .one {
    border-left-color: #8e1111;
    }
    .one:before {
    background-color: #a01212;
    content: "1";
    }
    .two {
    border-left-color: #dc851c;
    }

    .two:before {
    background-color: #e88409;
    content: "2";
    }
    .three {
    border-left-color: #32c232;
    }
    .three:before {
    background-color: #32c232;
    content: "3";
    }
    .foor {
    border-left-color: #26c6da;
    }
    .foor:before {
    background-color: #26c6da;
    content: "4";
    }

    </style>


    Готовият код се вписва тялото на HTML Java/Script притурка в страничната лента.
    За промяна в кодовете използвайте този редактор.

    Уточнение: 

    Този  Блок с важни съобщения на CSS за Blogger можете да инсталирате само веднъж – или в публикация, или в страничната лента.

    Идеята взех от Виктория Барад.

    За въпроси моля, в коментарите. А може и на тази страница. Ще съм благодарна да оцените моя труд. Моля, гласувайте за блога ми на:

    BGtop

    Здраве за всички вас! Не забравяйте да правите добро на други хора!
    Tags: Blogger, CSS
    OpenCloseComments
    Cancel