Иммитация блока ссылок SAPE для UCOZ

Скрипты

Рисунок Иммитация блока ссылок SAPE для UCOZ
Иммитация блока ссылок SAPE для UCOZ Иммитация блока ссылок SAPE для UCOZ
оценка: 5.0 из 5
оценок: 11, отзывов: 14

Сегодня будем облагораживать ссылки биржи sape.ru. Известно, что uCoz пока не поддерживает блочный вывод ссылок на своих сайтах. Это изрядное упущение, так как вид ссылок в виде блока более конкурентоспособен, нежели старый линейный способ вывода.

На данный момент есть возможность на сайтах uCoz придать ссылкам Sape более презентабельный вид, и соответственно, увеличить свой доход. При этом у ссылок останется та же функциональность, что и была до модернизации. Наша задача - сделать эти ссылки заметными при помощи JavaScript.

Что нам потребуется:

  • рабочий аккаунт Sape
  • сайт на базе uCoz с уже продающимися ссылками
  • аккаунт на websnapr.com

Если вы читаете этот материал и задались таким вопросом, предполагаю, что аккаунт Sape и сайт на uCoz, продающий ссылки, у вас уже есть. Остается дело за малым - аккаунт на websnapr.com.

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

Итак, проходим по этой ссылке и регистрируемся.

На введенный email придет письмо со ссылкой на активацию аккаунта. Щелкните по ней.

Вы перейдете на страницу, где будет ваш Developer Key:

Запишите его. Он нужен будет для формирования скриншотов к сайтам.

В SAPE, в разделе настроек площадки, нужно выставить разделитель ссылок. Лучше, если это будет тег <br> или тег <hr>. В нужный раздел вы можете попасть по следующему пути: Ссылки - Веб-мастеру - кнопка "Настройки" пощадки - закладка "Отображение".

Этап подготовки закончен. Теперь приступаем к подключению скрипта.

Следующий код нужно разместить в том месте, где собираетесь показывать проданные ссылки:

Code
<div class="sape-block">$DCODE_1$</div>
<link rel="stylesheet" type="text/css" href="http://szenprogs.ru/scripts/jquery/sapeblock/horizsample.css">
<script type="text/javascript" src="http://www.websnapr.com/js/websnapr.js"></script>
<script type="text/javascript" src="http://szenprogs.ru/scripts/jquery/sapeblock/jquery.sapeblock.js"></script>
<script type="text/javascript">
  $(function(){
    $('.sape-block').sapeblock( { separator: '<hr>', key: 'YuJoghFouvKY', image: true } );
  });
</script>

Код $DCODE_1$ нужно заменить на свой код экспорта ссылок с SAPE. Файлы jquery.sapeblock.js и horizsample.css можно переместить на свой хостинг. Файл websnapr.js перемещать на свой хост не стоит. В нем формируется динамический хеш на формирование скриншота.

Параметры вызова скрипта:

Code
$(selector).sapeblock( {
  separator: String,
  key: String,
  image: Boolean,
  classes: {
    item: String,
    host: String,
    title: String,
    image: String,
    hover: String
  }
} );
  • selector - селектор блока, в котором размещены ссылки.
  • separator - разделитель ссылок, установленный в настройках SAPE.
  • key - ключ разработчика, который выдает ресурс websnapr.com при регистрации.
  • image - если значение параметра равна true, то в блоках будут отображаться скриншоты сайтов. Если значение false, то вместо скриншотов будут выведены заголовки блоков.
  • classes - составной параметр, который переопределяет класс элементов блока ссылок. При вызове функции этот параметр можно не менять.

Параметры classes:

  • item - класс блока каждой ссылки. По умолчанию - sape-item.
  • host - класс блока с именем хоста. По умолчанию - sape-host.
  • title - класс блока с заголовком. Не используется, если выбран вариант со скриншотом. По умолчанию - sape-title.
  • image - класс блока со скриншотом. Не используется, если выбран вариант без скриншота. По умолчанию - sape-image.
  • hover - класс изображения, когда над ним находится курсор. По умолчанию - sape-hover.

Вы всегда можете изменить внешний вид блока ссылок меняя свойства CSS. Для удобства, было создано 2 варианта CSS-стилей:

  • Горизонтальный - http://szenprogs.ru/scripts/jquery/sapeblock/horizsample.css
  • Вертикальный - http://szenprogs.ru/scripts/jquery/sapeblock/vertsample.css

Вот так будут выглядеть ссылки, после обработки скриптом:

Сборник рецептов на Cookie.szenprogs.ru
Только популярный софт на Soft-Block.ru
Игры для Dendy эмуляторов на EGame.szenprogs.ru

После такой доработки, ссылки SAPE на uCoz будут выглядеть более респектабельно. Соответственно, их будут охотнее покупать. При этом, ссылки будут выполнять ту же функцию, что и до переделки.

На этом все. Удачи в свершениях!

Вы можете присоедениться к моему микроблогу в Твиттере @SzenProgs. Буду благодарен, если оцените мой труд, и щелкните по звездочкам ниже.




Иммитация блока ссылок SAPE для UCOZ
Скрипты
Скрипты, инструкции, справочники

rss
Категория:Скрипты
Просмотрено:6274
Рейтинг:5.0/11
Дата добавления:2011-10-11 08:26, Вторник
Добавил:Szen
Теги:блок ссылок, WebSnapr, Sape, ucoz

Мини-форум

1-10 11-14
№ 02011-10-11 08:26
Szen
Аватар участника Szen
Здесь вы можете задать вопрос или оставить комментарий по теме "Иммитация блока ссылок SAPE для UCOZ".
Гость
№ 1
2011-11-27 22:32 Спам
cooper
Аватар участника cooper
Подскажите как блок расположить по центру ?
Заранее благодарен.
Юрий
№ 2
2011-11-28 10:04 Спам
Szen
Аватар участника Szen
cooper, ну и флудер же вы! Зачем столько сообщений? Я и комменты неплохо вижу. Решал задачу.

В общем, обновляйте коды. Скрипт и стили я поправил.
Szen
№ 3
2011-11-28 10:59 Спам
cooper
Аватар участника cooper
.sape-item{
border: 2px solid #0000ff;
margin-bottom: 5px;
width: 180px; поменял и опять х...
font-size: 10pt;
padding: 5px;
position: relative;
display: block;

прости за флуд
Юрий
№ 4
2011-11-28 11:02 Спам
Szen
Аватар участника Szen
Так. Дай-ка ссыль на страницу с блоком. Гляну.
Szen
№ 5
2011-11-28 11:13 Спам
Szen
Аватар участника Szen
cooper, делайте так:
Code
<center><div class="sape-block">тут_код_импорта</div></center>
Szen
№ 6
2011-11-28 11:23 Спам
cooper
Аватар участника cooper
спасибки, до этого так делал и скрин пропадал.
Еще вопросик если можно, DCODE_1 если ссылок много то нужно DCODE_2 3 и так далее или ошибаюсь или тупо DCODE_1 везде
Юрий
№ 7
2011-11-28 11:25 Спам
Szen
Аватар участника Szen
Quote (cooper)
Еще вопросик если можно, DCODE_1 если ссылок много то нужно DCODE_2 3 и так далее

Достаточно одного кода.
Szen
№ 8
2011-11-28 11:28 Спам
cooper
Аватар участника cooper
спасибки, очень помог.
Юрий
№ 9
2011-11-28 11:29 Спам
Szen
Аватар участника Szen
Пожалуйста! должен будешь. )))
Szen
1-10 11-14
Учавствовать в обсуждении "Иммитация блока ссылок SAPE для UCOZ" могут только зарегистрированные пользователи.
Реклама
Кнопка портала
Друзья портала
Вакантное место для вашей рекламы!
RSS лента Блога
RSS лента Каталога файлов
RSS лента Новостей
Будьте в курсе событий.
Введите ваш email:

Личный блок
  • Гость портала.
  • Личных данных нет.
Вход на сайт
Регистрация
Опрос
Какой JavaScript фреймворк вы изпользуете?
Всего ответов: 146
Статистика
Valid HTML 4.01 Transitional

Яндекс цитирования



Онлайн всего: 2
Гостей: 2
Пользователей: 0
Портал SzenProgs.ru © 2008 - 2017 · Условия
Администратор и дизайнер портала: Szen
Хостинг от uCoz