]]> ]]>

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

От wolf | 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;}

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

Подписка без комментария.

Отзывов 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 | Ответить

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

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

О сайте

Наше направление - помощь новичкам в интернет, тем кто решил создать свой сайт и даже может быть уже сделал свой первый шаг в сети. Поговорим обо всем понемногу, о создании сайтов, продвижении сайтов, оптимизации информации. Поговорим о установке и настройке Esyndicat, Vamshop, PHP Pro Bid и др.     »» Далее

Найти :