
При нажатии на кнопку «Код баннера» открывается модальное окно с выбором баннера без перехода на другую страницу.

При нажатии на кнопку «Код баннера» открывается модальное окно с выбором баннера без перехода на другую страницу.
Установка:
1. В файл style.css Вашего шаблона вставить:
#code-p-wrap { width: 600px; padding:0; margin:0; background-color: #EAEAEA; font: 12px Georgia, «Times New Roman», Times, serif; color: #2d2d2d;}
#code-p-wrap a img { border: 0; }
#code-p-wrap fieldset { border: 1px solid #666; padding: 15px; }
#code-p-wrap .code-selector div { clear: both; margin: 0 0 25px 0; }
#code-p-wrap label { font-size: 14px; display: block; width: 120px; float: left; text-align: right; padding: 2px 6px; }
#code-p-wrap .code-selector select { border: 1px solid #666; width:120px}
#code-p-wrap .code-selector option { padding: 0 12px; }
#code-p-wrap .code-selector textarea { border: 1px solid #7d7858; padding: 10px; width: 375px; height: 80px; }
#code-p-wrap .note { font-size: 11px; width: 300px; margin: 0 0 0 130px; color: #666;}
#code-p-wrap .example-area { margin-left: 130px; width: 375px; text-align: center; border: 1px solid #7d7858; padding: 10px; }
#code-p-wrap .example-area img { max-width: 100%; }
2. В то место где Вы хотите видеть кнопку «Код баннера» вставить:
<a href=»/» target=»_blank» title=»Все для вебмастера!»>
<img src=»/88×31.gif» style=»max-width:600px;» alt=»Все для вебмастера!» />
</a><br /><br />
<input value=»Код баннера» onclick=»showCode();» type=»button» />
</center>
<div id=»code» title=»Выберите код баннера для вставки на сайт» style=»display: none;»>
<div id=»code-p-wrap»>
<fieldset>
<form action=»#» class=»code-selector»>
<div>
<label>Размер: </label>
<select name=»type-size» id=»type-size»>
<option selected=»selected» value=»88×31.gif»>88 x 31</option>
<option value=»468×60.gif»>468 x 60</option>
<option value=»250×250.gif»>250 x 250</option>
</select>
</div>
<div>
<label>Код: </label>
<textarea rows=»10″ cols=»25″ id=»code-box»><a href=»http://vipflex.ru/» title=»Все для вебмастера!»><img style=»max-width:600px;» alt=»Все для вебмастера!» src=»http://vipflex.ru/88×31.gif» /></a></textarea>
<p class=»note»>Просто скопируйте код выше и вставьте в свою страничку</p>
</div>
</form>
<label>Пример: </label>
<div class=»example-area» id=»graphic-example-area»>
<a href=»/» target=»_blank» title=»Все для вебмастера!»><img src=»/88×31.gif» style=»max-width:600px;» alt=»Все для вебмастера!» /></a>
</div>
<p class=»note»>Пример баннера</p>
</fieldset>
</div>
</div>
<script type=»text/javascript»>
//<![CDATA[
$(function() {
$(«#type-size»).change(function() {
var graphicFileName = $(«#type-size option:selected»).attr(«value»);
var newCode = ‘<a href=»http://vipflex.ru/» title=»Все для вебмастера!»><img style=»max-width:600px;» alt=»Все для вебмастера!» src=»http://vipflex.ru/’ + graphicFileName + ‘» /></a>’;
$(«#code-box»).text(newCode);
$(«#graphic-example-area»).html(newCode);
});
});
function showCode() {
$(function(){
$(‘#code’).dialog({
autoOpen: true,
show: ‘fade’,
hide: ‘fade’,
width: 622,
});
});
}
//]]>
</script>
3. Замените все пути к баннерам на свои.
4. Чтобы добавить баннеры найдите:
<option value=»468×60.gif»>468 x 60</option>
<option value=»250×250.gif»>250 x 250</option>
и ниже добавьте
Пример можете посмотреть на этом сайте справа в блоке «Поддержи наш сайт».
Автор: VipFlex
Похожие записи
О комманде
Конечно же, невозможно запомнить все имеющиеся флаги для различных команд.…
Все что нужно для установки Linux Mint 17.1 вы найдете здесь
Linux Mint 17.1 с интерфейсом Cinnamon 2.4 вполне может именоваться…
Всё по порядку, загрузите, запишите, установите ОС
Далее, вам нужно будет загрузить соответствующий 32- или 64-битный установочный…
Руководство по установке программ в Linux
Установку программ в Linux производить довольно легко, в каком то…
Как установить Linux с жесткого диска
Самый простой способ для запуска ISO образа дистрибутива Linux с вашего…
Универсальный способ: Infra Recorder
Далее необходимо упомянуть о универсальном способе записи диска для всех…
Записываем Linux на диск из Linux
Для записи ISO-образов в каждом дистрибутиве Linux используется соответствующая программа.…
Установка Linux Mint c Windows
Будем производить совместную установку: linux mint c windows. Дистрибутив Mint, по…
Инструкция о том как записать Linux на диск
Данное руководство содержит несколько способов для записи Linux на диск,…
Статья для начинающих о том как установить Ubuntu 12.10
Установить Ubuntu стало намного проще, чем какую – либо версию…
Приступим к непосредственной записи дистрибутива Linux на оптический диск.
Сначала мы определяемся с размером ISO-образа и выбираем, либо CD…
Butterfly 3.0 — программа для поиска DLE сайтов
Butterfly 3.0 - Программа осуществляет поиск DLE сайтов по ключевым словам.В…
EasyBlog v3.0.8593 RUS
EasyBlog v3.0.8593 RUS для Joomla 1.5, 1.6, 1.7, 2.5 -…
Игровой макет (by Sving)
Тёмный игровой макет (далее…)
29 способов получить бесплатно ссылку на свой сайт
Что делать, если бюджет на покупку ссылок мал или вовсе…
7 способов seo-оптимизации сайта
1. Размещайте как можно больше уникального контента, в который включены…
Диалоговое окно
Это диалоговое окно идеально подходит для любого веб-сайта! Оно включает…
Редактор и компилятор LESS
LESS - инструмент, который помогает сохранить время и байты при…
DleMovie 1.3 nulled
DleMovie - уникальный в своём роде продукт для DataLife…
buy Bacteriostatic water
Использование специальных химических препаратов — лучшее средство для обеззараживания воды.…
Группа пользователей ‘Роботы’ для DLE
Данный хак позволяет определять поисковых роботов не как гостей,а как…
New-warez для DLE 9.2
Версия: DLE 9.2Ширина: Динамическая.Тип шаблона: ОригиналПроверялось в браузерах: Opera, IE8,…