Объявление
Уважаемые читатели, друзья, подписчики. В связи с участившимся и, порядком надоевшим спамом в комментариях от всяких анонимах(будь они не ладны), я вынуждена включить модерацию комментариев на некоторое время. Очень надеюсь на ваше понимание.

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

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

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

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





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

приветствие в блоге

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


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

приветствие для блога

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

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


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

  1. Привет Виктория! У меня раньше стоял приветствующий баннер, он качался и определял время суток. К примеру: если человек зашел утром, то пишется "с добрым утром". Если днем, то "добрый день" и т.д. Потом мне надоел этот банер и я его убрал.

    ОтветитьУдалить
    Ответы
    1. Иван, привет. В начале ведения блога и у меня такой был. Мы сначала все хотим всё попробовать. И никуда от этого не денешься.

      Удалить
  2. Вика, сделала, цвет нашла и поменяла) Спасибочки.

    ОтветитьУдалить
    Ответы
    1. Сама Доброта, молодец. Забегу посмотреть. Вижу ты за дизайн по полной взялась.

      Удалить
    2. Сама Доброта, мне стала интересно, зашла глянуть приветствие, и мне резануло глаза. "Приветствую Вас на своем блоге", не берусь утверждать, но как-то как "У нас на районе..." Правильнее "у меня в блоге" или "у себя в блоге". Я писала так ПРИВЕТСТВУЮ! РАДА ВИДЕТЬ ВАС В ГОСТЯХ! НАДЕЮСЬ ИНФОРМАЦИЯ ОКАЖЕТСЯ ДЛЯ ВАС ИНТЕРЕСНОЙ И ПОЛЕЗНОЙ!
      Надеюсь, я вас не обидела. Пишу из лучших побуждений, могла бы и промолчать.

      Удалить
    3. Олеся, я не совсем с тобой согласна. Как-то давно на одном форуме копирайтеров эта тема обсуждалась. И то о другое имеет место быть. Даже набрать в поисковика, на своём блоге и у меня в блоге -выдача идёт в пользу первого. В качестве альтернативы предлагалось
      1.Приветствую тебя читатель моего блога!
      2.Приветствую Вас дорогие читатели
      3.Здравствуйте друзья!
      4.Добро пожаловать

      Удалить
    4. Вика, да, действительно, я не берусь утверждать, что я права, но на мой взгляд звучит как-то не по русски, хотя я в Беларуси живу, может у нас так не говорят.
      На мой взгляд, лучше выбрать что-нибудь не вызывающее споров.

      Удалить
    5. Тут уж автор блога сам должен решать. На нас всех не угодишь.

      Удалить
    6. Да я ещё тыщу раз поменяю). И потом, так я учусь, только методом проб и ошибок можно научиться. Я сначала хотела удалить навбар вообще, но мне кнопки "настроить" и гугл+ пока очень нужны. Поэтому я искала варианты, как закрыть. Пока я только примеряю, всё ещё не доделано, не окончательный вариант. Так что, мой блог - это ещё только эскиз.

      Удалить
    7. Кстати, ещё есть тема для спора по поводу красоты блога. Я, может, чего-то не понимаю, но смотрела статьи, где указаны самые красивые блоги, типа "топ лучших блогов". Но мне они не понравились. Я творческий человек, видимо у меня мышление другое. Мне на сером блоге скучно. И пестрота тоже бесит. Вот я ищу своё, пока не могу найти лучший вариант. Наверное, нужно полистать статьи вебдизайнеров, чтобы понимать характер построения сайта.

      Удалить
    8. 1.Прочитала второпях, не поняла сначала, что резануло.
      2.Ответ для Олеси: Объясню без подробного изложения. Вы же не говорите, надеюсь: "Я вас приветствую в родной земле?" Так и здесь, указывается действие в данном месте, на данный момент. Подробности с филологической точки зрения вдаваться не буду).
      3.Не обиделась.

      Удалить
    9. Ничего. потихоньку всё установится. тут ведь насчёт дизайна дело такое. блоги ведь разных тематик бываю. Отсюда и идёт оформление. а тем более мода на дизайн тоже меняется. как ты тут не крути. В конце-концов можно подыскать подходящий шаблон в сети. А топ лучших блогов я не думаю, что он определяется строго по дизайну.

      Удалить
    10. А как же: "Я вас приветствую в России" или "Я вас приветствую в родном доме?"
      Да что об этом говорить, люди до сих пор не могут наспориться как правильно: "На Украине" или "В Украине".
      Слово "блог" относительно новое, поэтому, думаю, и в официальные правила русского языка профессура его еще не включила.
      Я же сразу сказала, что я не утверждаю, а рассуждаю ...
      Про дизайн. Когда я начинала заниматься блогом, то понятие не имела про уже готовые нестандартные шаблоны. Сейчас все чаще начинаю об этом задумываться, там все гаджеты одного стиля, все ровненько и аккуратно ...

      Удалить
    11. Если ставить нестандартный шаблон, то желательно раньше. Потом возни много. Надо быть готовым к тому, что не все предлагаемые коды будут работать на них.
      Насчёт приветствий. Я вот к примеру пишу часто доброго времени суток. И программа мне говорит, что это обращение появилось благодаря интернету и в русском его нет. Так что на самом деле возможно и так и иначе. Я про в и на.

      Удалить
  3. Олеся по смене шаблона есть небольшой пост у меня http://www.shpargalochki.ru/2014/11/6-sovetov-pri-smene-shablona-bloga.html

    ОтветитьУдалить

ВСЕГДА РАДА УСЛЫШАТЬ ВАШЕ МНЕНИЕ!
Ели у вас возникла необходимость опубликовать код в комментарии, то воспользуйтесь encoder HTML