Приветственный баннер в верхней части блога

Доброго времени суток читатели и гости. Наверняка, вы обращали внимание, что на некоторых блогах установлены приветственные баннеры. Или блоки важных объявлений, на которых мы хотим заострить внимание своих посетителей. Вариантов их достаточно много. Один из таких мы уже устанавливали.

Об этом прочитайте здесь.

Сегодня сделаем приветственный баннер в верхней части блога там, где расположен навбар. 





Смотрим сразу о чём пойдёт речь.

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


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

Тут не следует писать очень длинное приветствие, поскольку это не совсем красиво смотрится. Решать только вам. А сейчас код для такого варианта баннера.

<style type="text/css">

#abt-hotsmain{height:100px;left:0;position:fixed;top:0;width:100%}
#abt-hots{background-color:#CC6633;border-bottom:3px solid #FFF;height:30px;left:0;position:fixed;top:0;width:100%;box-shadow:3px 3px 3px 3px;z-index:10000}
#abt-hotsdata{color:#FFF;font-family:serif;font-size:20px;padding:5px}
#abt-hotshide{cursor:pointer;height:20px;position:absolute;right:12px;top:4px;width:20px}
#abt-hotsshow{background-color:#EB593C;border-bottom:3px solid #000;border-bottom-left-radius:5px;border-bottom-right-radius:5px;border-left:3px solid #000;border-right:3px solid #000;cursor:pointer;height:25px;padding-top:5px;position:absolute;right:5px;top:0;width:30px}
.abt-hotsdownarrow{border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid #CC5200;height:0;width:0}
.abt-hotsblock{background-color:#CC5200;height:10px;width:8px}
.abt-hotsuparrow{border-bottom:10px solid #CC5200;border-left:10px solid transparent;border-right:10px solid transparent;height:0;width:0}
</style>
<div id="abt-hotsmain" >
<center id="abt-hotsshow" onmouseup="document.getElementById('abt-hots').style.display='block'"><div class="abt-hotsblock"></div><div class="abt-hotsdownarrow"></div></center>

<div id="abt-hots" >
<center id="abt-hotshide" onmouseup="document.getElementById('abt-hots').style.display='none'"><div class="abt-hotsuparrow"></div><div class="abt-hotsblock"></div></center>
<center id="abt-hotsdata" >
Приветствую Вас на своём блоге. 
</center>
</div>
</div>

Здесь в коде можно менять почти все стили на свои. Общий фон, цвет и ширину рамки, закругление углов, шрифт. И многое другое. Я часто в сообщениях это подробно разбираю, так что сегодня решила не останавливаться на каждом стиле. Вот тут все посты на эту тему. Кому интересно почитайте. Или просто берите то, что прописано в коде. И соответственно текст пишите на ваше усмотрение.

Код вставляем в гаджет  HTML/JavaScript, сохраняем и перемещаем в любое место блога. Лучше всего куда-нибудь в футер.

И сегодня у меня всё. Мне очень приятно, что читаете мои шпаргалки. До скорых встреч.

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

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