Текст на сайте в невидимом блоке » Блог DINa

Невидимый блок или текст на сайте

14.12.2008
ReTweet

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

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

Проблемы: надо сразу бы учесть, что поисковые системы очень “неровно” дышат к таким ухищрениям по созданию невидимых ссылок и текстов. Сайт с такими “прибамбасами” вполне может вылеетть из поисковой системы.

Для простоты определимся, что у вас уже есть некоторая страница с кодом и стилями css. Решения.

1. Вывод текста или ссылки в цвет фона.

Есть некоторая область сайта выводимая некоторым цветом. Чтобы визуально текст или ссылка не выделялись на сайте цвет букв делаем в цвет фона - к примеру #d7722f.
Добавим следующее в страницу к странице сайта:

<div class="fon">
Покажу вам <a href="http://******.***"> обалденный сайт </a>
</div>

А в файл стилей допишем:

.fon{background:#d7722f;width:200px;height:50px;margin:0 auto;padding:15px 15px;color:#d7722f;font-family:verdana,arial;font-size:12px;}
.fon a, .fon a:hover{color:#d7722f;}

2.Вывод ссылки в одном пикселе.

Возьмите практически тот же пример выше, но зададим картинку для вывода размером в 1px. Сделать такую в фотошопе проблем не составит, да и часто они уже есть в некоторых темплатах.

Вставляем в нашу страницу

<a href="http://******.***">/bac/pixel.gif' border="0" alt="Обалденный сайт"&gt;</a>

3. Не выводить на страницу текст или ссылки.

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

заменим стили первого примера на:

.fon{display:none;background:#d7722f;width:200px;height:50px;margin:0 auto;padding:15px 15px;color:#d7722f;font-family:verdana,arial;font-size:12px;}
.fon a,.fon a:hover{color:#d7722f;}

4. Вывод текста или ссылки за пределы экрана.

Еще один прикол с выводом данных. Данные вроде бы как и выводятся, но за пределами экранной области, и пользователь их практически не видит на мониторе.

<div class="fon">
<a href="http://******.***" title="Обалденный сайт"> Обалденный сайт </a>
</div>

Стили:

.fon{background:#fff;width:200px;height:50px;margin:0 auto;padding:15px 15px;font-family:verdana,arial;font-size:12px;font-weight:700;}
.fon a{color:#000;}
.fon a:hover{color:#d7722f;}

В некоторой области выведена ссылка - “Обалденный сайт”. Все прекрасно.
А теперь добавим в стили text-indent, заменим наш стиль на:

.fon{background:#fff;width:200px;height:50px;margin:0 auto;padding:15px 15px;font-family:verdana,arial;font-size:12px;font-weight:700;}
.fon a{text-indent:-9999px;color:#000;}
.fon a:hover{color:#d7722f;}

И попробуйте найти ссылку на экране.

Для такого вывода текста и ссылки

<div class="fon">
Обалденный сайт <a href="http://******.***" title="Обалденный сайт"> Обалденный сайт </a> Обалденный сайт</div>

можно применить стили:

.fon{text-indent:-9999px;background:#fff;width:200px;height:50px;margin:0 auto;padding:15px 15px;font-family:verdana,arial;font-size:12px;font-weight:700;}
.fon a{text-indent:-9999px;color:#000;}
.fon a:hover{color:#d7722f;}

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

P.S. Заметьте, такие же приемы используют и “черные” друзья. Исходя из озвученных вы сможете более легко находить лишние дополнения, которые появляются после взломов ваших сайтов.

Отзывов 5 на “Невидимый блок или текст на сайте”
  1. 1От redbox 15 Дек 2008 | Ответить

    Думаю у этого способа больше минусов, чем реальных достоинств. Уж очень все шатко и ненадежно. Хотя, вполне возможно, что и для всего предложенного найдутся свои пользователи. Спасибо за интересную идею.

  2. 2От Инесса 19 Дек 2008 | Ответить

    Я использую простую подгонку текста под фон, это просто и надежно

  3. 3От brus 27 Дек 2008 | Ответить

    display:none - не видно не только текста но и самого квадратика

  4. 4От Герман 4 Янв 2009 | Ответить

    С Новым годом и наступающим Рождеством !

  5. 5От sandro 16 Янв 2009 | Ответить

    Ох, все же осторожным надо быть. Ну не любят ПС скрытый текст. Хотя, как использовать

Извините, но коментирование запрещено.

Коротко о сайте.

Блог meganfoxstar.ru поможет вам в Установке и настройке cms Vamshop, PHPProBid, Esyndicat, закрепит и расширит имеющиеся знания. Создание сайтов, продвижение сайтов, оптимизация информации. Теория и практика seo. CSS-верстка, веб-мастеринг, интернет-технологии, манимейкинги – все это и намного больше вы сможете найти на страницах нашего проекта!.

Основной        Дополнит         Twitter
RSS фид основной    RSS фид дополнительный    Всего Фолловеров блога
851
RSSПодписка на обновления по RSS

Обновления блога по почтеОбновления блога на почтовый ящик