Притурки. Поздравете читателите си с банер

Добър ден за читателите и гостите на Блог за блогове. Със сигурност сте забелязали, че в някои блогове има инсталирани притурки - банери за поздрави или блокове с важни обявления. Те привличат вниманието на посетителите. Вариантите им са много. Един от тях вече инсталирахме. Прочетете за него тук.

Днес ние ще направим поздравителен банер в горната част на блога, където се намира навигационната лента. И веднага поглеждаме върху какво ще работим.

Ето такъв поздрав или малко обявление за читателите ще имаме в нашия блог. Тук ще направя някои обяснения. В тази публикация писах как и защо трябва да скриете навигационната лента, известна още като навбар. Съветвам ви да я прочетете.
А в този пример нашият банер ще заеме мястото ѝ, защото в настройките на лентата за навигация избрах да изключа нейната функция.
За да поздравите читателите си изберете не много дълъг поздрав. За да изглежда добре нека да е кратък, сбит и съдържателен поздравителен текст.
И сега кода за този вариант на банера.

<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 притурката, запаметете и преместете на което и да е място в темата на блога. Най-добре е някъде в долния колонтитул.

Това е за днес. Успех!

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

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