Доброго времени суток, друзья. Вы видели на некоторых сайтах, когда при прокрутке страницы вниз, появляется вдруг блок с какой - то информацией. Это может быть баннер, картинка или просто объявление или пожелание. Любая информация.
В Блоггере такой вариант появления блога в сайдбаре очень легко реализовать. Для примера я взяла просто картинку, когда при скроллинге страницы она появляется в нужном месте. Если прокрутка опять идёт в верх, блок исчезает. Сразу посмотрите на тестовом блоге сам пример в сайдбаре (прокрутите страницу)
Нам понадобится совсем не большой код.
В строках, отмеченных розовым цветом, адрес картинки. В этом месте, как я уже писала выше, можно установить всё что угодно.
Так же расстояние появления блока 1600 меняйте на нужное вам.
Сегодня всё. До встречи.

В Блоггере такой вариант появления блога в сайдбаре очень легко реализовать. Для примера я взяла просто картинку, когда при скроллинге страницы она появляется в нужном месте. Если прокрутка опять идёт в верх, блок исчезает. Сразу посмотрите на тестовом блоге сам пример в сайдбаре (прокрутите страницу)
Нам понадобится совсем не большой код.
<style type="text/css">
body { min-height: 1500px; }
#blfix{
display:none;
position:fixed;
top:0;
width: 50%;
padding: 20px;
}
</style>
<div id="blfix"><img alt="" height="200" src="https://avatars.mds.yandex.net/get-pdb/901820/7909be1b-5b7d-4bfa-800c-19853f1c0781/s1200" width="200" /> </div>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
jQuery(function(f){
var element = f('#blfix');
f(window).scroll(function(){
element['fade'+ (f(this).scrollTop() > 1600 ? 'In': 'Out')](800);
});
});
</script>
body { min-height: 1500px; }
#blfix{
display:none;
position:fixed;
top:0;
width: 50%;
padding: 20px;
}
</style>
<div id="blfix"><img alt="" height="200" src="https://avatars.mds.yandex.net/get-pdb/901820/7909be1b-5b7d-4bfa-800c-19853f1c0781/s1200" width="200" /> </div>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
jQuery(function(f){
var element = f('#blfix');
f(window).scroll(function(){
element['fade'+ (f(this).scrollTop() > 1600 ? 'In': 'Out')](800);
});
});
</script>
В строках, отмеченных розовым цветом, адрес картинки. В этом месте, как я уже писала выше, можно установить всё что угодно.
Так же расстояние появления блока 1600 меняйте на нужное вам.
Сегодня всё. До встречи.
здесь можно оформить подписку на новые шпаргалки
Отличная полезность! Даже рекламу можно установить?
ОтветитьУдалитьВиктория, самое то для рекламных баннеров.
УдалитьВроде бы я достаточно подробно разобрался с новым интерфейсом, тем более, что старый обещают отключить к 1 сентября. В остальном - без особых изменений.
ОтветитьУдалитьСемён, доработать бы им окончательно новый , всё равно косяки есть.
ОтветитьУдалитьЭто точно! Причем они, заразы, постоянно какие-то мелочи переформатируют, пока додуешь. Перенесли плюсик справа налево, со шрифтами чего-й то начудили. А главное, лучше от этого не становится. Но зато можно отчитаться: коллефтив напряженно работает, пожальте премию!
УдалитьСемён, да за эти новшества кто - то действительно гребёт премиальные. Со шрифтами посмотрите в комментарии 10.а Александру ответила в этой статье http://www.shpargalochki.ru/2020/07/i-opyat-igry-s-novym-redaktorom.html
ОтветитьУдалитьклассная штука, вот бы ещё сделать картинку кликабельной , и есть ли возможность сдвигать её вправа -влево?
ОтветитьУдалитьINTERINVEST, А что мешает сделать кликабельной. Элементарно. То что выделено розовым пишем
ОтветитьУдалить<a href="адрес страницы куда должна вести ссылка" target=_blank><img src="адрес изображения " ></a>
Со сдвигам вправо, влево играемся со значениями
position:fixed;
top:0;
width: 50%;
padding: 20px;
http://htmlbook.ru/css/position
Спасибо. Чёт я не допёр)
УдалитьБывает. Пожалуйста.
ОтветитьУдалить