Ставим кнопки социальных сетей в 3D тур.
Кнопки социальных сетей.

Сейчас практически на каждом сайте можно увидеть кнопки социальных сетей "поделиться". Это дополнительное средство привлечения целевой аудитории.
Не покидая страницу сайта вы можете поделиться информацией в соц. сетях и 3D тур не является исключением. Я хочу показать вариант
установки кнопок в виртуальный тур.
На просторах интернета можно найти ресурсы, предоставляющие кнопоки соц. сетей. Как правило это конструкторы, с помощью которых формируется блок кнопок
с выбором дизайна, генерится код, который нужно разместить внутри HTML страницы.
Подготовка кнопок.

Для примера буду пользоваться конструктором от "pluso" В нем не сложно разобраться, все изменения сразу отображаются в окне просмотра. Ниже расположено окно, в котором выводится код для вставки на сайт, Он состоит из двух частей - скрипт и блок с кнопками. Копируем весь код в буфер обмена для последующей вставки.
Правим код в файле tour.html.
Виртуальный тур - это блок, заключенный в теге "div" и занимает 100% экрана. Кнопки социальных сетей - это тоже блок "div" и смысл в том, что-бы блок кнопок разместить
на переднем плане, а виртуальный тур на заднем. Для этого воспользуемся кодом позиционирования "z-index".
Откройте файл tour.html и внутрь существующего тега "style" добавьте как прописано в таблице ниже.
<style> . . #pano { position: absolute; } #social { position: relative; } #pano { z-index: 1; } #social { z-index: 2; } </style> |
Этот код присваивает панораме (id="pano") индекс 1, кнопкам соц сетей (id="social") - индекс 2, но id кнопок пропишем позже.
Теперь вставляем раннее скопированный код кнопок внутрь тега "body" в файле tour.html
Блок кнопок заключен в тег "div" , пропишем внутри него id="social" и стиль, в котором укажем расположение на экране, у меня это выглядит так:
style="float:right;margin-top:10px; margin-bottom:3px; margin-right:10px;"
В итоге получаем примерно такой код, как ниже в таблице:
<body> . . . <script type="text/javascript">(function() . . . </script> <div id="social" class="pluso" data-background="transparent" data-options="medium,round,line,horizontal,counter,theme=07" data-services="vkontakte,facebook,twitter,odnoklassniki" style="float:right;margin-top:10px; margin-bottom:3px; margin-right:10px;"> </div> </body> |
Запускаем тур и смотрим на результат.