Невидимый блок или текст на сайте
14.12.2008
Видит око, да зуб неймет. А тут даже и увидеть не дают.
Для начала определимся с некоторыми моментами.
Зачем это нужно: скрыть ссылку от визуального наблюдения, не портить общий дизайн сайта.
Проблемы: надо сразу бы учесть, что поисковые системы очень “неровно” дышат к таким ухищрениям по созданию невидимых ссылок и текстов. Сайт с такими “прибамбасами” вполне может вылеетть из поисковой системы.
Для простоты определимся, что у вас уже есть некоторая страница с кодом и стилями 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="Обалденный сайт"></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. Заметьте, такие же приемы используют и “черные” друзья. Исходя из озвученных вы сможете более легко находить лишние дополнения, которые появляются после взломов ваших сайтов.
Извините, но коментирование запрещено.