Как отобразить сообщение во весь экран.

как сделать сообщение в полный экранВсем доброго времени суток. Предлагаю вам сегодня небольшую фишку, как в Блоггере сделать так, чтобы содержимое всего сообщения открывалось во весь экран. Точнее будет сказать, что при нажатии на кнопку читатель увидит только текст поста. Без отображения сайдбара и других элементов, которые заполняют экран.
Сразу предлагаю перейти по этой ссылке и посмотреть о чём идёт речь. Считаю, что в некоторых случаях это достаточно удобно. Особенно когда шрифт текста слишком мелкий. И для людей с плохим зрением, просто отличный вариант. В самом коде можно поменять размер шрифта и цвет страницы. Это опять же, для таких как я, которые не любят читать светлый текст на чёрном фоне, очень удобно. Да и с реализацией такого трюка особых хлопот нет.

Заходим в админку блога-ВКЛАДКА ШАБЛОН - ИЗМЕНИТЬ HTML. С помощью клавиш Ctrl+F (читаем в этом сообщении) находим закрывающийся тег </body> и над ним устанавливаем код, приведённый ниже.


Или будет даже лучше установить после такого участка кода в шаблоне.
<b:section class='main' id='main' showaddelement='no'>
  <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'> … </b:section>
</b:section>
<!-- Здесь весь код-->


Код.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <script src='http://dte-project.googlecode.com/svn/trunk/full-screen.min.js'/>
  <script>
  //<![CDATA[
  postFullScreen({
    titleSource: document.querySelector('.post-title'),
    contentSource: document.querySelector('.post-body'),
    background: "#fff",
    color: "inherit",
    fontSize: "120%",
    padding: 50,
    maxWidth: 750,
    openText: "Смотреть в полный экран",
    closeText: "Вернуться в обычный режим",
    appendButtonTo: null,
    beforeInit: null,
    afterInit: null
  });
  //]]>
  </script>
</b:if>
background: "#fff",-цвет фона страницы в полном экране.
 fontSize: "120%",-размер шрифта.
padding: 50,-отступ слева.
maxWidth: 750, - максимальная ширина страницы.
И текст на кнопке, который я отметила синим цветом.


Информацию подглядела на блоге http://www.dte.web.id. 
Здесь 2 варианта версии блога для слабовидящих.

Вот такой сегодня пост. Спасибо всем за внимание и до встречи.

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

Введите Ваш email


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

  1. О, прикольная штука! Думаю, для больших статей прекрасно подойдет

    ОтветитьУдалить
  2. Мне тоже задумка очень понравилась, я бы еще добавила дизайн для кнопки, думаю, не всем подойдет такой шрифт, хочется посмотреть, что у меня получиться, где появиться кнопка, я, пожалуй, попробую.

    ОтветитьУдалить
  3. Не получилось, мозгов не хватила, вставляла весь код над закрывающимся "боди", пробовала по второму варианту: у тебя на скриншоте видно, что вставлено после строчки , а выше написано, что надо вставлять после участка в коде, этот участок у себя не смогла найти.
    Короче, не разобралась.

    ОтветитьУдалить
    Ответы
    1. Есть этот участок кода но видимо ты не раскрыла весь код. Надо нажать на чёрненькие стрелочки слева.

      Удалить
    2. Возможно, может когда-нибудь еще раз попробую разобраться.

      Удалить
    3. Да особо не надо ими увлекаться. Это уж так как фишка. На некоторых сайтах такое видела.

      Удалить
  4. Интересная фишка. Но с точки зрения логики кнопка должна быть в начале статьи, а не в конце. Чтобы человек сразу нажал и удобно читал. А не проматывал в самый низ и не искал там кнопку. Тем более, если это не постоянный читатель, то он и не догадается, что в конце есть такая кнопка.

    ОтветитьУдалить
    Ответы
    1. Можно и вверху сделать. Мысль есть, на досуге продумаю.

      Удалить

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