Установить пошаговую инструкцию intro.js на blogspot.

Установить пошаговую инструкцию intro.js на blogspot. 

Шаг 1: Заходим в панель управления вашего блога. 

На всякий случай, делаем резервное копирование. 

Потом заходим в Шаблон --> Изменить HTML:

В HTML, ищем тег <b:skin> (Жмем Ctr + F) и вставим такой код перед тегом <b:skin>:

<link href='https://googledrive.com/host/0ByfqioSWCI9zSlFYZEU0NHVtR2c' rel='stylesheet'/> <!-- introjs.css  -->

Далее, ищем тег </body> и ставим код файл intro.js. Либо английский либо русский. 

английский:

 <script src='https://googledrive.com/host/0ByfqioSWCI9zY1lESHk1S21kNzg' type='text/javascript'/><!-- intro.js eng -->

русский

<script src='https://googledrive.com/host/0ByfqioSWCI9zeURwZTY1emlZdjg' type='text/javascript'/><!-- intro.js rus -->

Сохраним и выходим от шаблона.

В принципе все, теперь надо указать где появится эта инструкция. 

Шаг 2: указываем где появится эта инструкция. 

И так, сначала нам надо создать кнопку "Начать Тур", таким образом:
 <a href="javascript:void(0);" onclick="javascript:introJs().start();">Начать Тур</a>
И установи его где Вам удобно. Например я установила на верхнем правом меню.

Это стандартный код пошаговой инструкции:

 <div data-step="1" data-intro="Привет! Это шаг 1. " data-position='top'>

...

<!-- Ваш элемент! -->

...

</div>

Где:

data-step: 1- первый шаг, 2-второй шаг ....

data-intro: Ваш комментария

 data-position: При желании определить положение подсказке, `top`,` left`, `right`,` bottom`, `bottom-left-aligned` (так же, как 'bottom'), 'bottom-middle-aligned» и «bottom-right-aligned '. По умолчанию `bottom`.

Например, у меня есть такой баннер: 

с таким кодом:
<a href="http://www.seosprint.net/?ref=4335234" target="_blank"><img src="http://www.seosprint.net/baners/seo3x468x60.gif" width="468" height="60" border="0" alt="SEO sprint - Всё для максимальной раскрутки!" /></a>

Просто добавим код инструкции:

 <div data-step="1" data-intro="Привет! Это шаг 1. " data-position='top'>

<a href="http://www.seosprint.net/?ref=4335234" target="_blank"><img src="http://www.seosprint.net/baners/seo3x468x60.gif" width="468" height="60" border="0" alt="SEO sprint - Всё для максимальной раскрутки!" /></a>

</div>

И все! Нажми на "Начать Тур" (В верхнем меню) и наслаждайтесь. 

Поделитесь друзьям:

ABOUTME

Привет! Я студентка из Вьетнама, я учусь в МГТУ им Баумана, мне нужна работа но времени мало, я нашла такие заработки в интернете, и решила поделиться с вами. Подпишитесь и расскажите друзьям. Спасибо!