
В статье заметки на полях был предложен подобный вариант. Так же, используя стили CSS с лёгкостью зафиксируем блок в нужном нам месте. Посмотрите на тестовом блоге картинку вверху слева и выдвигающуюся боковую панельку, при нажатии на которую появляется гаджет Google+ Followers.
Код для картинки.
<style>
#panel {
position: fixed;
top: 80px; /* расстояние от верхнего края*/
left: 0;
} </style>
<div id="panel"><img src=" адрес изображения " /> </div>
#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>
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 в любом месте макета блога. Так что, для начинающих блогеров создать такое не составит особого труда.
Сегодня у меня всё. Спасибо что читаете мои шпаргалки и до встречи.
здесь можно оформить подписку на новые шпаргалки
0 коммент.:
ВСЕГДА РАДА УСЛЫШАТЬ ВАШЕ МНЕНИЕ!
Ели у вас возникла необходимость опубликовать код в комментарии, то воспользуйтесь encoder HTML