facebook twitter youtube
in Хостинг от WordPress - 05 Апр, 2013
by - 4 comments
Плавающий SideBar для WordPress

Плавающий SideBar для WordPress

 

Я сегодня уже написал одну статью о Pop-Up подписки для WordPress и вот именно по этому и не здороваюсь с вами. После того как я попробовал Pop-Up плагин и поставил на свой сайт я совершенно случайно бродя в просторах нашего интернета наткнулся на один сайт где о компьютерной технике и о хитростях связанный с ПК-ом. В этом сайте я заметил что рекламный блог Google AdSense который находится в сайдбаре бежит за мной когда я прокачиваю вниз по странице, этот трюк мне очень понравился и я не долго думая написал Админу сайта с просьбой поделится со мной способом получение такого плавающего блока. И Админ с любезностью предоставил мне код с помощью которого собственно и получается такое очаровательное чудо. Его блог тоже с движком WordPress так что на WordPress-е скрипт работает 100 %, а на других CMS не пробовал, можете сами пробовать и о результатах написать в комментариях. Самый простой пример вы сможете увидит прямо в этом сайте, обратите внимание на рекламу от Google AdSense в левом сайдбаре в самом внизу. Именно в этом странице вы вряд ли увидите но если вы пройдете скажем в Карту сайта где страница не много длинноватая то сразу все увидите.

С помощью скрипта можно разместит не только рекламу ну и все что захотите.

Инструкции для WordPress

 Заходим в панель Виджетов, в самом низу сайдбара добавляем блок "Текст Произвольный текст или HTML-код" и внутри него встовляем следующий код

<script>/*<![CDATA[*/jQuery(function(){var offset=jQuery("#center-diva.slide").offset();var topPadding=25;var heigthFooter=110;var down;jQuery(document).scroll(function(){down=jQuery(document).height()-jQuery(document).scrollTop();if(jQuery(document).scrollTop()>offset.top&&down>heigthFooter){jQuery("#center-diva.slide").stop().animate({marginTop:jQuery(document).scrollTop()-offset.top+topPadding});}else if(down<=heigthFooter){jQuery("#center-diva.slide").stop().animate({marginTop:jQuery(document).scrollTop()-offset.top+topPadding-(heigthFooter-down)});}else{jQuery("#center-diva.slide").stop().animate({marginTop:0});}});});/*]]>*/</script><div id="center-diva" class="slide">
Здесь вставляем ваш HTML код
</div>

Всегда уважал конкурентов, один из моих серьезных конкурентов это Блог о создании и монетизации сайтов который на сегодняшний отстает от меня по пузомеркам (тИЦ, PR) и посещаемостью но по числу статей он опережает меня.

Добавить комментарий

  • pavel //15 Апр 2013

    класная штука :cool: только не могу до конца настроить чтоб не залезал на др блоки при прокрутке вверх, это где прописывается?

  • Admin //15 Апр 2013

    Я посмотрел, у тебя все нормально, не кто не на кого не залезает.

  • pavel //15 Апр 2013

    На некоторых страницах при прокрутке в 2-2,5 колесика когда половина виджета популярное видно а половину уже нет, плавающее окно залазит на вверхний виджет (надо тихонько снизу мотать вверх и увидишь :wink: )

  • Admin //15 Апр 2013

    Не знаю, может у нас разные размеры мониторов но у меня все нормально.
    Только на коротких страницах он залезает на раздел «Новые» и сразу же катится вниз, по моему это даже к лучшему по тому что на коротких страницах и так не виден плавающий эфект, а так он привлекает внимание.

 ВверхВверх