Как сделать заставку на сайт | CSS и JavaScript

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

Вопрос: как сделать так, чтобы когда человек набирал адрес блога, то сначала переходил не на главную страницу, а на какую-нибудь другую.. Или еще лучше: у него открывалось бы изображение на весь экран и при клике бы совершался переход на главную... Что-то наподобие всплывающего окна..

То есть задачу можно сформулировать так: при первом посещении сайта посетителю показывается "заставка", а при дальнейшем перемещении по внутренним ссылкам — главная страница.

Собственно говоря, есть два варианта:

  1. sessionStorage — заставка нужна при каждом новом открытии вкладки (не страницы),
  2. localStorage — заставка нужна для одного человека только один раз за всю его историю посещения сайта.
<style>
#pop-up {
  position: fixed; top: 0; bottom: 0; left: 0; right: 0;
  z-index: 100;
  background: rgba(0,0,0,.5) url(http://www.afsklyar.ru/zaglu1.jpg) no-repeat 50% 50%;
  background-size: cover;
}

#pop-up div {
  position: absolute;
  right: 10%;
  top: 20%;
  padding: 3%;
  border-radius: 3%;
  font-size: 300%;
  white-space: pre-wrap;
  line-height: 100%;
  color: #fff;
  background: red;
  cursor: pointer;
}
</style>

<div id="pop-up">
  <div onclick="popUp()">посмотреть
реализацию</div>
</div>

<script>
var popup = document.getElementById('pop-up');

function popUp() {
  sessionStorage.setItem('popup', 'none');
  location.reload();
}

if(sessionStorage.getItem('popup') || !window.sessionStorage) {
  popup.parentNode.removeChild(popup);
}else{
  if(window.stop !== undefined) {
    window.stop();
  } else if (document.execCommand !== undefined) {
    document.execCommand("Stop", false);
  }
}
</script>

Это самый упрощённый вариант. Количество элементов в заставке (например, наличие социальных кнопок) каждый определяет сам.

Скрипт хорош тем, что не нарушает правил Google AdSense, заставка не перекрывает рекламные объявления, так как те не загружаются. Но код JavaScript нужно расположить выше кода AdSense.

посмотреть реализацию

Куда добавить код заставки в Blogger?

Я бы добавила код в гаджет HTML/JavaScript. А показ самого гаджета ограничила бы условием (см. как это сделать):

<b:if cond='data:blog.url == data:blog.homepageUrl'>
в f t
наверх ↑

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

Евгения
Крутотень :)
Пашок Захарофф
у меня еще много идей которые я не знаю как реализовать)) Спасибо за помощь! Это очень круто!
Aldous Snow
За это можно санкции схватить в пс, и большие неприятности в адмитаде и эдсенсе. Любой качественный офер палит всплывающее и ненужное.
NMitra
За что? Это не всплывающее окно, оно изначально открыто, а потом с помощью JavaScript мы его закрывает. Единственно, код нужно повыше закидывать в body, а не в начало статьи, как у меня: какое-то время проходит после того, как загружается основные части блога, поэтому может сложится впечатление, что окно появляется.

В правилах AdSense https://support.google.com/adsense/answer/48182?hl=ru сказано

"код AdSense нельзя помещать в недопустимые места, например во всплывающие окна"

"Сайты... не должны... содержать всплывающие окна, затрудняющие навигацию"

Последний абзац я понимаю так: некоторые сайты заставляют регистрироваться во всплывающих окнах, подписываться на рассылку, вступать в группы в соц сетях и т.п., чтобы посмотреть содержимое сайта.

Сами по себе всплывающие окна - это только инструмент, которым удобно информировать посетителя.

Причём http://en.wikipedia.org/wiki/Pop-up_ad

под "всплывающими окнами" подразумеваются именно окна веб-браузера. То есть страницы на отдельных URL.
NMitra
Собственно, я решила задать вопрос профессионалам, чтобы не теряться в догадках.

https://productforums.google.com/forum/?hl=ru#!msg/adsense-ru/yyAeqm2_QOY/pRB0GzBGGikJ

Присоединяйся к обсуждению :))
Эльдар М Курукчи
Класс! А можно сделать на отдельной странице вот такую вот продающую страницу http://lpgenerator.ru/var/86446/preview/? Спасибо!
NMitra
Страничка шикарная, но немного не логичная. Вы имеете ввиду Blogger? Вам сюда: http://shpargalkablog.ru/2012/05/html-blogger.html
Эльдар М Курукчи
Нет, это страница не blogger, но я залил этот шаблон на blogger http://test-landing-page.blogspot.com/ Я Вам в личке ВК написал
Анонимный
Скажите, а можно сделать таким образом страницу-заставку не на Блоггер, а на сайте? Вернее, чтобы сайт представлял собой вот именно такую страницу-заставку. Спасибо.
NMitra
Не понимаю. В целом код один для всех. Добавьте его на те страницы сайта, где нужна такая заставка и всё.
Анонимный
Спасибо за быстрый ответ, очень признательна - сайт в виде одной страницы-заставки, больше ничего нет(на данный момент - думаю над дизайном + решила изучать html и остальные вопросы сайтростроения - захотелось попробовать сайт самой сделать) Я так и поняла, но решила уточнить, потому что большой чайник. То есть этот код мне нужно ввести в Блокнот, сохранить как документ index.html и этот документ загрузить на хостинг? Простите за глупейшие вопросы - уже знаю некоторые понятия в сайтостроении, но они разрозненны и бестолковы пока(
NMitra
Тут достаточно одной HTML страницы.

Нужен хостинг, например, hostinger.ru. Там есть бесплатный тариф. Его вполне хватит.
Нужен домен или поддомен. Например, shpargalkablog.ru у меня привязан к Blogger, а img.shpargalkablog.ru на хостингере. Нужно прописать домену новую DNS-записи ( http://shpargalkablog.ru/2010/07/pokupka-domena-s-nulya.html#pokupka ):

Хост Тип Значение записи
img A 00.000.000.00

img - это img.shpargalkablog.ru
00.000.000.00 - IP Адрес, который даст хостинг

На хостингере (на других хостингах тоже, но возможно по другому называется) есть "Файловый менеджер", а там папка default.php. Его можно редактировать. Это будет Главная страница.

Можно на хостинг просто загрузить CMS. Тогда в вашем распоряжении будет редактор наподобии Blogger-овского. Записей как это сделать в интернете полно.
Анонимный
Нет слов, как благодарна за такой подробный ответ - спасибо огромное! Хостинг только что оплатила, пытаюсь разобраться в админке, домен есть. Файлового менеджера на хостинге, увы, не нахожу пока. Насколько поняла, надо еще скачивать FTP программу для загрузки файлов на хостинг, СMS я пока изучаю - то есть хочу сразу сделать хороший сайт на базе какой-то CMS, а пока только страничку-заставку без СMS, т.к. редактировать ничего не планирую там.
Нина
Как выровнять блок с содержимым по центру?
NMitra
http://shpargalkablog.ru/2012/03/vyrovnyat-tekst-vertikali.html

Проще всего

#pop-up div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Jar
Реально очень круто что нашел Ваш сайт! Помогло! Так как была проблема надо было весь траффик переводить на другой сайт, а тот не работает и не мог никак зайти в админку установить попап окно или чтото такое
да и попап закрывали и дальше сидели. А тут скопировал вставил и работает! Спасибо