Красивый блок для оформления объявления

Здравствуйте, друзья, читатели и гости блога. Предлагаю сегодня для вас шпаргалку о том, как установить  блок объявления. Посетители обязательно обратят на него внимание, когда вы захотите выделить что-то важное. В этой статье мы уже поднимали эту тему. Ведь многие устраивают всевозможные конкурсы, розыгрыши. Или просто сделать обыкновенное объявление для читателей.
Вот представила себе сейчас блог учителя и такое объявление- Внимание! Завтра контрольная!



Устанавливается и настраивается этот гаджет очень просто. И достаточно красиво смотрится на странице. Подойдёт под любой дизайн. К тому же, он несколько необычный. Есть возможность его отключения.

 Посмотрите сами.  

Внимание!Внимание!Внимание!Внимание!

Вот  код для такой красоты. Копируйте его в блокнот и ниже разберём настройки.

<style>
    #announcement{
    width: auto;
    font:bold 15px Trebuchet MS;
    border: 3px solid #ff6347 ;
    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:#deb887;
    background-image: url('http://www.photominutka.com/images/stories/gallery/voskl3_p.png');
    }
    </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='http://www.personal.bravosoft.ru/guide/pic/btn/delete.png'/></a>
    <center>
Здесь ваш текст 
    </center>
</div>

В стилях CSS первой части кода можно поменять следующее-

border: 3px solid #ff6347 ;-ширина и цвет рамки.
 border-radius: 10px;-закругление углов (если вообще убрать строку блок будет прямоугольный)
 background-color:#deb887;-цвет основного фона.
 background-image: url('http://www.photominutka.com/images/stories/gallery/voskl3_p.png');-адрес картинки слева (хотите меняйте на свою).

Следующий код JavaScript отвечает за мигание блока. Если к участку кода, который я выделила синим цветом добавить ещё  .fadeOut ( 300 ) .fadeIn ( 300 ), то он ещё помигает немного. То, что выделено зелёным, адрес изображения справа (кнопка закрыть). И наконец, сам текст вашего объявления.

Готовый код вставляем в гаджет и перетаскиваем в нужное место. Сохраняем расположение и смотрим блог.  Всё. Мы это сделали! Уж на это ваш посетитель в первую очередь обратит внимание.

У меня на сегодня всё. До новых встреч. Спасибо, что читаете мои шпаргалки.

оформите подписку на новые шпаргалки

Введите Ваш email ...: