Борислав Ravvinoff (ravvinoff) wrote,
Борислав Ravvinoff
ravvinoff

Секреты ЖЖ. Плавающие элементы в ЖЖ.

Регулярно получаю вопрос как я приляпал дроида в уголок журнала. Пришло время делиться секретом☺
Все безумно просто! Заходим на главную страницу и оттуда идем с стиль журнала, можно и по другому пути, главное перейти в настройки стиля журнала.

И топаем в настройки стиля журнала (правый верхний угол)

Теперь слева в панельке ищем custom css - здесь и будем настраивать поплавочек. Если в "ваш css" есть что-либо, то не портим стиль, а в самый низ текста добавим новый.
Что же мы туда добавим?

.adbot - это название (идентификатор) нашего поплавка.
А в фигурных скобках самое интересное - где будет расположен поплавок и как будет себя вести на странице.
position: fixed - значит поплавок будет выведен на страницу и зафиксирован, то есть при скроле страницы он будет неподвижен
bottom: 25px - отступить снизу 25 пикселей, потому как там LJTimes болтается
left: 5px - отступить от левого края 5 пикселей, для красоты☺
Итак поплавок настроен, теперь его надо вывести на страницу. Для этого идем чуть выше на этой же странице, не забыв сохранить наш поплавок, в sidebar.

Здесь также, если что-то есть пишем ниже, добавляя текст.

<div class="adbot"> ... </div> - начало и конец вывода поплавка, внутри этой конструкции (вместо ...) пишем то что хотим вывести в поплавке.
В моем случае это ссылка на Google Market <a href="https://play.google.com/store/apps/details?id=com.ravvinoff.borislav.lj&hl=ru" target="_blank">
и картинка с портретом дроида <img src="https://dl.dropboxusercontent.com/s/3cmacw0ax1teyt0/div.png">
Портрет в формате png с прозрачным слоем для красоты.

Пять минут и поплавок на странице - ничего сложного!
Поделись секретом с друзьями☺
Tags: своими руками, среда ЖЖ
Subscribe
  • Post a new comment

    Error

    default userpic

    Your reply will be screened

    Your IP address will be recorded 

    When you submit the form an invisible reCAPTCHA check will be performed.
    You must follow the Privacy Policy and Google Terms of use.
  • 96 comments
Previous
← Ctrl ← Alt
Next
Ctrl → Alt →
Previous
← Ctrl ← Alt
Next
Ctrl → Alt →