Уголок наверху страницы при помощи CSS

css ygolok
В предыдущей заметке "Эффект загнутого уголка при помощи CSS" (в комменатариях) Дамир, автор блога Damir-tote.ru (кстати, вот его интересный конкурс) спрашивал, как сделать кликабельный зафиксированный уголок-картинку в самом верхнем углу сайта, "наподобие как у Александра Борисова".

Ну вообще создать такой средствами CSS не сложно: картинку надо отпозииционировать и закрепить (fixed) в нужной области.
Уголок я нашёл на сайте isif-life.ru, и как обычно бывает, благополучно, чисто из-за лени рисовать что-то своё, спёр.

blog aleksandra borisova

Демо смотрите в правом верхнем углу.

В общем, стили для него:
<style>
a#ribbon { 
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgD927kNcergy6YwErMMXkdQRI1eFQWM4O47bGGOwlH6g2kzFYYDInab7YOUIHTD952FlXWVxxasCZms5XMErJxXHFg9-kB8IP-whPrSG4AwUEL_G1VuBhdlSTtDWrB2fLpKFmNNA5VzNzf/s1600/interesno.png") no-repeat transparent;
display: block;
height: 156px;
position: fixed;
right: 0px;
text-indent: -999px;
top: 0px;
width: 183px;
 }
</style>
Картинка переложена на хостинг Пикасы. Можно изменить на свою, только не забудьте изменить размер.

И код для body:
<a id="ribbon" title="Интересное на Blogger не для чайников" href="http://blogger.omg-linux.ru/search/label/js"/></a>


зы: Надеюсь, Александр не очень расстроится и не перестанет в связи с этим нас радовать новыми инфопродуктами =). Все ссылки я указал, если что, известно кого пинать))).

9 комментариев:

  1. В смысле меня пинать :D Спасибо, что обучил =) возможно использую скоро на своем блоге))

    ОтветитьУдалить
  2. Очень любопытный ход) С одной стороны ненавязчиво, с другой - создает интригу, хочешь-не хочешь, зайдёшь из любопытства узнать, что же там "Интересно".

    ОтветитьУдалить
  3. Ага, сеошное засранство: лишь пользователя водить по страницам. Можно на каждой сделать разноцветные уголки и уводящие ссылки на разные части блога. Идеально для сео :-).

    ОтветитьУдалить
  4. Лень - двигатель прогресса, молодец

    ОтветитьУдалить
  5. @aldous
    Да... можно засирать так каждую страницу и везде яркие кнопки ставить, но ты же от этого временный эффект получаешь. В чем здесь SEO? Это тоже самое, раньшелюди охотно нажимали на контекстную рекламу, а сейчас знают, что ни чего путного в этих блоках нет.

    ОтветитьУдалить
  6. Почему временный? Хорошая навигация обеспечивает каждый день гуляние user-агентов по разделам блога.
    А Яндекс Метрика ведь всё видит и стучит "большому" брату. Отсюда мы получаем плюс в индексации: увеличивается глубина.

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

    ОтветитьУдалить
  7. Скажите пожалуйста? а куда нужно добавить код для body в вордпрессе? в какой файл(в шапку, в подвал)заранее благодарю!!!!

    ОтветитьУдалить
  8. Честно говоря, не помню. А разве нет специального html виджета для этих целей? Или я путаю с Joomla.

    ОтветитьУдалить