Как добавить в блог виджеты вконтакте и инстаграм

Всем доброго дня)!

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

Также я добавила на боковую панель две полезные штуки - виджеты моей группы вконтакте и профиля в Инстаграм. Этим я с вами сегодня и поделюсь).

Сначала переходим по ссылке http://vk.com/dev/Community - специальный сервис для добавления данного виджета на свой сайт. В поле "Ссылка на  страницу" вписываем адрес своей группы. Здесь же можно поменять ширину и высоту, а можно пока это пропустить, позже это все легко меняется)

Далее копируем полностью текст из поля "Код для вставки". Переходим в свой блог, заходим в настройки - пункт "Дизайн", добавляем на боковую панель новый гаджет "HTML/JavaScript", вставляем в поле "Содержание" код, который мы ранее скопировали. Нажимаем "Сохранить". Перемещаем гаджет на нужное место). Нажимаем в право верхнем углу браузера оранжевую кнопку "Сохранить расположение"

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

Для этого нажимаем на значок отвертки и ключа и редактируем код). Красным я подчеркнула нужные цифры - width - ширина и height - высота. Меняем эти цифры в нужную сторону, пока результат вам не понравится).

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

Переходим о ссылке http://ejfe.ru/widget. Вставляем в поле со значком ИГ ссылку на свой профиль. Настраиваем параметры отображения, здесь главное в пункте "Размер" указать нуное количество фото, по умолчанию стоит 3*2, я для себя сделала 3*3 фото. Все размеры опять же можно поменять позже). Нажимаем кнопку "Получить код", копируем его.

Кстати на этом же сервисе можно создать виджеты и для других соцсетей).

Переходим в свой блог, заходим в настройки - пункт "Дизайн", добавляем на боковую панель новый гаджет "HTML/JavaScript", вставляем в поле "Содержание" код, который мы ранее скопировали. Нажимаем "Сохранить". Перемещаем гаджет на нужное место). Нажимаем в право верхнем углу браузера оранжевую кнопку "Сохранить расположение"

Открываем свой блог, любуемся на огромный виджет)

Смотрится это все совсем некрасиво, поэтому опять нажимает на значок настроек рядом с виджетом и видим следующую картинку:

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

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

Буду рада, если вам пригодится эта информация, если что-то неясно - пишите в комментариях, постараюсь ответить).