Недавно "копалась" в блоггера и интернете, чтобы вставить виджет инстаграма на боковую панель блога. Я полный чайник в этих вопросах, но все-таки мне удалось это сделать, решила, что кому-то может пригодится эта информация))
Итак, если вы хотите поставить виджет инстаграм у себя в блоге, то вам нужно воспользоваться сервисом сайта 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 минут вместе с чтением)))))
ОтветитьУдалитьСПАСИБО!!! очень выручили!!!
ОтветитьУдалитьОгромное спасибо
ОтветитьУдалитьСпасибо большое! Очень полезная статья!
ОтветитьУдалить