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

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



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

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



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

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

<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 ...:


10 комментариев:

  1. Вика, добрый вечер! Много времени прошло, как я создала свой блог, во многом с твоей помощью. Рада увидеть, что ты развиваешь свой проект и в нем уже столько участников! Ведь твои статьи - это практические советы, которые многим нужны. Желаю тебе успехов в работе и удачи!!!

    А подсказки по WP для начинающих у тебя есть? Очень хочу там поселиться. Хотела тебя порасспросить приватно, но вижу только подписку. моя почта в блоге, если найдешь время для ответа, черкни два слова туда. Спасибо!

    ОтветитьУдалить
    Ответы
    1. Светлана сколько лет, сколько зим. Рада видеть. Спасибо на добром слове. У меня внизу блога меню там форма связи.
      С WP не работаю. Наводку дам тебе. Вступи в сообщество WordPress and Blogger в Гугл+ Там много информации и есть у кого спросить.
      Вот Загуляев много пишет вот ссылка http://wordpressmania.ru/. Удачи.

      Удалить
  2. Вика, спасибо за подсказку и отзывчивость! Пойду изучать.
    Кстати, я все это время получала оповещения из комментариев в некоторых твоих интересных темах! Это очень полезная кнопочка!!!

    ОтветитьУдалить
    Ответы
    1. Света, всегда рада помочь. Про какую кнопочку ты говоришь?

      Удалить
  3. "Оповещать" в рамочке под комментариями справа.
    Если возле нее ставишь галочку, то все комменты, написанные позже в этой статье, прилетают на адрес прикрепленный (у меня: ....gmail.com). Я, не имея доступа к компу, но подключая мобильный к интернету, тут же получала все комментарии. Вот, даже находясь в другой стране.
    Еще это удобно, когда оставляешь комментарий с вопросом на разных блогах. Ведь, бывает пошастаешь на новых, а после не знаешь, где и что писал. Приходит оповещение: в теме такой-то, блога замечательного, Ваня Ванечкин написал: трам-пам-пам)))

    ОтветитьУдалить
    Ответы
    1. Ага, Светлана. Сейчас я поняла о чём ты.

      Удалить
  4. Виктория, большое спасибо вам за ваш блог. Нашла здесь много интересной и полезной информации. :)

    ОтветитьУдалить
    Ответы
    1. Большое спасибо за добрые слова. Забегайте почаще.

      Удалить
  5. Спасибо за ещё один замечательный пост, столько всего интересного здесь можно найти, всегда рада заходить сюда!
    Зы
    С прошедшими праздниками!!!

    ОтветитьУдалить
    Ответы
    1. Аня, как рада тебя видеть. У меня последнее время просто встречи с давними знакомыми. Так приятно. Ты бы мне ссылочку ещё на свой другой блог дала. Хочется тоже полистать. И тебя с прошедшими.

      Удалить

Пользовательский поиск