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

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

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

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



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


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



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



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



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

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

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


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


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


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


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

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



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

7 комментариев:

  1. Мария, вы не представляете, насколько удачно я попала на этот МК! Я в нем очень нуждалась, т.к. последние дни пыталась вставить в свой блог кнопку от сайта Pinterest, но никак не могла понять, как это сделать! Теперь все ясно, могу добавить любой виджет!) Спасибо!

    ОтветитьУдалить
    Ответы
    1. Рада, что пригодилось, пользуйтесь на здоровье)

      Удалить
  2. Очень актуально и полезно! Спасибо!!! уже воспользовалась ;)
    Маша, с возвращением в блог ))

    ОтветитьУдалить
  3. Спасибо большое! Я хоть и не новичок на блогере, но информация для меня оказалась очень ценной!) добавила инстаграм уже себе))

    ОтветитьУдалить
    Ответы
    1. Женя, очень рада, что пригодилась информация) Не зря писала значит)
      Прогулялась по Вашему блогу - очень понравилось, фото просто супер)!

      Удалить

Оставьте свой комментарий - я буду рада)!