Поступил вопрос от одного из подписчиков: «Как создать фиксированную кнопку на сайте, похожую на эту?»
Чтобы эта кнопка, не зависимо от того места страницы, которое просматривает пользователь, всегда оставалась на одном и том же месте и прокручивалась вместе с окном браузера.
Чаще всего такие кнопки прикрепляют к одной из стенок (правой или левой) сайта.
Давайте сейчас рассмотрим тот код, который нужно добавить на свои веб-страницы, чтобы эта кнопка появилась и начала работать.
Вот тот код, который нужно разместить на свою веб-страницу:
<div id=’follow’>
<a href=’http://twitter.com/dimachen’ target=’_blank’>
<img src=’http://www.dimachen.info/images/twitter.gif’ border=0 width=38 height=166 alt=’Следи за мной на Twitter’ title=’Следи за мной на Twitter’ /></a>
</div>
Я разместил его перед закрывающим тэгом </body>. Если вы используете шаблон wordpress, то это можно сделать в файле footer.php вашей темы.
Что собой представляет этот код?
По сути, мы просто создали блок div с идентификатором follow. Содержанием этого блока является та самая картинка-ссылка, которую мы и хотим сделать фиксированной.
Все. По HTML части мы закончили.
Теперь остается только с помощью средств CSS, сделать этот блок фиксированным.
Вот тот код, который для этого необходим.
#follow {
margin: 0px;
background: e6eeee;
z-index: 2;
position: fixed;
top: 300px;
left: 0px;
width: 38px;
height: 166px;
}
Его нужно добавить в файл стилей, который у вас используется. Например, style.css.
z-index: 2 – необходим для того, чтобы на небольших мониторах кнопка располагалась поверх основного текста.
Основной эффект достигается за счет применения свойства position: fixed, которое делает блок фиксированным и заданием точного местоположения блока (top: 300px; left: 0px;) и его размеров (width: 38px; height: 166px;).
Вот и все. Как видите, используется минимальное количество кода.
