17-03-2014, 18:32 Посмотрели: 17420 Добавил: Alex V

Как создать плавающий блок на css и jquery в сайдбаре?


В этом уроке я хочу показать вам как можно создать плавающий блок на сайте без плагинов, а с помощью стандартных функций CSS и Jquery. Уникальность этого метода заключается в том, что он идеально подходит для любой CMS и любого хостинга, особенно если вам нужен скользящий блок уже сейчас, а плагина или модуля под вашу CMS сейчас нет.

Что же такое плавающий блок?

Я уверен на 100% что вы его уже встречали на просторах интернета, но чтобы вы сразу вспомнили что это такое, посмотрите пример на нашем сайте по ссылке http://w9y.ru/example/cssjs/02sticky/ и попробуйте опуститься вниз страницы и обращайте внимание на сайдбар.

Посмотрели? Думаю понятно, что этот блок будет всегда на веду у вас и у ваших пользователей, а значит и CTR и эффективность у такого блока будет на порядок выше. Вы можете в этот блок разместить форму подписки, информацию о мероприятии, интересные материалы с сайта или же рекламу каких-то курсов, cpa, контекстную рекламу Яндекс.Директ. Обратите внимание код Google Adsense в такой блок вставлять запрещено правилами системы. А если хотите запретить копирование в этом блоке, почитайте статью защита текста от копирования и примните её на своем сайте.


Полезный совет! Чтобы вы ощутили эффект от плавающего блока на себе, советую записать результаты дохода/трафика/целевых действий до установки и посмотреть на результат после настройки блока. Результат вас приятно удивит.


И так приступаем к созданию плавающего блока в сайдбаре, я нашел два метода которые мне показались простыми и легкими в применении. Какой использовать именно вам, я не могу точно сказать, но думаю вы сами без проблем из двух вариантов выберите один подходящий, мало ли вдруг какой-то из вариантов работать не будет, а так из двух вариантов точно что-то заработает smile

Преднастройка

Первоначально нужно подключить библиотеку jquery, на многих CMS она подключена по-умолчанию, для того чтобы проверить подключена она у вас или нужно открыть свой сайт в браузере и нажать на CTRL + U или же правой кнопкой мыши нажмите в любом месте на сайте и выберите там "исходный код". Между тегами head найдите jquery, если такого у вас нет, то нужно его добавить через шаблон.

Как создать плавающий блок на css и jquery в сайдбаре?


Если не нашли, то вставляем между тегами head эту строчку:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>


Для каждой CMS это разный файл, все зависит от вашего шаблона, если не знаете куда подключать, пишите сайт в комментариях и CMS сайта, я постараюсь помочь вам. Хотя поиск в яндексе или в Google легко даст на этот вопрос нужный ответ, но все же если и там не найдите, пишите мне в комментариях.

Если вы все сделали правильно, проверьте через исходный код есть ли в шаблоне строка с текстом "jquery", если есть, то вы все сделали правильно и мы можем идти дальше.

Плавающий блок на css и jquery, метод #1

Теперь в нужном месте в сайдабре вставляем следующий код:

<script>
$(window).scroll(function() {
if ($(this).scrollTop()>1910) $('#scrollable').css({'position':'fixed','top':'0px'});
else $('#scrollable').css({'top':'568px','position':'static'});
});
</script>

<div id='scrollable' style="width:250px";>

Ваш код вставляйте тут. 

</div>


Где надпись "Ваш код вставляйте тут." вставляем свой код рекламы, формы подписки или другого нужного контента. После этого можете проверить скрипт плавающего блока на сайте, если все сделали правильно, то должен получиться такой результат:

Демо просмотр первого метода http://w9y.ru/example/cssjs/01sticky/


Стили, размер div и другие настройки можете прописать сами с помощью CSS.

Плавающий блок на css и jquery, метод #2

Второй метод практически идентичный первому, правда он более умный и здесь не нужно указывать высоту, но код немного больше. Хотя результат работы у них одинаковый практически.

Установка у него такая же как и у первого метода, код нужно вставить в Сайдбар:

<script language="javascript">
$(document).ready(function(){
var floatsidebar = $("#float-sidebar");
var offset = floatsidebar.offset();
var left = offset.left;
var top = offset.top;
var width = $("#float-sidebar").width();
var height = $("#float-sidebar").height();
 
$(window).scroll(function(){
var scrollTop = $(window).scrollTop();
if (scrollTop >= top) {
$('#float-sidebar').css({
left:left+'px',
position:'fixed',
top:"0px",
width:width+"px"
});
} else {
 
$('#float-sidebar').css({
position:'static',
});
}
});
});
</script>



А этот код можно вставить ниже, но при этом вставить в него свою информацию.

<div id="float-sidebar"> Тут код вашего рекламного блока или любое другое содержимое </div>


Настройки CSS так же можете вписать свои, сделать отступ, указать размеры и т.д. Посмотреть пример можно тут:

Демо просмотр второго метода http://w9y.ru/example/cssjs/02sticky/


Мини-хак плавающего блока для DLE любой версии

На одном из сайтов на DLE я тестировал разные блоки рекламы в сайдбаре и мне было не совсем удобно каждый раз заходить в исходный код, дабы поменять баннер с одного на другой. И я вспомнил про стандартный модуль DLE "Рекламные материалы", на него можно зайти по адресу "http://www.site.ru/admin.php?mod=banners", где нам нужно в самом низу нажамать на кнопку "Создать баннер" или сразу перейти по такому адресу:

www.site.ru/admin.php?mod=banners&action=add


В названии баннерного поля пишем "sidebar", пример:

Как создать плавающий блок на css и jquery в сайдбаре?


Вставляем нужный рекламный код или код рассылки например в поле "код баннера".

В шаблоне в зависимости от варианта плавающего блока (обратите внимание на ID блока DIV) ставим код в сайдбар:

<div id="float-sidebar">

[banner_sidebar]{banner_sidebar}[/banner_sidebar]

</div>


И теперь мы можем управлять содержимым этого блока с помощью модуля "Рекламные материалы" в DLE и не нужно будет каждый раз заходить в код шаблона, чтобы поменять баннер fellow

И помните данный плавающий блок работает на DLE, Wordpress, Joomla, Drupal, LiveStreet, UCOZ и на любом другом ;) Пишите комментарии, как у вас работает он и на сколько выросли показатели конверсии.

Сравнить методы:


Рубрика записи: CSS примеры

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

Информация

Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.

Юзер панель
Я тебя не знаю!
Зарегистрируйся, либо

войди под своим логином!

Fuck, я забыл свой пароль!

Восстановить данные =0
Новое на сайте
Известная социальная сеть Instagram приступила к тестированию новой...
Недавно, в приложения для Android и iOS социальной сети Twitter была...
Недавно, в Google "Мой бизнес" разработчики добавили новейший способ, как...
Недавно стало известно о том, что соцсеть Facebook по упоминанию в русских...
Недавно, представитель корпорации Google, Джон Мюллер (John Mueller)...
Голосуем

Ваша любимая CMS?


DataLife Engine
WordPress
Joomla
Drupal
LiveStreet
UCOZ
Самопис
Php+Includ
Статика