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

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


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

  1. Мне жутко понравилась идея. Смотрю, балдею. Но... Близок локоть, а не кусишь! Серый говорит: "Ну и тупой же ты, хозяин!". И ведь прав, хвостатый!

    ОтветитьУдалить
  2. Семён, а вы с Серым правильно друг друга понимаете. Ну кроме команд обычных.

    ОтветитьУдалить
  3. Доброго дня, Вика! Мне тоже понравилась эта идея... хочу попробовать. Но как народ узнает куда надо нажимать, кнопочку плохо видно, а когда не знаешь, можно и внимание не обратить. )))

    ОтветитьУдалить
  4. Елена , тут иконка кнопка в формате SVG. Ну не знаю как написать (пробовала словами развернуть, свернуть не красиво выходит и не понятно что предлагают. Может в гаждете установить а не в шапке и обозвать в названии, что - то типа нажмите для того - то.

    ОтветитьУдалить
  5. Спасибо за полезность, Вика! Пока такой необходимости у меня нет, но учту, что так тоже можно :)

    ОтветитьУдалить
    Ответы
    1. Victoria, Да, не такая уж это необходимость, но делают и такие плюшки на сайтах.

      Удалить
  6. Ну вот так , Семён, оказывается в жизни всему можно научиться.

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

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