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

Привет, друзья. При открытии некоторых сайтов можно видеть сначала приветственную заставку, которая через несколько секунд пропадает и пользователю открывается сам сайт. Наверняка вы встречали такое в сети. Видела я очень интересные варианты оформления такой приветственной заставки. Которая совсем не отвлекает и не раздражает. На ней просто "зависнуть" хочется.

заставка в блоге

Такую фишку легко реализовать и на Блоггере. Тут главное подключить фантазию. На примере, который я вам покажу, фантазии у меня не очень хватили. Но в качестве примера - всё же.


Для реализации нужно зайти во вкладку Тема и найти закрывающийся тег </ head>. Прямо над ним установить этот код

<style type='text/css'>
.visibile {display:block;}
.invisibile {display:none;}
</style>
<script type='text/javascript'>
function mostranascondi(identificazione){
  var menu = document.getElementById(identificazione);
  if(menu.className == &quot;visibile&quot;){menu.className = &quot;invisibile&quot;; }
  else{ menu.className = &quot;visibile&quot;; }
}
</script>

Там же находим <body>. Он где - то рядом с предыдущим. В некоторых шаблонах вместо него есть такая строка

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

Сразу после тега или этой строчки неё следующий код

<b:if cond='data:blog.homepageUrl == data:blog.url'>
<div class='visibile' id='benvenuto' style='z-index:99999; position:fixed; top: 0; left: 0; overflow:visibile; width:100%; height:100%; background: #E4F9F8;'>
<div style='width:600px; height:400px; position:absolute; top:40%; left:40%; margin-left:-300px; margin-top:-200px; padding:100px 30px 0px 0px; color:#003366; font-size:24px; line-height:24px; text-align:center;'>
<p><strong>ДОБРО ПОЖАЛОВАТЬ!!!</strong></p>
<p><strong>РАДА ВАС ВИДЕТЬ </strong></p>
<p><img src='https://www.kittstillrocks.com/wp-content/uploads/2018/10/kittstillrocks-com-welcome-1024x261.png'/></p>
<p><strong> СЕЙЧАС БЛОГ ОТКРОЕТСЯ</strong></p>
</div>
</div>
<script type='text/javascript'>
window.load=setTimeout(&quot;mostranascondi(&#39;benvenuto&#39;)&quot;, 5000);
</script>
</b:if>

Ваши индивидуальные настройки

В строках отмеченных зелёным цветом пишите свой текст. Адрес изображения отмечен розовым цветом.

5000 - это время в миллисекундах, когда сообщение остается видимым до исчезновения

# E4F9F8 - цвет фона на странице сообщений

width:600px; height: 400 px ширина и высота сообщения

верх: 40 % ; слева: 40% ; - это процентная точка макета, где начинается сообщение

color: # 003366 - цвет текста сообщения

размер шрифта: 24 px; line-height: 24 px - это размер символов и строк текста сообщения

text-align: center ; для центрирования сообщения и любых вставленных изображений

После установки кодов не забудьте сохранить шаблон и посмотрите результат. Кстати, советую подумать - в канун праздников можно использовать такую приветственную заставку в качестве поздравления читателям или сделать важное объявление.

Всем добра и до встречи.

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

введите пожалуйста свой email :

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

  1. Виктория, интересно! Спасибо! Подумаю!

    ОтветитьУдалить
  2. Попробуй, Ирина на тестовом блоге сначала. Там поиграться с картинкой можно

    ОтветитьУдалить
  3. Прикольно! Нужно попробовать.
    У меня вопрос не по теме.
    Я поменяла заголовки в блоге, теперь они оптимизированы, но почему то стало по два заголовка H1. Один правильный, а другой - исходный текст. Спрашивала на сайте, там где взяла коды для смены заголовков, ни чем не помогли. Может вы подскажете в каком хоть направлении искать ошибку? И что за исходный текст в H1. Заранее благодарна.

    ОтветитьУдалить
  4. Наталья я почти ничего не поняла. вы бы мне тот сайт откуда это брали показали. Вот это я совсем не поняла- стало по два заголовка H1. Один правильный, а другой - исходный текст. И какие именно заголовки поменяли - H1 на H2. Или ещё что. Поподробнее бы.

    ОтветитьУдалить
    Ответы
    1. Посмотрела Ваш код у Вас и заголовок блога h1. и заголовки сообщения под двумя вообще

      h1.post-title, h2.post-title {
      font: italic bold 30px Play;
      color: #004e28;
      }
      h1.post-title, h2.post-title a {
      font: italic bold 30px Play;
      color: #004e28;
      }
      h1.post-title, h2.post-title a:hover {
      color: #004e28;
      text-decoration: underline;
      }.post-title, h2.post-title {
      font: italic bold 30px Play;
      color: #004e28;
      }
      h1.post-title, h2.post-title a {
      font: italic bold 30px Play;
      color: #004e28;
      }
      h1.post-title, h2.post-title a:hover {
      color: #004e28;
      text-decoration: underline;
      }

      Удалить
  5. Прикольная штука! Но я почему-то люблю, чтобы всё открывалось быстро и сразу. Если какой-либо сайт тормозит, ухожу оттуда. Внутренняя нетерпеливость подводит).

    ОтветитьУдалить
    Ответы
    1. Валерия, да это у всех так со всякого рода всплывающими окнами. Но всё равно пользуются. кому - то может и пригодится. Делают всё равно.

      Удалить

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

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