Як додати на свій сайт посилання на мобільний сайт і мобільні додатки

Посилання повідомлять користувачів вашого сайту, що у вас з'явилася мобільна версія та мобільні додатки.

Приклад запропонованого дизайну:

Коментарі до HTML:

  • код в onlick для посилання "мобільний сайт" - включає (якщо була зупинена) автоматичну переадресацію на мобільну версію, дивіться також: Як додати на свій сайт код переадресації на мобільну версію
  • Посилання на мобільні додатки (app_store_url, google_play_url, windows_phone_url) можна взяти з мобільної версії, головна сторінка, таб Категорії
  • Клас "MobileLinks-AppLogoDisabled" і href ="javascript:alert('скоро буде ..')" - використовуються якщо мобільний додаток ще не готовий або ще не пройшов модерацію

HTML, який потрібно вставити на свій сайт:

<style>
.MobileLinks-Wrap {
  padding: 3px;
}
.MobileLinks-Site {
  border: 1px solid silver;
  border-radius: 7px;
  display: inline-block;
  height: 36px;
  margin-right: 5px;
  padding: 3px 6px;
  text-align: center;
  vertical-align: middle;
}
.MobileLinks-AppLogo {
  background-repeat: no-repeat;
  background-size: contain;
  display: inline-block;
  height: 45px;
  margin-right: 5px;
  vertical-align: middle;
  width: 130px;
}
.MobileLinks-AppLogoDisabled {
  opacity: 0.4;
}
.MobileLinks-AppStoreLogo {
  background-image: url(http://shop-mobilizer.com/common/AppStores/uk/AppStore.png);
}
.MobileLinks-GooglePlayLogo {
  background-image: url(http://shop-mobilizer.com/common/AppStores/uk/GooglePlay.png);
}
.MobileLinks-WinStoreLogo {
  background-image: url(http://shop-mobilizer.com/common/AppStores/uk/WinStore.png);
}
</style>

<div class="MobileLinks-Wrap">
<a href ="http://mobile_site"
  onclick="if(window.localStorage&&(localStorage['mobile_state']=='not_redirect'))localStorage['mobile_state']='redirect'"><span
  class="MobileLinks-Site">мобільний<br>сайт
</span></a><a href ="http://app_store_url" target="_blank"><span
  class="MobileLinks-AppLogo MobileLinks-AppStoreLogo">
</span></a><a href ="http://google_play_url" target="_blank"><span
  class="MobileLinks-AppLogo MobileLinks-GooglePlayLogo">
</span></a><a href ="http://windows_phone_url" target="_blank"><span
  class="MobileLinks-AppLogo MobileLinks-WinStoreLogo">
</span></a>
</div>