ДОСТИГНУТО:

01.11.2016-300 страниц в индексе Google;
19.01.2017-300 страниц в индексе Яндекса;
03.02.2017-40 ТИЦ;
05.02.2017- сайт принят в DMOZ каталог;

Блок с прокруткой на странице сайта

.

prokrutkaВсем привет!

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

А начнем мы с блока прокрутки на любой странице сайта.

Блок с прокруткой на странице сайта:

Иногда на своем сайте приходится публиковать какие-то коды, или длинные записи, например, в одну строку. Возникает вопрос, как это реализовать на практике. Так вот, предлагаемый метод: блок с прокруткой на странице сайта сможет сделать человек, который и представления не имеет, что такое языки HTML и CSS.

Ничего кодировать не нужно

Я уже подготовил нужный отрывок кода, который просто нужно скопировать и вставить на страницу сайта в нужное место и, естественно, добавить нужный контент в код.

Код адаптивный, без переноса строк.

Демонстрация блока с прокруткой с текстом:

Текст вставляется здесь:
Здесь я пишу всякую ерунду, чтобы поисковые
системы не посчитали этот отрывок текста за дубляж контента.
А вы ставьте сюда что хотите, можно поставить картинки, и прочие элементы страницы вашего сайта.
Можно добавлять пробелы в данный блок для наглядности я это и демонстрирую.
Здесь я опять пишу всякую ерунду, чтобы поисковые
системы не посчитали этот отрывок текста за дубляж контента. А вы ставьте сюда что хотите,
можно поставить картинки, и прочие элементы страницы вашего сайта.

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

Что нужно для реализации блока с прокруткой

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

Код блока с прокрутками

Этот код нужно просто скопировать.

Пояснения по коду:
height:200px — Высота блока, заданная в пикселах, меняйте высоту на нужную;
width:100% — Ширина на весь контейнер, растянут на всю ширину страницы, при изменении ширины страницы, блок подстраивается под нее;
border:1px solid #eeeeee — Сплошная обводка блока для визуализации границ, светло-серого цвета;
overflow:auto — Полосы прокрутки появляются только при необходимости;
word-wrap:normal — Задаем перенос строк, а точнее, наоборот, строки не переносятся, либо переносятся принудительно. Это свойство, совместно с overflow и white-space и задает нужные параметры отображения блока с прокруткой;
white-space:pre — Текст показывается с учетом всех пробелов и переносов и если не вмещается по ширине и высоте, то добавляются полосы прокрутки;
padding:10px 15px — Внутренние отступы. 10px — сверху и снизу, 15px — слева и справа;
margin:20px 0px — Внешние отступы. 20px — сверху и снизу, 0px — слева и справа;
Найдите справочник CSS в интернете и меняйте стили блока с прокруткой под дизайн своего сайта.

Теперь остается добавить код прокрутки в notepad++, кстати, кто еще не установил его себе на компьютер, то советую установить. Как раз для редактирования небольших кодов подойдет. Ну или можно открыть этот файл любым текстовым редактором, какой есть у вас в наличии и заменить надпись «Текст вставляется здесь» на любую свою запись, или код, требующий неразрывной строки. Эта прокрутка работает как вертикально, так и горизонтально.

Далее копируем и вставляем уже в редакторе своего сайта в статью (имеется ввиду текстовый редактор который используется когда вы публикуете запись или страницу), где угодно. Смотрим как получилось, регулируем размеры блока прокрутки, если надо. Вставлять прокрутку нужно в текстовом, html режиме редактирования. Должно получиться как у меня в демо примере.

Ну как вам? Все довольно легко и просто! Не забывайте делится статьей с одномышленниками в соц. сетях. Задавайте вопросы, делитесь своими мыслями на этот счет. До скорых встреч!

БЕРЕГИТЕ СЕБЯ!




лайк

Эти красотки хотят чтобы ты их жестко лайкнул и даже несколько раз твитнул!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *