| ← Февраль 2015 → | ||||||
|
1
|
||||||
|---|---|---|---|---|---|---|
|
3
|
4
|
5
|
6
|
7
|
8
|
|
|
9
|
10
|
11
|
12
|
13
|
14
|
15
|
|
16
|
17
|
18
|
19
|
20
|
21
|
22
|
|
23
|
24
|
25
|
26
|
27
|
28
|
|
За последние 60 дней ни разу не выходила
Сайт рассылки:
http://blogorazvitie.ru
Открыта:
15-12-2014
Статистика
0 за неделю
Создание и продвижение блога на Wordpress!
Как создать плавающий баннер! Please, help me!Всем привет! Я не просто так озаглавил статью с просьбой о помощи, мне действительно нужна ваша помощь. Я надеюсь, что найдутся среди читателей опытные
вебмастера - верстальщики и помогут мне решить одну проблему. В основном предлагают для создания плавающего баннера громоздкие скрипты, различные библиотеки, которые еще нужно подключать и непонятно куда вообще эти все коды вставлять. Я же нашел, не большой скрипт, который можно поставить в виджет и плавающий баннер готов к работе. Но!!! Этот скрипт не до конца доработан! После установки данного скрипта, баннер начинает плавать, все вроде нормально и смотрится круто, но если баннер большого размера, то он заметно начинает наезжать на footer - низ сайта!!! Это серьезная для меня проблема. Может кто то скажет, да и пусть наезжает, делов то, а я хочу, чтобы все было ровно (тютелька в тютельку). Если вы знаете как решить эту проблему, как доработать скрипт или может есть другой код для плавающего баннера - Прошу помогите!!! Заранее благодарен. Итак, теперь расскажу и покажу как установить и настроить скрипт для плавающего баннера. Давайте сначала разберемся как вообще создать баннер и куда его поставить. Во первых, конечно нужно подготовить изображение для баннера. Нужно знать где будет стоять баннер, какой баннер и какого он будет размера. Узнать размеры не сложно. В этой статье будем ставить баннер для сайдбара. Что такое баннер!? Это графическое изображение рекламного характера, предназначен для привлечения клиентов, а также для информирования и позитивного имиджа. Виды баннеров - статический (jpeg, png), анимационный (gif) и флеш - баннер. Я знаю только эти, ну и для сайта в основном, только такие создают. Статический баннер в формате jpeg или png сделать можно с помощью любого текстового редактора, я использую программу PicPic или Adobe Photoshop CS5.1. Если вы решили создать свой баннер с нуля, то конечно делать нужно в программе Photoshop. Могу порекомендовать видеокурс по созданию баннеров, мне очень понравился. Возможно изучу до конца курс и пойду работать на фриланс ))) В этой статье я не буду учить вас как создавать баннер, а только покажу как его установить.Выберите изображение, которое будете использовать для баннера. Я приготовил вот такое изображение:
Для установки баннера в сайдбар, зайдите в админку своего сайта (показываю пример на движке Wordpress), далее заходим во вкладку - внешний вид- виджеты. Необходимо добавить новый текстовый виджет в сайдбар, для этого удерживая виджет переместите его в нужное место.
Новый виджет у нас появился, можете задать ему название в поле - заголовок. Просто переместить баннер в виджет не получится, нужно прописать путь до баннера. Для этого загрузите ваш баннер через Ftp на хостинг. Создайте отдельную папку и назовите ее например - banner.
Теперь в основную область текстового виджета пропишите вот такой код: <a href="http://blogorazvitie.ru"><img src="http://blogorazvitie.ru/banner/banner-vidget.jpg"/>
Что это значит:
http://blogorazvitie.ru - ссылка баннера на рекламируемый ресурс;
img src="http://blogorazvitie.ru/banner/banner-vidget.jpg" - путь до вашего баннераУ вас конечно ссылки свои, ставите какие нужно. Теперь сохраните виджет, перейдите на сайт, обновите страницу и смотрим на рабочий баннер. Если хотите чтобы баннер встал по центру и ссылка на другой ресурс открывалась в новом окне, то к основному коду добавляем еще вот это: <div align="center" target="_blank"><a href="http://blogorazvitie.ru" title="Текст при наведении"><img
src="http://blogorazvitie.ru/banner/banner-vidget.jpg"/></div>Поясняю: Создание блока для баннера - <div></div>; align="center" - выравнивание по центру; target="_blank" - открытие в новом окне; title="Текст при наведении" - при наведении на баннер Теперь баннер выглядит прилично и в рабочем состоянии.
Если вы хотите спрятать ссылку с баннера на сторонний ресурс (например если это - партнерская ссылка), и вы не хотите иметь лишнюю исходящую ссылку, то читаем в этой статье как это сделать. Как создать плавающий баннер!Переходим к основной части данной статьи - установка баннера, который будет плавать в нашем сайдбаре при прокрутке страницы. Вариант первый! Рабочий код плавающего баннера: <script> $(window).scroll(function() { if ($(this).scrollTop()>1000) $('#scrollable') .css({'position':'fixed','top':'60px'}); else $('#scrollable').css({'top':'1000px','position':'static'}); }); </script> <div id='scrollable' style=""width:280px";><div" align="center" target="_blank"><a href="http://blogorazvitie.ru" title="Текст при наведении"> <img src="http://blogorazvitie.ru/banner/banner-vidget.jpg"/></div></div> Вместо моих ссылок ставите свои! Цифровые значения можете менять, настраивая положение баннера! style=""width:280px"" - ширина баннера; .scrollTop()>1000) - отступ от верхней части сайта; 'top':'60px' - отступ от верха во время движения баннера Давайте попробуем работу этого скрипта с другим баннером, большего размера.
Код этого баннера из первого варианта. Баннер доехал до низа сайта, и наехал на подвал сайта, о чем я в начале поста говорил. Я пока не смог решить эту проблему, но если у вас есть возможность уменьшить размер баннера, то он будет не плохо смотреться. Продолжение статьи читайте на сайте www.blogorazvitie.ru .
|
Если у вас вертикальное изображение, то лучше его поставить в виджет вашего сайдбара, а если горизонтальное, то можно установить его в любое место на вашем сайте (в статье, под статьей, под шапкой сайта, внизу сайта и т.д.).
| В избранное | ||
