Как сделать кликабельный баннер ВКонтакте за 5 минут. Мастер класс

Описание: Нужно срочно сделать кликабельный баннер ВКонтакте для рекламы? Этот способ позволит Вам сделать баннер ВКонтакте за 5 минут. При этом Вам даже не придется набирать ни одной буквы. Супер-метод!
Ссылка на сайт, для которого сделан баннер https://goo.gl/Tvu8vv
--------------------------------------------------------------------------------------------------
Ссылка на мой сайт: http://prostodelaytak.ru
Постоянная ссылка на видео:
   • Как сделать кликабельный баннер ВКонтакте ...  
Я в ВКонтакте: https://vk.com/id145028382
Ссылка на мой канал:
   / @prostodelaytak  
----------------------------------------------------------------------------------------------------
Вы не поверите, но вот этот кликабельный баннер в группе ВКонтакте я сделал не набрав ни одной буквы. При этом на его изготовление у меня ушло что-то около 5 минут. Вполне возможно, что и вас выручит этот способ, особенно в ситуации, когда нужно сделать срочно, а времени в обрез.
Весь секрет такого быстрого банера кроется в том, что делал я его из скриншота вот этой страницы. А сам процесс сводится к тому, чтобы разместить фрагменты скриншота в нужном месте. Но как вы видите, просто сделать скриншот данной страницы и потом перетаскивать его элементы не получится из-за того, что все тексты расположены на фоне картинки. Пусть картинка и затемненная, но все перемещения фрагментов скриншота будут сразу заметны.
Обычно я, когда делаю такие баннеры и когда есть время, скачиваю картинку с исходной страницы и потом уже на ее основе делаю баннер. Но вчера у меня времени было в обрез и я пошел совсем по другому пути и скорее всего этот способ буду использовать в качестве основного способа изготовления баннеров на конкретные web-страницы.
Итак, что я сделал? Практически каждый браузер в котором вы работаете поддерживает так называемые инструменты разработчика. То есть может показывать коды и параметры Всех элементов, расположенных на странице.
Чтобы включить этот режим, нужно сделать Клик правой кнопкой мыши непосредственно на странице. В выпадающем меню выбрать команду "Просмотреть код". Я работаю в браузере Google Chrome, в других браузерах эта команда будет называться по другому, но она всегда будет самой последней в открывшемся меню.
В общем, Выбирайте данную команду и окно вашего браузера делится на 2 части. Слева вы будете видеть изображение страницы, а справа непосредственно коды элементов страницы.
Слева над страницей Вы будете видеть текущий размер фрейма страницы. Если кликнуть вот по этому значку, то можно увидеть, другие возможные варианты отображения данной страницы. Но нам нужен именно режим "Респонсив", который позволяет задавать ширину страницы вручную. Мне нужно установить ширину равной или чуть большей значения 1074 px, которая соответствует удвоенному значению минимально допустимой картинки для кликабельных картинок в ВКонтакте.
Этот режим хорош тем, что если сделать еще раз Клик правой кнопкой мыши на любом из элементов и также выбрать команду "Просмотреть код", то вы будете видеть справа код и параметры непосредственно выбранного элемента.
Сейчас меня интересует фоновая картинка. Чтобы найти ее параметры, нужно сделать клик в верхней части отображаемой страницы. При этом она должна выделиться вот так. С правой стороны В верху вы уже увидите код, в котором прописана фоновая картинка, точнее ссылка на неё.
Если я сейчас удалю данную ссылку, во всех подобных страницах, Академии интернет-профессий номер один, на фоновую картинку накладывается ещё один немного прозрачный слой, чтобы приглушить фоновую картинку и сделать ее более контрастной для нанесенных надписеё. Обычно в таких случаях применяют в черный цвет или близкий к нему оттенок.
Поэтому сейчас, когда я уберу ссылку, на на её месте останется поля залитое тем самым чёрным цветом. Но удалять ссылку на картинку лучше всё-таки не здесь, а вот в этом месте.
Потому что вот здесь ниже указана непосредственно параметры. В данном случае указана ссылка. В принципе, если вы уже имеете какой-то определенный опыт работы с правкой кодов страницей через инструменты разработчика, то вы с легкостью можете вместо данных картинки поставить ссылку на какую-то свою. Ближе к концу видео я вам покажу что при этом получится и какого результата можно добиться, но сейчас будем исходить из того, что вы ни разу этого не делали.