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

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

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

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

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

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

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

<style>
    #announcement{
    width: auto;
    font:bold 15px Trebuchet MS;
    border: 3px solid #2288bb ;
    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 и я преместете на необходимото място. Запаметете и разгледайте блога.
Това е всичко. Направихме го. Вашият посетител най-напред ще обърне внимание на този блок.
Това е всичко за днес. Доскоро.

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

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