Безплатен блог на платформата Blogger (blogspot). Създаване, водене, персонализиране, дизайн, притурки в примери. Препоръки и съвети за начинаещи и напреднали блогъри.

Търсене

Breaking

Притурки. Блок за обявление в блога

Блок за обявление в блога
Здравейте приятели, читатели и гости на блога. Днес ви предлагам един начин за инсталиране на рекламен блок. Посетителите със сигурност ще му обърнат внимание, когато искате да подчертаете нещо важно. В тези публикации - как бързо, красиво и оригинално да оформим участък от текста - вече разгледахме подобна тема. В края на краищата много от вас могат да направят обикновено, но интересно обявление или съобщение за читателите си.


    Блок за обявление в блога

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

    Вижте скриншот.


    Скриншот  блок за обявление в блога

    Код на притурката

    Ето и кода. Копирайте го в удобно за редактиране място и ще уточним настройките по-долу.


    <style>
        #announcement{
        width: auto;
        font:bold 15px Trebuchet MS;
        border: 3px solid #2288
    bb ;
        border-radius: 10px;
        margin: 0 40px 5px 40px;
        text-align: center;
        padding:15px 10px 15px 70px;
        background-repeat: no-repeat;
        background-position: 10px center;
        position:relative;
        color:#fff8dc ;
        background-color:#96DCFE;

        background-image: url('####');
        }
        </style>

        <script src='http://code.jquery.com/jquery-1.2.3.min.js' type='text/javascript'>
        </script>
        <script type='text/javascript'>
        $(document).ready(function(){
        $(".close").click(function(){
        $("#announcement").remove();
        });
        $("#announcement").fadeOut(800).fadeIn(400)
        .fadeOut(300).fadeIn(200)
        .fadeOut(100).fadeIn(80).fadeOut(800).fadeIn(400).fadeOut(300).fadeIn(300);

        });
        </script><div id='announcement'>
    <script language='Javascript'>
    </script>    <a class='close' href='#close' style='float: right;'><img border='0' src='
    https://www.shareicon.net/download/2016/03/12/333355_close_32x32.png'/>
    </a>
        <center>
    <b><span style="color: black;">
    Тук е вашият текст</span></b>

        </center>
    </div>

    Настройки


    В CSS стиловете в първата част на кода можете да промените следното:
    ➤border: 3px solid #2288bb; - ширината и цвета на рамката;
    ➤border-radius: 10px - закръгляване на ъглите, а ако премахнете този ред, блокът ще бъде правоъгълен;
    ➤background-color: #96DCFE; - основен цвят на фона;
    ➤background image: url ('####'); - адрес на фоново изображение, ако искате да имате собствено;
    Следващият JavaScript код е отговорен за "мигнето" на блока:
    ➤Ако добавим още .fadeOut (300) .fadeIn (300) към частта от кода, която е оцветена в синьо, пак ще мига, но различно;
    ➤Оцветеното в лилаво е адресът на изображението вдясно (бутонът за затваряне);
    ➤И накрая, в червено, вашият текст;

    Инсталиране

    Вмъкнете готовия код в притурката HTML / JavaScript и я преместете на необходимото място. Запаметете и разгледайте блога.
    Това е всичко. Направихме го. Вашият посетител най-напред ще обърне внимание на този блок.
    Това е всичко за днес. Доскоро.

    Здраве за всички вас! Не забравяйте да правите добро на други хора!

    Ще съм благодарна да оцените моя труд и кликнете върху звездичките по-долу. Или гласувайте за блога на:

    BGtop

    2 коментара:

    1. Илияна Пешева17:20

      Много интересна притурка. Ще променя цвета на фона и ще я използвам. Благодаря!

      ОтговорИзтриване
      Отговори
      1. Радвам се, че ви е допаднала. заповядайте пак тук.

        Изтриване