Со времен царя Гороха в Опере присутствовали средства оптимизации интернет-контента в виде пользовательских каскадных стилей (User CSS). Вещь просто обезбашенная, способная творить чудеса с любым сайтом в Интернете. С помощью стилей можно не только видоизменять наполнение сайта со стороны пользователя, но и вовсе вырезать целые части страниц. Например, вам нужно навсегда убрать часть сайта (рекламный блок, целый футер, баннер т.д.) стоит всего лишь нажать пару кнопок и запустить необходимый стиль отображения через меню Оперы. В итоге вы получите удивительный результат: блок будет удален, часть сайта будет изменена и т.д. И таких стилей можно сделать как один для всех, так и для каждого сайта в отдельности.

Но как такое можно осуществить? Как заставить браузер показывать именно то, что хотите вы на данный момент, а не то, что захотел создатель интернет ресурса. И все это делать легко и без особых проблем? Об этой «тайне» мы и поговорим.

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

Думаю, что интернет-пользователям эта тема будет весьма интересна. Если да, то приступим!

Для того, что бы что-либо удалить из содержания нам потребуется два специальных инструмента в виде блокнота NotePad++ и встроенного средства разработки и отладки браузера Опера — Dragonfly. Пока что описанное касается только Оперы, хотя и в других браузерах не исключено практичное использование ниже описанного метода.

Для начала необходимо определится с тем, какой именно сайт мы будем редактировать. Я для примера взял сайт — filmix.net. Сайт для просмотра фильмов в онлайн. Его то мы и будем оптимизировать под свои нужды.

Во-первых вам необходимо знать, что каждый сайт состоит из специальной html-разметки, которая служит как бы скелетом. С помощью разметки дизайнер, а точнее кодер указывает браузеру что и где должно находится на странице. В каком месте должно быть поле поиска, рекламный баннер, видео-вставка, надпись, картинки и прочее. Используя специальные теги он явно указывает месторасположение главных частей сайта. Как правило у образованных кодеров эти теги имеют вид <div></div>. Каждый такой «див» имеет ряд характеристик, например уникальный идентификатор (id) или класс (class). Для более наглядного примера кликните правой кнопкой мыши на странице сайта и выберите пункт «Исходный код». Открывшаяся страница покажет из чего же именно состоит макет выбранного сайта.

Вдоволь насмотревшись, вы можете закрыть исходный код — он нам не нужен сейчас. Теперь на нашей странице кликом правой кнопки мыши откройте пункт меню «Проинспектировать элемент». Этим вы заставите браузер открыть средство отладки Dragonfly. Окно браузера разделится на две части:  в верхней — страница, в нижней — её код.

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

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

Для того, что бы избавиться на странице от этого участка кода нам необходимо точно указать браузеру, что именно ему надо вырезать. В нашем случае тег div с идентификатором «bn_Z6JIZ62SOS».

В пользовательской папке браузера Opera C:\Documents and Settings\Yarunya\Application Data\Opera\Opera\styles\user  хранятся те самые стили, с помощью которых можно изменять наполнение сайта на стороне пользователя. Для демонстрации работы стилей вы можете воспользоваться меню «Вид» — «Стиль», а далее выбрать какой-либо из доступных и посмотреть на результат его работы.

Теперь, собственно, приступим к созданию специального стиля, который будет вырезать указанные в нем теги из интернет-страницы. В блокноте Notepad++ создайте пустой документ CSS и присвойте ему имя Filmix. Каждый стиль должен иметь в своем имени название редактируемого сайта. Так легче потом будет распознать какой именно стиль редактирует тот или иной сайт. В файле напишите:

@charset «utf-8»;
/* Name: Filmix*/
/* Удаляем ненужные блоки со страницы сайта Filmix.net*/

Первая строка указывается на кодировку самого файла CSS, следующая строка в закомментированном виде хранит в себе имя пункта в меню Оперы. У нас он будет таким: «Вид» — «Стиль» — «Filmix». Следующая строка содержит описание стиля, которое может быть каким угодно. Все эти строки должны быть закомментированы!

Так как в нашем примере мы будем вырезать блок информации заключенный в тег div с идентификатором id, то в стиле мы будем работать именно с ним.

После выше написанного добавьте этот текст:

/*Удаляем центральный блок*/
[id*='bn_Z6JIZ62SOS']
{
display: none !important;
}

После этих строк ничего не надо добавлять. Просто сохраните документ и поместите его в папку с вашими стилями — C:\Documents and Settings\Имя_пользователя\Application Data\Opera\Opera\styles\user, где Имя_пользователя — это имя пользователя под каким вы работаете за ПК в Windows.

Перезапуск браузера задействует новый стиль и отобразит его в меню программы. Вам нужно просто зайти на сайт Filmix.net и выбрать нужный стиль в меню, а далее увидите результат его работы — блок рекламы автоматически удалиться.

Таким образом можно удалять не только рекламу в блоках, но и обычные ссылки, рисунки, таблицы или какие-то другие части страницы в автоматическом режиме. Только вместо слова id надо написать либо class, либо src или другой тег, который требует удаления.

Но стоит помнить и о другом аспекте: наш стиль будет вырезать информацию не только на подопытном сайте, но и на других, в которых будет такой же тег div  с таким же идентификатором «bn_Z6JIZ62SOS». Помните это! Но ведь можно снова выключить стиль через меню, скажите вы и будете правы...

Если вы хотите научится делать более сложные стили, ищите примеры на таких сайтах как http://userscripts.org или ему подобных. Там выложено уйма примеров. Стоит лишь только поискать. Впрочем если будут вопросы — задавайте. Будем делать интернет чище!

З.Ы. В качестве подопытного сайта можете взять и мой блог. В каждой статье при целом просмотре имеется рекламный блок, который тоже можно поковырять. Мне не жалко.

• Синхронизация закладок в Opera (0)
• Как создать собственный поиск? (0)