Информация о вашем браузере для uCoz

Информация о вашем браузере для uCoz

02015-06-01320017Денис Абдуллин

Данный скрипт показывает пользователю, информацию о браузере, который он использует при просмотре веб-сайта. Например, если пользователь использует браузер Safari, данный скрипт выводит название браузера и его версию (Safari 5.1).

Установка

Используем следующий html каркас и устанавливаем его в то место, где хотим видеть информацию о браузере.

Код
<div class="cell-your-browser">  
  <div class="your-browser-info">Ваш браузер </div>  
  <?if($USER_AGENT$='firefox')?> <a class="your-browser-ico brauzer-mf" href="/go?http://www.mozilla.org/ru/firefox/new/" title="http://www.mozilla.org/ru/firefox/new/" title="Скачать браузер Mozilla Firefox" target="_blank">FireFox - $USER_AGENT_VER$</a><?endif?>  
  <?if($USER_AGENT$='chrome')?><a class="your-browser-ico brauzer-gx"href="/go?http://www.google.ru/chrome" title="http://www.google.ru/chrome" title="Скачать браузер Google Chrome" target="_blank">Chrome - $USER_AGENT_VER$</a><?endif?>  
  <?if($USER_AGENT$='opera')?><a class="your-browser-ico brauzer-op"href="/go?http://www.opera.com/download/" title="http://www.opera.com/download/" title="Скачать браузер Opera"target="_blank">Opera - $USER_AGENT_VER$</a><?endif?>  
  <?if($USER_AGENT$='safari')?><a class="your-browser-ico brauzer-sf"href="/go?http://www.apple.com/ru/safari/" title="http://www.apple.com/ru/safari/" title="Скачать браузер Apple Safari" target="_blank">Safari - $USER_AGENT_VER$</a><?endif?>  
  <?if($USER_AGENT$='ie')?><a class="your-browser-ico brauzer-ie"href="/go?http://windows.microsoft.com/ru-RU/internet-explorer/products/ie/home" title="http://windows.microsoft.com/ru-RU/internet-explorer/products/ie/home" title="Скачать браузер Internet Explorer"target="_blank">Internet Explorer - $USER_AGENT_VER$</a><?endif?>  
  </div>

В данном коде используются системные переменные uCoz, которые определяют и выводят информацию о браузере пользователя.

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

Код
/* Отображаем информацию ваш браузер на uCoz  
  ------------------------------------------*/  
  .cell-your-browser {  
  float:left;  
  padding: 10px;  
  font:10px Verdana,Arial,Helvetica, sans-serif;  
  }  

  .your-browser-info {  
  float:left;  
  height: 14px;  
  padding: 3px 5px 2px 0px;  
  }  

  .your-browser-ico:link,  
  .your-browser-ico:visited {  
  float:left;  
  height: 14px;  
  padding: 3px 10px 2px 25px;  
  text-shadow: 1px 1px 1px #333;  
  font-weight: 700;  
  color:#eaeaea;  
  border-radius:3px;  
  display:block;  
  text-decoration:none;  
  outline:none  
  }  

  .your-browser-ico:hover {  
  color:#eaeaea;  
  }  

  .brauzer-mf {  
  background:#555 url(https://yraaa.ru/_pu/24/50461424.png) no-repeat left;  
  background-position:0px 1px;  
  }  

  .brauzer-mf:hover {  
  background:#777 url(https://yraaa.ru/_pu/24/50461424.png) no-repeat left;  
  background-position:0px 1px;  
  }  

  .brauzer-gx {  
  background:#555 url(https://yraaa.ru/_pu/24/50461424.png) no-repeat left;  
  background-position:0px -19px;  
  }  

  .brauzer-gx:hover {  
  background:#777 url(https://yraaa.ru/_pu/24/50461424.png) no-repeat left;  
  background-position:0px -19px;  
  }  

  .brauzer-op {  
  background:#555 url(https://yraaa.ru/_pu/24/50461424.png) no-repeat left;  
  background-position:0px -38px;  
  }  

  .brauzer-op:hover {  
  background:#777 url(https://yraaa.ru/_pu/24/50461424.png) no-repeat left;  
  background-position:0px -38px;  
  }  

  .brauzer-sf {  
  background:#555 url(https://yraaa.ru/_pu/24/50461424.png) no-repeat left;  
  background-position:0px -56px;  
  }  

  .brauzer-sf:hover {  
  background:#777 url(https://yraaa.ru/_pu/24/50461424.png) no-repeat left;  
  background-position:0px -56px;  
  }  

  .brauzer-ie {  
  background:#555 url(https://yraaa.ru/_pu/24/50461424.png) no-repeat left;  
  background-position:0px -74px;  
  }  

  .brauzer-ie:hover {  
  background:#777 url(https://yraaa.ru/_pu/24/50461424.png) no-repeat left;  
  background-position:0px -74px;  
  }

После установки CSS стилей, установка скрипта завершена. Результат вы ведите такой как показан на скриншоте. Не забывайте загружать картинки на свой сайт.


Создать сайт в uKit Нужен классный сайт для бизнеса?
Воспользуйтесь сервисом uKit. Никакого кода!
Комментарии (17)
testus 2015-06-30 в 03:30 / Материал
Сейчас такое количество браузеров что рядовому пользователю трудно сообразить с чего он твообще сидит на сайте. Например большие путаницы происходят из-за того что яндекс, гугл, майл.ру понавыпускали своих браузеров и теперь люди понять не могут что яндекс это не только браузер но и сайт
0
Тигран 2015-06-05 в 15:12 / МатериалСпам
Но и на таких сайтах они не сидят.
0
Денис Минов 2015-06-07 в 18:18 / МатериалСпам
Делал подобное, что-то похожее, но как потом узнал, что бывают некоторые баги.
У друга был Yandex, показывалась Opera. Либо версии не совпадали.
1
Денис Абдуллин 2015-06-03 в 07:45 / Материал
Добавил тень. А так вообще-то хотелось везде сделать затемненение фона.
0
Денис Абдуллин 2015-06-02 в 00:06 / Материал
В каком месте? В редактировании комментария вижу только.
0
Денис Садыков 2015-06-02 в 09:35 / МатериалСпам
В ответе на комментарий.
0
Денис Мехедов 2015-06-01 в 19:58 / МатериалСпам
Для меня мои же скриншоты видеть на сторонних сайтах прям дикость
3
Денис Мехедов 2015-06-01 в 20:00 / МатериалСпам
Поверьте моему опыту, в интернете помимо пользователей вашего возраста сидят и пенсионеры и люди среднего возраста, которым установили, что есть и они сидят пользуются и не знают, что иконка лисички это Mozilla Firefox, им даже эти два слова будет трудно прочитать!
0
Денис Мехедов 2015-06-01 в 19:57 / МатериалСпам
В тему будет если в данную переменную установить ячейку с плагинами для того или иного браузера или обзоры различных дополнений.

Денис ты бы как нибудь выделил Ajax окно или затемнил фон когда оно появляется, не очень приятно видеть когда окно сливается с фоном сайта.
1
Денис Абдуллин 2015-06-01 в 19:10 / Материал
Ну вот мне тоже все равно, но если зашел на "сайт о браузерах" и там такая штука будет, то будет ох как в тему.
0
Кирилл 2015-06-01 в 17:38 / МатериалСпам
Бесполезная вещь, я сомневаюсь, что человек не знает с какого браузера он зашел на сайт. Просто лишняя никому ненужная информация.
2
Вадим Голубь 2015-06-01 в 17:00 / МатериалСпам
Плюсую, хотел об этом упомянуть
0
Денис Садыков 2015-06-01 в 16:55 / МатериалСпам
На Center-DM еще несколько лет назад данный скрипт был... Даже скриншот их.
4
Сергей Александрович 2015-06-01 в 12:50 / Материал
Как по мне то классы нужно немного по короче называть. А то они как слишком длинные. А с другой стороны оно понятно за что отвечает. Но я бы все таки рекомендовал бы уменьшить название.
2
Павел 2015-06-01 в 15:38 / МатериалСпам
Но ведь информация показывается только для себя, а не пользователю..
У меня стоит скрипт чуть другой, но за то он показывает какой у пользователя браузер, если зайти в любой профиль.
0
Дмитрий 2015-06-01 в 13:38 / МатериалСпам
Только поправьте ссылки в коде /go? для чего?)
0
Дмитрий 2015-06-01 в 11:14 / МатериалСпам
Полезная вещь :)
0
Чтобы оставить комментарий или отзыв под этой публикацией, войдите или зарегистрируйтесь.