Недавно "копалась" в блоггера и интернете, чтобы вставить виджет инстаграма на боковую панель блога. Я полный чайник в этих вопросах, но все-таки мне удалось это сделать, решила, что кому-то может пригодится эта информация))
Итак, если вы хотите поставить виджет инстаграм у себя в блоге, то вам нужно воспользоваться сервисом сайта http://snapwidget.com что очень удобно - там не нужно регистрироваться и не нужно ничего платить.
Переходите по ссылке и чуть спустившись вниз, увидите вот токую табличку:
Пишем (можно и не писать) название гаджета, потом вставляем в содержание наш скопированный код и нажимает сохранить.
Кстати, если вдруг гаджет все-таки окажется шире вашей панели в блоге, то его легко уменьшить в самом коде, изменив последние цифры, видите в коде 390px -вот меняя эти цифры, вы сможете уменьшить или увеличить размер гаджета.
Итак, если вы хотите поставить виджет инстаграм у себя в блоге, то вам нужно воспользоваться сервисом сайта http://snapwidget.com что очень удобно - там не нужно регистрироваться и не нужно ничего платить.
Переходите по ссылке и чуть спустившись вниз, увидите вот токую табличку:
1. В первой строчке пишите свой логин в инстаграм, например у меня это yuliyasechkina
Или ниже можно указать хештег, но я заполнила первую.
2.The type of widget to display your photos in - Тип виджета для отображения фотографий
Можно выбрать, как будут размещаться ваши фотографии , я оставила тот, что предлагают первым: grid - сетка, решетка
3.The size of each of the photos in the widget - Размер каждой фотографии в виджете.
Размер можно увеличить или уменьшить, зависит это от ширины вашей панели в блоггере. Мне пришлось уменьшить до 75, чтобы виджет не вылезал за пределы ширины моего блога.
4. The number of photos across and down. Max 60. - Количество фотографий по горизонтали и вертикали. Max 60. Я установила 3 на 3 фотографии, но можно уменьшить или увеличить число фотографий.
5. Should a border be displayed around each photo - граница будет отображаться вокруг каждого фото.
Можно выбрать обрамлять каждую фотографию рамкой или нет.
6. Background of the widget. Leave empty for transparent. - Фон виджета. Оставьте пустым для прозрачной.
Я оставила прозрачным, но вы можете выбрать любой цвет.
7. Amount of space between each phot - Промежуток между каждой фотографией. Я уменьшилась до 3-х.
8. Effect applied when a visitor hovers their mouse over a photo in the widget - Эффект применяется, когда посетитель наводит мышь на фото в виджете (фото тускнеет или становится ярче) я не стала ставить.
9. Adds sharing buttons to each photo in the widget for easy sharing - Добавляет кнопки общего доступа для каждого фото в виджете для легкого обмена. Это кнопки соц.сетей
Дальше нажимаем зеленую кнопочку
Размер можно увеличить или уменьшить, зависит это от ширины вашей панели в блоггере. Мне пришлось уменьшить до 75, чтобы виджет не вылезал за пределы ширины моего блога.
4. The number of photos across and down. Max 60. - Количество фотографий по горизонтали и вертикали. Max 60. Я установила 3 на 3 фотографии, но можно уменьшить или увеличить число фотографий.
5. Should a border be displayed around each photo - граница будет отображаться вокруг каждого фото.
Можно выбрать обрамлять каждую фотографию рамкой или нет.
6. Background of the widget. Leave empty for transparent. - Фон виджета. Оставьте пустым для прозрачной.
Я оставила прозрачным, но вы можете выбрать любой цвет.
7. Amount of space between each phot - Промежуток между каждой фотографией. Я уменьшилась до 3-х.
8. Effect applied when a visitor hovers their mouse over a photo in the widget - Эффект применяется, когда посетитель наводит мышь на фото в виджете (фото тускнеет или становится ярче) я не стала ставить.
9. Adds sharing buttons to each photo in the widget for easy sharing - Добавляет кнопки общего доступа для каждого фото в виджете для легкого обмена. Это кнопки соц.сетей
Дальше нажимаем зеленую кнопочку
Get Widget
появляется код:
появляется код:
копируем его и идем в раздел Дизайн в блоггере
Справа нажимаем Добавить гаджет и из списка и выбираем добавление кода HTML
Кстати, если вдруг гаджет все-таки окажется шире вашей панели в блоге, то его легко уменьшить в самом коде, изменив последние цифры, видите в коде 390px -вот меняя эти цифры, вы сможете уменьшить или увеличить размер гаджета.
Сохраняет наши изменения и любуемся результатом))
Спасибо за подробную инструкцию!!! Интересно было бы почитать как добавлять другие инструменты))
ОтветитьУдалитьСпасибо :) А какие именно нужны?
Удалитьогромное спасибо! просто и красиво!
ОтветитьУдалитьСпасибо! Рада, что понравилось! Я старалась :)
УдалитьОчень полезная информация, и просто все. Мне помогло, спасибо!
ОтветитьУдалитьСпасибо,всё настроила без проблем
ОтветитьУдалитьОГРОМНОЕ вам спасибо за информацию!! Я уже почти год бьюсь с этим блогпостом, первый раз в жизни всё с первого раза получилось!)) Спасибо большое!!!!!))))
ОтветитьУдалитьСпасибо ОГРОМНОЕ! А то я уже голову сломала, как прицепить к блогу ссылочку на инстаграм))
ОтветитьУдалитьЮля, спасибо! По твоему МК установила и у себя виджет )
ОтветитьУдалитьСПАСИБО ВСЕМ за комментарии - очень радостно, что кому-то пригодилась эта информация! Значит не зря было потрачено время :) на написание поста!
ОтветитьУдалитьБольшое спасибо! Очень пригодилась информация, уже добавила у себя в блоге)
ОтветитьУдалитьСпасибо огромное! очень пригодилось для моего свежего блога)))
ОтветитьУдалитьСпасибо за МК - оказалось полезно)
ОтветитьУдалитьспасибо большое, это очень вовремя! -)))
ОтветитьУдалитьОгромное спасибо)
ОтветитьУдалитьhttp://elpise.blogspot.com/
Спасибо большущее! Это самый доходчивый и простой способ, который я смогла найти! Все получилось, еще раз, благодарю!
ОтветитьУдалитьТеперь этот виджет почему то ведет на сайт снап виджет и андройд жалуется на вредоносный контент
ОтветитьУдалитьПохожий сервис - ejfe.ru/widget . Точно так же, добавь ссылку на профиль и вставь код. Еще и твиттер с vk поддерживает. Еще и на русском, и дизайн поинтересней.
Удалитьспасибо за совет!
ОтветитьУдалитьспасибо, очень полезный пост)
ОтветитьУдалитьСпасибо, Вам за проделанную работу!
ОтветитьУдалитьСпасибо за фотографии к инструкции! Очень помогли)
ОтветитьУдалитьСпасибо большое! все получилось!
ОтветитьУдалитьСпасибо Вам большое, очень полезная статься!!! :))))
ОтветитьУдалитьОгромное спасибо! Очень подробно и легко!))) Сделала за 2 минуты!))
ОтветитьУдалитьЮля, спасибо за полезный пост!) Все получилось :)
ОтветитьУдалитьбольшое спасибо!
ОтветитьУдалитьСпасибо! Здорово!
ОтветитьУдалитьСпсибо!
ОтветитьУдалитьОгромное спасибо
ОтветитьУдалитьспасибо за совет
ОтветитьУдалитьСпасибо большое))) вы большая молодец, поделились самым важным для новорожденного блога)))
ОтветитьУдалитьСпасибо большое! понятно, доступно)))
ОтветитьУдалитьСпасибо! Все получилось!
ОтветитьУдалитьОгромное спасибище!!! Тепла и добра в вашу карму����
ОтветитьУдалитьспасибо!
ОтветитьУдалитьОгромное спасибо!!! Все очень понятно и просто, вот бы и про все остальное так же! :) Хоть с этим справилась :) а то столько времени уже потратила, а с места не сдвинулась.
ОтветитьУдалитьВот спасибо! Заняло 5 минут вместе с чтением)))))
ОтветитьУдалитьСПАСИБО!!! очень выручили!!!
ОтветитьУдалитьОгромное спасибо
ОтветитьУдалитьСпасибо большое! Очень полезная статья!
ОтветитьУдалить