Полноэкранный размер страницы в Блоггер

 Доброго времени суток, друзья. Сегодня создадим полноэкранную страницу блога. Не путать с примером шаблон блога на всю ширину страницы. Это вариант, когда при просмотре страницы блога не будет видно  строку браузера,  вкладки и другие элементы . Обычно режим полноэкранного просмотра делают для встраивания видео. Но мы попробуем сделать просто для веб - страницы используя javascript. 

Попробуйте в работе на тестовом блоге квадратик в шапке блога.

Демонстрация 

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

Кстати, сейчас в обновлённом интерфейсе стало немного по другому функция, как найти в шаблоне строку или участок кода. Так же вызываем поле поиска с помощью клавиш CTRL+ F (читаем здесь). С левой стороны в верху появится  узкое поле. Туда вставляем ключевое слово или часть кода, и нажимаем клавишу Enter. 

 

Важно - обязательно перед внесением изменений в шаблоне блога, сделайте его резервную копию, на случай если что пойдёт не так. Обращаюсь к начинающим блогерам. Лучше сделать тестовый блог по образу и подобию рабочего, и первое время все эксперименты проводить на нём. 

1. HTML код кнопки. 

 Найдите как описано выше вот такой участок в коде

 

<b:includable id='title'>   <b:tag cond='data:blog.url != data:blog.homepageUrl' expr:href='data:blog.homepageUrl' name='a'>    <data:title/>

Скопируйте код, приведённый ниже и установите его под 

<data:title/> 

Код

 <button aria-label="Open Fullscreen" id="openfull" onclick="openFullscreen();"><svg width="24" height="24" viewBox="0 0 24 24"><path fill="#fff" d="M5,5H10V7H7V10H5V5M14,5H19V10H17V7H14V5M17,14H19V19H14V17H17V14M10,17V19H5V14H7V17H10Z" /></svg></button>

<button aria-label="Exit Fullscreen" id="exitfull" onclick="closeFullscreen();"><svg width="24" height="24" viewBox="0 0 24 24"><path fill="#fff" d="M14,14H19V16H16V19H14V14M5,14H10V19H8V16H5V14M8,5H10V10H5V8H8V5M19,8V10H14V5H16V8H19Z" /></svg></button>

Посмотрите на скриншот, где в шаблоне нужно установить код, если хотите её отобразить на этом же месте.  

 

2. Устанавливаем код CSS. 

Там же в шаблоне ищем строку ]]></b:skin> и сразу над ней устанавливаем.

 

#openfull,

#exitfull {

    background: 0 0;

    border: none;

    cursor: pointer;

    padding: 0;

    margin: 0;

    text-align: center;

    width: 30px;

    height: 55px;

    line-height: 55px;

    float: left;

}

#openfull:active,

#exitfull:active,

#openfull:focus,

#exitfull:focus {

    outline: 0;

}

#openfull svg,

#exitfull svg {

    vertical-align: middle;

}

#exitfull {

    display: none;

}

Цветом я отметила расположение кнопки. Вы можете их подстроить, как желаете. 

3. Подключаем javascript , чтобы всё это работало. Кнопка входа и выхода из полноэкранного режима. Устанавливаем его там же во вкладке Тема перед закрывающимся тегом </body>

Вообще, для выхода из полноэкранного режима на клавиатуре имеется кнопка Esc, но у нас будет два в одном.

<script>
//<![CDATA[
var elem = document.documentElement;
function openFullscreen() {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.mozRequestFullScreen) { /* Firefox */
    elem.mozRequestFullScreen();
  } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE/Edge */
    elem.msRequestFullscreen();
  }
  document.getElementById("openfull").style.display = "none";
  document.getElementById("exitfull").style.display = "block";
}

function closeFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
  } else if (document.webkitExitFullscreen) {
    document.webkitExitFullscreen();
  } else if (document.msExitFullscreen) {
    document.msExitFullscreen();
  }
  document.getElementById("openfull").style.display = "block";
  document.getElementById("exitfull").style.display = "none";
}
//]]>
</script>

Не забудьте сохранить шаблон. 

Вот так создали полноэкранную страницу блога с помощью Javascript - при полноэкранной странице блога вы не увидите адресную строку и вкладку браузера и сосредоточитесь только на этой странице.

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

Введите Ваш email