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

Попробуйте в работе на тестовом блоге квадратик в шапке блога.
Сначала определитесь в каком месте будет кнопка. В моём случае я решила установить ей в шапке блога справа. На мой взгляд, самое подходящее место.
Кстати, сейчас в обновлённом интерфейсе стало немного по другому функция, как найти в шаблоне строку или участок кода. Так же вызываем поле поиска с помощью клавиш CTRL+ F (читаем здесь). С левой стороны в верху появится узкое поле. Туда вставляем ключевое слово или часть кода, и нажимаем клавишу Enter.
Важно - обязательно перед внесением изменений в шаблоне блога, сделайте его резервную копию, на случай если что пойдёт не так. Обращаюсь к начинающим блогерам. Лучше сделать тестовый блог по образу и подобию рабочего, и первое время все эксперименты проводить на нём.
Найдите как описано выше вот такой участок в коде
<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>
//<![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 - при полноэкранной странице блога вы не увидите адресную строку и вкладку браузера и сосредоточитесь только на этой странице.
здесь можно оформить подписку на новые шпаргалки
Мне жутко понравилась идея. Смотрю, балдею. Но... Близок локоть, а не кусишь! Серый говорит: "Ну и тупой же ты, хозяин!". И ведь прав, хвостатый!
ОтветитьУдалитьСемён, а вы с Серым правильно друг друга понимаете. Ну кроме команд обычных.
ОтветитьУдалитьА я выучил "серый" язык"!
УдалитьДоброго дня, Вика! Мне тоже понравилась эта идея... хочу попробовать. Но как народ узнает куда надо нажимать, кнопочку плохо видно, а когда не знаешь, можно и внимание не обратить. )))
ОтветитьУдалитьЕлена , тут иконка кнопка в формате SVG. Ну не знаю как написать (пробовала словами развернуть, свернуть не красиво выходит и не понятно что предлагают. Может в гаждете установить а не в шапке и обозвать в названии, что - то типа нажмите для того - то.
ОтветитьУдалитьСпасибо за полезность, Вика! Пока такой необходимости у меня нет, но учту, что так тоже можно :)
ОтветитьУдалитьVictoria, Да, не такая уж это необходимость, но делают и такие плюшки на сайтах.
УдалитьНу вот так , Семён, оказывается в жизни всему можно научиться.
ОтветитьУдалить