Кнопка подписаться для фотошопа: Кнопка «Подписаться» для монтажа » Всё для монтажа и фотошопа

Разное 

Ссылка подписаться на Ютуб в виде кнопки

Содержание этой статьи

Здравствуйте, друзья! В этой статье вы найдете ответы на вопросы: Как сделать ссылку подписаться на ютуб и как делается кнопка подписаться на Ютуб. После прочтения Вы будете уметь делать три оригинальных варианта ссылок и кнопок. Так что читайте!

Сразу скажу, что статья получилась довольно большая. Так что наберитесь терпения. Даже в оглавлении к статье видно, что вопросов будет довольно много, но я постарался максимально просто осветить каждый.

Итак, поехали!

Простое оформление ссылкой

Это действительно самый простой способ, для реализации которого потребуется дополнить адрес вашего видеоканала “секретной добавкой”:

?sub_confirmation=1

Итоговая ссылка при этом будет выглядеть вот так

адрес_канала?sub_confirmation=1

Синим подсвечено дополнение к адресу видеоканала

Вы можете размещать эту ссылку в социальных сетях, делать ее на сайте анкорной (скрытой за надписью или визуальным элементом). И в любом случае при клике по ней пользователь будет переходить на страницу вашего видеоканала.

При этом ему сразу будет предложена подписка на канал.

Окно видеоканала с предложением подписаться

Но для сайтов в арсенале инструментов самого YouTube есть специальный сервис, который генерирует стильные кнопки с указанием количества подписчиков, показом логотипа и названия канала.

Кнопка Подписаться в конструкторе YouTube

Работа с конструктором кнопки

Ютубовский конструктор кнопки Подписаться Вы сможете найти здесь. Он очень простой для понимания:

Особенность конструктора в том, что все данные, которые вы в нем вносите, немедленно включаются в обработку и в окне предпросмотра можно сразу наблюдать получаемый результат.

Название или ID канала – это цифровое окончание в ссылке его адреса.

Если вы вставите в это окно ссылку целиком или предварительно не удалите в окне надпись GoogleDevelopers, то конструктор выдаст ошибку!

В строке Макет выбирают вид представления будущей кнопки:

Строку Фон можно не трогать.

По умолчанию кнопка генерируется на прозрачном фоне, но, если выбрать вкладку темный, то получится белая кнопка на темно сером фоне. Бр-р-р, как некрасиво! Впрочем, сами потом посмотрите.

Зачем нужна строка Число подписчиков объяснять не буду. Понятно, что цифирка или видна, или нет.

Собственно в показе количества подписчиков и кроется изюминка всей привлекательность кнопки.Лично я не вижу других преимуществ этого способа даже перед обычной картинкой или кнопкой.

Максимальное количество отображаемых подписчиков – 999.А дальше просто добавляется плюсик и наберите на своем канале хоть тясячу и одного, хоть миллион фанатов, на кнопке все-равно будет отображаться значение 999+.

После того, как Вы пробежитесь по всем составляющим конструктора нужно скопировать полученный код из одноименного окна.

Можете сохранить его в Блокноте, а можете сразу пройти на свой сайт и вставить в нужное место. Он будет работать в любой статье и в любом месте сайдбара.

Вставка кнопки на сайт

Соответственно для вставки в сайдбар нужно использовать HTML виджет, а при вставке в статью – блок HTML-код из арсенала редактора Gutenberg или режим вставки кода в редакторе TinyMCE.

Учтите, что после вставки кода изображение кнопки в итоге будет расположено слева.

Так и должно быть!
Потому что по умолчанию HTML выравнивает всё содержимое по левому верхнему углу блока. Поэтому для выравнивания кнопки посередине заключите код в теги <center></center>.

Способ этот немного непрофессиональный с точки зрения науки, но в данном случае такой же безотказный, как и автомат Калашникова.

Чтобы не парится всякий раз с генерацией кода и не искать его по документам на своем компьютере, самое оптимальное – добавить полученный код в Мои блоки редактора Gutenberg.

Но с моей точки зрения этой кнопки явно не хватает призыва на подписку, поэтому, если уж добавлять блок в редактор, то хотелось бы, чтобы него заранее был вшит и данный призыв.

Поэтому читайте следующую часть статьи, в которой я расскажу не только о добавлении призыва, но и о создании дизайна всего виджета в целом. Ваш виджет (блок) может в итоге выглядеть вот так:

Стилизованное оформление

Общие знания

Оформление начнем с понимания его конструкции.

Структура виджета

Наш виджет будет состоять из трех основных блоков:

  • блок призыва (подписаться или смотреть другие видео)
  • блок черты (необязательный элемент красивости)
  • блок непосредственно кнопки

Все три блока упакованы в один общий (внешний) блок.

Внимание!
В конце этой части статьи Вы сможете скопировать готовый код.
Все пояснения в этой части приведены для того, чтобы Вы могли стилизовать итоговый виджет под дизайн своего сайта.

Каждый из них для простоты понимания и последующей настройки мы можем поместить в универсальные контейнеры <div> и тогда их можно прописывать таком виде:

<div>определенный блок</div>

Контейнеры <div> хороши тем, что могут становится блоками, если им задавать определенные параметры (ширину, высоту, границы…).

Вместе с упаковкой во внешний блок все внутренности можно представить в таком виде:

<div>начало внешнего блока

<div>текст призыва</div>

<div>черта</div>

<div>кнопка</div>

окончание внешнего блока</div>

На деле все внутренние блоки разные по типу. Так, текст призыва – это текстовый блок, черта – сама по себе черта, а кнопка – вообще составной элемент. И из них по большому счету только кнопка требует, чтобы ее поместили в контейнер <div>.

Остальные блоки можно представить в коде в соответствии с их спецификацией. И тогда итоговая структура будет выглядеть так:

<div>начало внешнего блока

<p>текст призыва</p>

<hr>черта

<div>кнопка</div>

окончание внешнего блока</div>

Обратите внимание, что для черты прописывается только один тег <hr>.

Эти обозначения будут для вас компасом для редактирования кода виджета.

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

Позиционирование будем делать путем выравнивания по центру и определения внешних (margin) и внутренних (padding) отступов:

Виды отступов и границ
  • Выравнивание по центру непосредственно в коде блоки кнопки прописывается выражением margin-left:auto; margin-right:auto; Его удалять нельзя.
  • Расстояние по вертикали между блоками задается значениями внешних отступов margin-top и margin-bottom.
  • Специфичные настройки (могут потребоваться для позиционирования текста призыва) задаем через padding-top и padding-bottom.
  • Отступы margin-top и margin-bottom у внешнего блока позволяют выровнять весь блок виджета относительно других блоков на странице.
Оформление призыва

Для призыва будем использовать текстовый блок, который обозначается тегами <p></p>

<p>Текст призыва</p>

Выравнивать текст по центру будем параметром text-align:center;
Но это выравнивание будем прописывать непосредственно для стилей внешнего блока. Тем самым мы сэкономим немного места и минимизируем код виджета в целом.

Оформление текста, как и других блоков, мы будем производить через стили тега <p>, прописывая его свойства через точку с запятой:

<p style=”свойство1;свойство2;…;свойство…;“>Призыв</p>

Первым свойством в стилях зададим параметры самого текста:

Описание свойств шрифта надписи с призывом

В записи свойств шрифта Вы можете менять все параметры, обязательно оставляя фразу sans-serif, прописанную через запятую после названия шрифта .

К сожалению цвет придется задать отдельно через атрибут color, например: color: #f80f30;

Его вы также можете выбрать исходя из своего дизайна.

Текстовому блоку также можно задавать границы (border).

При задании границы не стоит использовать черту.
Вы должны выбрать что-то одно.
В конце вы сможете скопировать 2 варианта кода виджета: только с границей или только с чертой.

В данном случае используется нижняя граница с перечислением параметров один за другим:

border-bottom: тип_линии толщина_линии цвет;

Типы линии выбираете на свой вкус, но в моем коде будет показана сплошная:
dotted – линия из набора точек
dashed – пунктирная линия
solid – сплошная линия.
double – двойная линия
groove – вдавленная линия
ridge – рельефная линии.

Толщину линии указываете в пикселях (px), например, 1px. Цвет просто указываете в виде #f80f30 (атрибут color в данном случае не используется).

Итоговая запись фрагмента границы в общем коде призыва будет выглядеть, например, так:

border-bottom: solid 1px #f80f30;

Поскольку речь идет об отступе нижней границы, то отступ границы будем задавать через cвойство padding-bottom. Его величину задаем через пиксели:

padding-bottom: 18px;

При настройке старайтесь сделать так, чтобы расстояние от границы до низа надписи примерно равнялось расстоянию от границы до верхнего края кнопки.

Черта в виджете отображается с заданной шириной, а нижняя граница, если ею дополнить код призыва, будет отображаться на всю допустимую ширину блока (экрана в мобильном).
В этом их принципиальное отличие!

Код текстового призыва в варианте без границы будет примерно таким:

<p>Призыв подписаться</p>

Запись кода текстового призыва с границей:

<p>Призыв подписаться</p>

Данный способ оформления текста позволяет с легкостью сделать текст разным цветом. Для этого достаточно заключить изменяемую часть текста в теги <span></span> с назначением другого цвета.

Схематично задание разных цветов можно представить так:

<p style=”…;цвет1;…;”>Текст <span style=”цвет2;“>призыва</span></p>

Полная запись варианта кода без обозначения нижней границы выглядит вот так:

<p>Призыв <span>подписаться</p>
Черта

Её исполнение разберем сразу на готовом коде. Так будет проще!

<hr>

Из незнакомых элементов в коде появляется свойство display: block;, предписывающее браузеру рассматривать нашу черту, как блочный элемент. Это обязательный элемент, не подлежащий изменению.

Также новым элементом является атрибут ширины width, значение которого в примере выше показано чуть большим, чем будет задана ширина кнопки. Вы можете изменять ширину на свое усмотрение.

Непосредственное представление черты задано через свойство border, в котором вы можете вносить аналогичные изменения, которые мы разбирали для border-bottom, при оформлении текста призыва.

Отступы заданы через знакомые свойства margin. Так как черта средний элемент в нашем гамбургере, то указанием отступов для нее можно отлично расставить на заданное расстояние призыв и кнопку.

Блок кнопки Подписаться

Высота и ширина кнопки, а также предустановленные значения внутренних отступов заданы самим конструктором. В варианте полного отображения (с логотипом и названием) мы также не сможем никак повлиять на взаимное расположение всех элементов между собой.

Давайте сразу определимся какими параметрами мы будем модернизировать штатную кнопку.

Высоту мы прописывать не будем. Пусть останется заданной по умолчанию самим конструктором. Ширину придется указать явно для простоты выравнивания кнопки по центру.

Стандартная ширина кнопки близка к 190px, а в готовом коде она будет задана значением width:192px. Эта наиболее оптимальная ширина относительно которой будем строить внутренние отступы.

Посредством отступов мы зададим размер фоновому полю кнопки и в дальнейшем нарисуем рамку вокруг него.

Отступы будем записывать не для каждой стороны отдельно, а последовательно в определенном порядке.

Последовательность задания отступов

Проще запомнить эту последовательность сопоставив ее с часами: начало на 12 часах, далее 3 часа, 6 часов и 9 часов. Так вы точно не запутаетесь в коде отступов. Фрагмент с отступами будет таким:

padding:10px 2px 2px 2px;

Фон просто задается указанием цвета для свойства background-color:

background-color:#eaf3f6;

Рамка на кнопке задается также последовательной прописью значений:

border:1px solid #4d7d97;

Вы можете задать скругление углам кнопки через свойство border-radius, указав значение от 1 до 5px. Больше делать не стоит! В коде кнопки будет прописано значение border-radius:0px;

Если вы не будете задавать радиусы по углам, то этот участок кода можно смело удалить, потому что по умолчанию в html радиус итак равен нулю.

<div>Код, скопированный из конструктора</div>

В этом коде также прописана тень через свойство box-shadow. Я не буду расписывать что и зачем стоит в значениях. В готовом коде они будут прописаны аналогичными, как и в моем виджете. А видоизменить параметры под себя вы с легкостью сможете, например, вот в этом онлайн-конструкторе теней.

Готовые для копирования коды кнопки

Наконец-то мы добрались до заключительного этапа!

Ниже приведены обещанные коды кнопок. Скопируйте нужный в текстовый документ и вставьте вместо надписи идентификатор_канала ID своего видеоканала. А уже после этого можете добавлять код на сайт.

Код кнопки со сплошным подчеркиванием

Подписаться на мой видеоканал

<div>
<p>Подписаться <span>на мой видеоканал</span></p>
<div>
<script src="https://apis. google.com/js/platform.js"></script>
<div data-channelid="идентификатор_канала" data-layout="full" data-count="default"></div>
</div></div>

Код кнопки с чертой

Подписаться на мой видеоканал

<div>
<p>Подписаться <span>на мой видеоканал</span></p>
<hr>
<div>
<script src="https://apis.google.com/js/platform.js"></script>
<div data-channelid="идентификатор_канала" data-layout="full" data-count="default"></div>
</div></div>

Как я уже писал во второй части статьи, после всех настроек можно сохранить полученный код в Мои блоки редактора Гутенберг, чтобы потом при написании статей вставлять его одним движением в нужное место.

На посошок

В свое время, когда я только набирал на своем видеоканале первую тысячу подписчиков, данная кнопка радовала меня каждый раз, когда я заходил на сайт. С каждым днем числовое обозначение росло…

Тогда кнопка у меня стояла в правом сайдбаре и я думаю, что в деле роста моих видеопоклонников она сыграла достойную роль.

Потом, когда на кнопке высветились 999+ я поймал себя на чувстве гордости за свой труд. И уверен, что кое-кого из моих зрителей привлекла интрига: сколько же на самом деле у меня подписчиков?

А теперь мне снова хочется, чтобы и у меня и у читателей моего сайта было представление о положении дел на моем видеоканале. Так может быть периодически уточнять эти данные?

Как вам, например, такое представление кнопки?

Подписаться на мой видеоканал

Это фотошоп. Плюсик в такой картинке можно оставить, а сами цифры периодически уточнять по мере роста показателей.

Если вы добавили код виджета в Мои блоки, то приятным бонусом будет то, что когда вы поменяете картинку в коде и снова пересохраните, то автоматически обновятся все вставленные на сайте виджеты подписок.

То есть посетитель в любой статье сможет увидеть реальные данные. Как вам такой финт?

Пишите в комментариях что вы думаете на эту тему. Насколько вообще доступна статья для понимания?

Сергей Почечуев

Как добавить кнопку Подписаться на YouTube канал на свой сайт

Каждая популярная социальная сеть имеет в своем активе некий набор виджетов, которые позволяют отображать количество подписчиков, возможность подписки, поставить лайк и тому подобное. И предлагают простой способ добавления такого виджета на свой сайт.

В предыдущей статье мы рассмотрели практический пример добавления виджета страницы в Facebook на свой сайт. А в сегодняшней статье мы рассмотрим то, как на практике добавить виджет с кнопкой Подписаться на YouTube-канал на свой собственный сайт. С помощью YouTube Subscribe Button пользователи вашего сайта смогут подписаться на ваш канал YouTube одним нажатием кнопки, и для этого им не нужно переходить на YouTube. Такую кнопку можно разместить на всех страницах сайта и в любой месте.

 

 

YouTube, как и Facebook, также делает процесс добавления своих виджетов на другие сайты достаточно простым. Давайте рассмотрим, как на практике происходит данный процесс.

 

 

Шаг №1. Настройка виджета с кнопкой подписать на YouTube канал

Перейдите на страницу Как настроить кнопку, и здесь вы сможете настроить отображение кнопки с помощью инструмента подбора параметров.

В первом параметре введите имя канала или его идентификатор. Узнать идентификатор канала довольно просто. Зайдите на страницу канала и отройте вкладку

О канале. Идентификатор канала будет виден в адресной строке. Ниже показан пример идентификатора на примере нашего канала SebWeo.

 

Также идентификатор можно узнать из своего аккаунта в YouTube по этому адресу.

 

  • Дальше в параметрах выберите нужный вариант для Макета: полный (с отображением лого и названия канала) или по умолчанию (только кнопка).
  • Выберите фон для кнопки: темный или по умолчанию (светлый).
  • Выберите значение для отображения числа подписчиков канала.

 

Вот пример того, как выглядит блок с параметрами.

 

 

Шаг №2. Добавление кода виджета на свой сайт

После того, как вы настроили все нужные параметры для кнопки, вы увидите блок с готовым кодом для вставки.

 

 

Теперь вам осталось только скопировать весь этот код и добавить его в HTML код в любом месте вашего сайта.

Ниже пример того, как отображается кнопка с подпиской на YouTube канал.

 

 

 

Можете ее протестировать и подписаться на наш канал 🙂

 

Вот и все на сегодня. Спасибо, что читаете нас!

 

 

Теги: Web

  • 3678