[4.2.x] ВВ-код Кнопка-ссылка на магазин мобильных приложений

02-15-2014, 12:55 AM

На многих форумах (сайтах) пишут обзоры по мобильным приложениям (для разных платформ).
Пришла идея сделать такой bb-код в виде кнопки для украшения ссылки на приложение в магазине.
Принципиально нового ничего не придумал, возможно кому-то подойдет готовое решение.
Итак:
1. bb-код View In iTunes
В админке добавляем новый BB код
Заголовок: View In iTunes
Название BB кода: VITUNES
Замена:

Code:

<style type="text/css">
.iTunesbutton {
    display: block; 
    width: 154px;
    height: 32px;
    background: url(/images/icons/viewinitunes_en.png) 0 0 no-repeat;
    }

.iTunesbutton:hover {
    background-position: 0 -33px; /* координаты нашей второй картинки*/
 }

.iTunesbutton:active {
    background-position: 0 -66px; /* координаты нашей второй картинки*/
}
      </style>

<a href="{option}" class="iTunesbutton" title="Посмотреть в iTunes" rel="nofollow" target="_blank"> </a>

Пример: [VITUNES=http://www.your-link-iTunes.com][/VITUNES]
Описание: Тег добавляющий ссылку на магазин в виде кнопки
Использовать опцию: Да
Изображение кнопки: images/misc/iTunes.png
Удалить BB код, если отсутствует текст: нет
И остальные тоже нет.
Сохраняем.

2. bb-код View Google Play
В админке добавляем новый BB код
Заголовок: View Google Play
Название BB кода: GPLAY
Замена:

Code:

<style type="text/css">
.GPlaybutton {
    display: block; 
    width: 154px;
    height: 32px;
    background: url(/images/icons/google_play.png) 0 0 no-repeat;
    }

.GPlaybutton:hover {
    background-position: 0 -33px; /* координатывторой картинки*/
 }

.GPlaybutton:active {
    background-position: 0 -66px; /* координаты третьей картинки*/
}
      </style>

<a href="{option}" class="GPlaybutton" title="Посмотреть в Google Play" rel="nofollow" target="_blank"> </a>

Пример: [GPLAY="http://www.your-link-iTunes.com"][/GPLAY]
Описание: Тег добавляющий ссылку на магазин в виде кнопки
Использовать опцию: Да
Изображение кнопки: images/misc/google_play.png
Удалить BB код, если отсутствует текст: нет
И остальные тоже нет.
Сохраняем.

Картинки кнопок и пример в аттаче.

P.S: по аналогии можно сделать и на другие магазины...

02-15-2014, 01:11 AM

Смысл вставлять CSS в замену?
Лучше уже в стили и закинуть

02-15-2014, 01:21 AM

@Sven, ну кому как удобней. Можно в additional.css или в postbit.css закинуть. Мне кажется так проще "хвосты" будет чистить...

02-15-2014, 01:23 AM

10 кнопок на странице и 10 раз будет вставляться один и тот же код, смысл? Если это требуется подключить 1 раз
Ок, 10 мало, пусть будет 100 кнопок..

02-15-2014, 02:09 PM

Тогда так:

В шаблон postbit.css в конец добавить:

Code:

/* view in iTunes and Google_Play */
.iTunesbutton {
    display: block; 
    width: 154px;
    height: 32px;
    background: url(/images/icons/viewinitunes_en.png) 0 0 no-repeat;
    }

.iTunesbutton:hover {
    background-position: 0 -33px; /* координаты второй картинки*/
 }

.iTunesbutton:active {
    background-position: 0 -66px; /* координаты третьей картинки*/
}

.GPlaybutton {
    display: block; 
    width: 154px;
    height: 32px;
    background: url(/images/icons/google_play.png) 0 0 no-repeat;
    }

.GPlaybutton:hover {
    background-position: 0 -33px; /* координаты второй картинки*/
 }

.GPlaybutton:active {
    background-position: 0 -66px; /* координаты третьей картинки*/
}

Сохраняем.
Замена соответственно будет:
1.

Code:

<a href="{option}" class="iTunesbutton" title="Посмотреть в iTunes" rel="nofollow" target="_blank"> </a>

2.

Code:

<a href="{option}" class="GPlaybutton" title="Посмотреть в Google Play" rel="nofollow" target="_blank"> </a>

Забыл сказать: кнопка View in iTunes - два варианта en и ru