шапка лого линия шапка
black-line
grey-line   grey-line   grey-line


grey-line   grey-line  
black-line
ДИСТАНЦИОННЫЕ КУРСЫ ВЕБ-ДИЗАЙНА
black-line
ПЕРВОЕ ЗАДАНИЕ
grey-line   grey-line   grey-line

Как добавить социальные кнопки на страницу?



grey-line   grey-line  
grey-line   grey-line   grey-line

Этот урок является продолжением "Темы 0001". Смотрите предыдущее занятие:   Смотреть

УРОК-0005.

grey-line   grey-line  
grey-line   grey-line   grey-line 1. СОЦИАЛЬНЫЕ КНОПКИ.

1.1. Нам необходимо добавить кнопки социальных сетей или БЛОК "ПОДЕЛИТЬСЯ", как показано на картинке ниже:


grey-line   grey-line  
СОЦКНОПКИ
grey-line   grey-line   grey-line

1.2. Вбиваем в поисковике ссылку: https://tech.yandex.ru/share/


grey-line   grey-line  
ССЫЛКА
grey-line   grey-line   grey-line

1.3. Попадаем на страницу yandex.ru, а именно на страницу - Блок "Поделиться"


grey-line   grey-line  
Блок - Поделиться
grey-line   grey-line   grey-line

1.4. Далее мы выделяем галочками те социальные сети, которые хотим добавить на свою страницу:


grey-line   grey-line  
СТАВИМ ГАЛОЧКИ
grey-line   grey-line   grey-line

1.5. Затем мы выбираем внешний вид блока:


grey-line   grey-line  
ВЫБИРАЕМ ВНЕШНИЙ ВИД
grey-line   grey-line   grey-line

1.6. Затем мы копируем код скрипта, например как в нашем случае - на 6 соцкнопок:


<script src="//yastatic.net/es5-shims/0.0.2/es5-shims.min.js"></script>
<script src="//yastatic.net/share2/share.js"></script>
<div class="ya-share2" data-services="vkontakte,facebook,odnoklassniki,moimir,gplus,twitter" data-size="s"></div>


grey-line   grey-line  
копируем код скрипта
grey-line   grey-line   grey-line

1.7. И вставляем его в нашу страницу, в данном случае в ячейку приготовленной таблицы:

<table align="center" bgcolor="#191414" width="960" cellspacing="0" cellpadding="0" border="0">
<tr>
    <td width="780" align="right">
    <br>
    
    
    <font face="Arial" size="1" color="#c8c8c8">
    Поделиться с друзьями&nbsp;
    </font>
    <br>
    <br>
    </td>
    <td width="180" align="right">&nbsp;</td>
    </tr>
</table>


Вместо курсора:


grey-line   grey-line  
вставляем код
grey-line   grey-line   grey-line

Как на картинке:


grey-line   grey-line  
кусок кода
grey-line   grey-line   grey-line

1.8. И соцкнопки появляются на нашей странице:


grey-line   grey-line  
НАША СТРАНИЦА
grey-line   grey-line   grey-line

А на этом наш урок закончен!
Если есть желание, переходите к следующему…




grey-line   grey-line  
black-line
КНОПКИ ОБРАТНОЙ СВЯЗИ КНОПКИ ОБРАТНОЙ СВЯЗИ
black-line
нижний блок
нижний блок Новые работы НАШИ ГРУППЫ ВКОНТАКТЕ:

Дизайн групп ВКонтакте

Разработка сайтов

Производство мультипликации

Поздравительные открытки

Инфографика


НАШ КАНАЛ НА ЮТУБ:

Смотреть>>
нижний блок НАШИ ТЕЛЕФОНЫ:
+7 (951) 375 92 45,
+7 (901) 452 63 27.


НАШ АДРЕС:
630120, г. Новосибирск, ул. Забалуева, 21.


E-MAIL:
knyazew2015@mail.ru, kindle888@rambler.ru

ICQ: 406472064
WhatsApp: 89513759245
Instagram: chudesnaya_strana_17


НАША КОМАНДА.

Подробнее>>
нижний блок
нижний блок
самый нижний блок Поделиться с друзьями:
самый нижний блок

Главная   |   Развлечения   |   Путешествия   |   Обучение   |   Дизайн


Сайт сделан в студии дизайна "Чудесная страна"


    Яндекс.Метрика Рейтинг@Mail.ru    



Valid HTML 4.0 Transitional


Правильный CSS!