Фиксированная картинка и скрытая панель в блоге

Всем, доброго времени суток. Как сделать в блоге фиксированную картинку, расположенную слева от текста или выдвигающуюся панельку. Они будут всегда на виду и ни как не помешают пользователю при чтении сообщения. Если, расположенная таким образом картинка, будет просто элементом дизайна, то плавающий блок, который будет скользить при прокрутке страницы и где будет установлен  любой баннер, кнопки соц.сетей или что-то другое (что пожелаете) - обязательно привлечёт внимание читателей.

В статье заметки на полях был предложен подобный вариант. Так же, используя стили CSS с лёгкостью зафиксируем блок в нужном нам месте. Посмотрите на тестовом блоге картинку вверху слева и выдвигающуюся боковую панельку, при нажатии на которую появляется гаджет Google+ Followers.

Код для картинки.

<style>
 #panel {
 position: fixed;
 top: 80px;    /* расстояние от верхнего края*/
 left: 0;
 }  </style>

<div id="panel"><img src=" адрес изображения " /> </div>

Картинки вставляйте любого формата - png, gif и jpeg. Какую пожелаете. Расположить сам блок с картинкой можно в любом месте блога - по центру, справа, выше, ниже, соответственно меняя значения

top: 80px;
 left: 0;


Код выдвижного блока. Принцип тот же, только добавим ещё стили для корректного отображения на странице.

<style>#panel 1 {
  position: fixed;
  top: 260px; /* расстояние от верхнего края*/
  left: 0;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
#panel 1_inner {
  position: fixed;
  top: 260px;     /* расстояние от верхнего края*/
  left: -260px;    /* величина настраиваемая*/
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
#panel 1:hover {
  left: 210px;
}
#panel 1:hover #panel 1_inner {
  left: 0;
}</style>

<div id="panel 1 ">
  <img src="адрес картинки" alt="я в гугл+" />
  <div id="panel 1_inner">
 Здесь вставляйте хоть что - код кнопки, баннера, формы связи, подписки и так далее
  </div>
</div>

Меняйте значения  top:расположение относительно верха. left:- так же подбирается индивидуально. Я отметила пояснительным текстом в коде. Каждый из кодов устанавливается в гаджет HTML/JavaScript в любом месте макета блога. Так что, для начинающих блогеров создать такое не составит особого труда.

Сегодня у меня всё. Спасибо что читаете мои шпаргалки и до встречи.

здесь можно оформить подписку на новые шпаргалки

Введите Ваш email