Галерея фото из Instagram

Решила для себя написать простую инструкцию как отобразить галерею фоток из Инстаграма. О какой галерее идет речь, можно посмотреть в моем блоге по рукоделию creative.nata.cv.ua, внизу страницы там есть раздел "Одежда для кукол".


Эта галерея у меня в блоге уже была, но в какой-то момент она поломалась и пришлось вспоминать все заново. Лучший способ опять не забыть - написать шпаргалку. Может быть и еще кому-то пригодятся мои заметки.

Виджет lightwidget

Для галереи у меня был выбран виджет с сайта https://lightwidget.com/ На сайте сть бесплатные и платные функции, лично мне бесплатного функционала вполне хватает. 

Итак, открываем сайт https://lightwidget.com/
Здесь сразу же доступна форма конструктора галереи:

Для пользования сервисом нужно залогиниться через кнопку "Log in with Instagram". При логине запрашивается доступ к фото и видео из вашего профиля инстаграма:

После логина будут отображаться фотки из профиля инстаграма и далее можно заполнять форму для настройки виджета. Форма очень простая, так что тут без комментариев, заполню как мне нужно:


В поле "Type of widget" доступны три варианта: Grid, Slideshow, Columns (Pinterest style). Мне нужен Slodeshow.

Под формой две кнопки: "Preview" - генерирует виджет и справа показывает результат, кнопка "Get Code!" позволяет получить код виджета:

Копируем сгенерированный код в буфер обмена и дальше вставляем этот код в шаблон блога. У меня в дизайне блога для этой галереи есть специальный блок section-ads2:

Нажимаю "изменить" и вставляю код сюда:

На этом все. Сохраняем код, открываем блог и любуемся результатом.

Кстати, на сайте https://lightwidget.com/ хранятся все сгенерированные виджеты, их в любой момент можно посмотреть или исправить.


Виджет snapwidget

Еще пару слов про другой сервис, который я начала пробовать, но до конца не доделала, не понравилось.

Это сайт https://snapwidget.com. Регистрация здесь осуществляется через логин/емейл или форму фейсбука. Настройки виджета в бесплатной версии весьма скромные.

Виджет со скроллингом тоже есть:

Но мне результат совсем не понравился, так что к себе на сайт я даже не пыталась встраивать этот виджет.

Наверняка есть и другие сервисы для генерации кода инстаграм-галереи, если знаете что-то более удобное - пишите. У себя оставила lightwidget.com, меня он вполне устраивает. 


© KiNata
03/06/2018

Шаблоны для интернет-магазина на blogger (обновлено)

Ранее я уже делала заметку с шаблонами для интернет-магазина (Шаблоны для интернет-магазина на blogger), теперь вот пришло время поискать что появилось нового на просторах интернета.

Итак, первые два шаблона продублирую из предыдущего поста и к ним добавлю несколько новых шаблонов.

BetaCommerce

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

 



Mega Shop

Этот респонсивный дизайн идельно подойдет для интернет-магазины одежды или похожей тематики. Среди возможностей шаблона есть просмотр каталога товаров, помещение товара в корзину, оплата заказа.




Storemag Online Shop Blogger Template

Этот шаблон подходит для любого интернет-магазина или любого веб-сайта электронной коммерции. Респонсивный дизайн и функционал, позволяющий работать с корзиной товаров, делает тему идеальным шаблоном веб-сайта для продвижения и продажи продукта.





Sora Store Blogger Template

Sora Store - это тоже респонсивный шаблон. Шаблон простой в использовании, полностью настраивается и подходит для любого магазина электронной коммерции. Работает на любом экране: настольный компьютер, планшет, мобильный телефон.






Ну и на досуге можно еще посмотреть дизайны, подходящие для магазинов: 25+ Best Free Online Shopping Store Blogger Templates





Как удалить контакты Skype из адресной книги телефона

В телефонной книге смартфона по умолчанию отображаются все контакты из skype, а также некоторых других социальных сетей. Но у большинства таких контактов не подключен номер телефона, тогда зачем мне эти контакты в моей телефонной книге?


Все эти контакты присутствуют в общем списке контактов, а на вкладке "Группы" они объединены в отдельную группу:



Дабы не засорять телефон ненужной информацией пришлось искать метод как удалить эти контакты. Поиск в интернете выдает некоторые советы, порой весьма странные. 

Совет 1. Удалить ненужную группу контактов

Это был самый простой совет. На вкладке "Группы" это сделать можно, но это не приведет к нужному результату, т.к. удалится только группа, а сами контакты, входящие в эту группу, останутся в телефонной книге.

Совет 2. Удалить приложение скайпа, а потом удалить ненужные контакты

Метод странный если вам все-таки нужен скайп в телефоне. Но тем не менее в качестве эксперимента я попробовала и этот метод. Результат меня тоже не устроил. Во-первых, для удаления всех контактов нет никакой групповой команды, т.е. придется удалять каждый контакт по отдельности. А, во-вторых, оказалось, что в телефоне Sony Xperia Z3 Compact в принципе отсутствует возможность удаления этих контактов. При попытке удалить контакт скайпа телефон мне сообщил что не может это сделать:




Совет 3. Включить фильтр контактов в адресной книге

Суть этот метода достаточно простая - фильтровать контакты, отображаемые в телефоне. Для этого надо открыть адресную книгу, выбрать команду "Настройки - Фильтр", затем в группе "Отобразить контакты" надо просто отключить галочку напротив названия вашего скайп-аккаунта:


Этот метод работает, после этого нет контактов из скайпа, как и нет соответствующей группы:

Но через какое-то время у меня почему-то эти контакты опять появились. То ли какой-то сброс телефона был, то ли еще что-то. В общем пришлось продолжить поиски решения проблемы.

Совет 4. Отключить отображение этих контактов в skype

Это уже мой личный совет, результат которого меня полностью устроил. Суть состоит в том, чтобы отключить копирование контактов из скайпа в записную книжку телефона. Для этого надо открыть приложение скайпа, зайти в настройки и там найти группу команд "Контакты". Здесь нам нужна команда "Копировать в записную книжку":

Эта опция содержит два возможных варианта - копировать или нет контакты в записную книжку. Выбираем "Не копировать контакты" и нажимаем ОК:

Все, после этого контакты из скайпа, а также сама группа контактов скайпа, исчезнут из телефона.


Подключение fancybox к блогу


В стандартных шаблонах для blogger по умолчанию все изображения открываются во всплывающем окне, при этом используется технология lightbox. Но, к сожалению, в новых шаблонах, созданных сторонними разработчиками, такая возможность отсутствует. Альтернативным вариантом может быть подключение библиотеки fancybox. Рассмотрим, как это сделать.

Для реализации задуманного пришлось перепробовать разные варианты, пока все не заработало как надо. 

Итак, для подключения fancybox надо выполнить следующие шаги:

1. Открыть код шаблона командой Шаблон - Изменить HTML.

2. Проверить, подключен ли в шаблоне jQuery, в большинстве случаев современные шаблоны уже включают строку для подключения этой библиотеки:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"> 
</script> 

3. В конце шаблона перед тегом </body> добавить код:

<script src="https://sites.google.com/site/fowziey/jquery.fancybox-1.3.4.js" type="text/javascript"></script>
<script type="text/javascript"> 
//<![CDATA[ 
$(document).ready(function() {
//build a selector that targets all links ending in an image extension
var thumbnails = 'a[href$=".gif"],a[href$=".jpg"],a[href$=".jpeg"],a[href$=".png"],a[href$=".GIF"],a[href$=".JPG"],a[href$=".JPEG"],a[href$=".PNG"]';

//add "fancybox" class to those (this step could be skipped if you want) and group them under a same "rel" to enable previous/next buttons once in Fancybox
jQuery(thumbnails).addClass("fancybox").attr("rel","lightbox");

//call fancybox
jQuery('.fancybox').fancybox();
});
//]]> 
</script>

4. Перед тегами ]]></b:skin> добавить код со стилями:

#fancybox-loading { 
 position: fixed; 
 top: 50%; 
 left: 50%; 
 width: 40px; 
 height: 40px; 
 margin-top: -20px; 
 margin-left: -20px; 
 cursor: pointer; 
 overflow: hidden; 
 z-index: 1104; 
 display: none; 
 } 
 #fancybox-loading div { 
 position: absolute; 
 top: 0; 
 left: 0; 
 width: 40px; 
 height: 480px; 
 background-image: url('https://sites.google.com/site/fowziey/fancybox.png'); 
 } 
 #fancybox-overlay { 
 position: absolute; 
 top: 0; 
 left: 0; 
 width: 100%; 
 z-index: 1100; 
 display: none; 
 } 
 #fancybox-tmp { 
 padding: 0; 
 margin: 0; 
 border: 0; 
 overflow: auto; 
 display: none; 
 } 
 #fancybox-wrap { 
 position: absolute; 
 top: 0; 
 left: 0; 
 padding: 20px; 
 z-index: 1101; 
 outline: none; 
 display: none; 
 } 
 #fancybox-outer { 
 position: relative; 
 width: 100%; 
 height: 100%; 
 background: #fff; 
 } 
 #fancybox-content { 
 width: 0; 
 height: 0; 
 padding: 0; 
 outline: none; 
 position: relative; 
 overflow: hidden; 
 z-index: 1102; 
 border: 0px solid #fff; 
 } 
 #fancybox-hide-sel-frame { 
 position: absolute; 
 top: 0; 
 left: 0; 
 width: 100%; 
 height: 100%; 
 background: transparent; 
 z-index: 1101; 
 } 
 #fancybox-close { 
 position: absolute; 
 top: -15px; 
 right: -15px; 
 width: 30px; 
 height: 30px; 
 background: transparent url('https://sites.google.com/site/fowziey/fancybox.png') -40px 0px; 
 cursor: pointer; 
 z-index: 1103; 
 display: none; 
 } 
 #fancybox-error { 
 color: #444; 
 font: normal 12px/20px Arial; 
 padding: 14px; 
 margin: 0; 
 } 
 #fancybox-img { 
 width: 100%; 
 height: 100%; 
 padding: 0; 
 margin: 0; 
 border: none; 
 outline: none; 
 line-height: 0; 
 vertical-align: top; 
 } 
 #fancybox-frame { 
 width: 100%; 
 height: 100%; 
 border: none; 
 display: block; 
 } 
 #fancybox-left, #fancybox-right { 
 position: absolute; 
 bottom: 0px; 
 height: 100%; 
 width: 35%; 
 cursor: pointer; 
 outline: none; 
 background: transparent url('https://sites.google.com/site/fowziey/fancy_blank.gif'); 
 z-index: 1102; 
 display: none; 
 } 
 #fancybox-left { 
 left: 0px; 
 } 
 #fancybox-right { 
 right: 0px; 
 } 
 #fancybox-left-ico, #fancybox-right-ico { 
 position: absolute; 
 top: 50%; 
 left: -9999px; 
 width: 30px; 
 height: 30px; 
 margin-top: -15px; 
 cursor: pointer; 
 z-index: 1102; 
 display: block; 
 } 
 #fancybox-left-ico { 
 background-image: url('https://sites.google.com/site/fowziey/fancybox.png'); 
 background-position: -40px -30px; 
 } 
 #fancybox-right-ico { 
 background-image: url('https://sites.google.com/site/fowziey/fancybox.png'); 
 background-position: -40px -60px; 
 } 
 #fancybox-left:hover, #fancybox-right:hover { 
 visibility: visible; /* IE6 */ 
 } 
 #fancybox-left:hover span { 
 left: 20px; 
 } 
 #fancybox-right:hover span { 
 left: auto; 
 right: 20px; 
 } 
 .fancybox-bg { 
 position: absolute; 
 padding: 0; 
 margin: 0; 
 border: 0; 
 width: 20px; 
 height: 20px; 
 z-index: 1001; 
 } 
 #fancybox-bg-n { 
 top: -20px; 
 left: 0; 
 width: 100%; 
 background-image: url('https://sites.google.com/site/fowziey/fancybox-x.png'); 
 } 
 #fancybox-bg-ne { 
 top: -20px; 
 right: -20px; 
 background-image: url('https://sites.google.com/site/fowziey/fancybox.png'); 
 background-position: -40px -162px; 
 } 
 #fancybox-bg-e { 
 top: 0; 
 right: -20px; 
 height: 100%; 
 background-image: url('https://sites.google.com/site/fowziey/fancybox-y.png'); 
 background-position: -20px 0px; 
 } 
 #fancybox-bg-se { 
 bottom: -20px; 
 right: -20px; 
 background-image: url('https://sites.google.com/site/fowziey/fancybox.png'); 
 background-position: -40px -182px;  
 } 
 #fancybox-bg-s { 
 bottom: -20px; 
 left: 0; 
 width: 100%; 
 background-image: url('https://sites.google.com/site/fowziey/fancybox-x.png'); 
 background-position: 0px -20px; 
 } 
 #fancybox-bg-sw { 
 bottom: -20px; 
 left: -20px; 
 background-image: url('https://sites.google.com/site/fowziey/fancybox.png'); 
 background-position: -40px -142px; 
 } 
 #fancybox-bg-w { 
 top: 0; 
 left: -20px; 
 height: 100%; 
 background-image: url('https://sites.google.com/site/fowziey/fancybox-y.png'); 
 } 
 #fancybox-bg-nw { 
 top: -20px; 
 left: -20px; 
 background-image: url('https://sites.google.com/site/fowziey/fancybox.png'); 
 background-position: -40px -122px; 
 } 
 #fancybox-title { 
 font-family: Helvetica; 
 font-size: 12px; 
 z-index: 1102; 
 } 
 .fancybox-title-inside { 
 padding-bottom: 10px; 
 text-align: center; 
 color: #333; 
 background: #fff; 
 position: relative; 
 } 
 .fancybox-title-outside { 
 padding-top: 10px; 
 color: #fff; 
 } 
 .fancybox-title-over { 
 position: absolute; 
 bottom: 0; 
 left: 0; 
 color: #FFF; 
 text-align: left; 
 } 
 #fancybox-title-over { 
 padding: 10px; 
 background-image: url('https://sites.google.com/site/fowziey/fancy_title_over.png'); 
 display: block; 
 } 
 .fancybox-title-float { 
 position: absolute; 
 left: 0; 
 bottom: -20px; 
 height: 32px; 
 } 
 #fancybox-title-float-wrap { 
 border: none; 
 border-collapse: collapse; 
 width: auto; 
 } 
 #fancybox-title-float-wrap td { 
 border: none; 
 white-space: nowrap; 
 } 
 #fancybox-title-float-left { 
 padding: 0 0 0 15px; 
 background: url('https://sites.google.com/site/fowziey/fancybox.png') -40px -90px no-repeat; 
 } 
 #fancybox-title-float-main { 
 color: #FFF; 
 line-height: 29px; 
 font-weight: bold; 
 padding: 0 0 3px 0; 
 background: url('https://sites.google.com/site/fowziey/fancybox-x.png') 0px -40px; 
 } 
 #fancybox-title-float-right { 
 padding: 0 0 0 15px; 
 background: url('https://sites.google.com/site/fowziey/fancybox.png') -55px -90px no-repeat; 
 } 
 /* IE6 */ 
 .fancybox-ie6 #fancybox-close { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://sites.google.com/site/fowziey/fancy_close.png', sizingMethod='scale'); } 
 .fancybox-ie6 #fancybox-left-ico { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://sites.google.com/site/fowziey/fancy_nav_left.png', sizingMethod='scale'); } 
 .fancybox-ie6 #fancybox-right-ico { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://sites.google.com/site/fowziey/fancy_nav_right.png', sizingMethod='scale'); } 
 .fancybox-ie6 #fancybox-title-over { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://sites.google.com/site/fowziey/fancy_title_over.png', sizingMethod='scale'); zoom: 1; } 
 .fancybox-ie6 #fancybox-title-float-left { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://sites.google.com/site/fowziey/fancy_title_left.png', sizingMethod='scale'); } 
 .fancybox-ie6 #fancybox-title-float-main { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://sites.google.com/site/fowziey/fancy_title_main.png', sizingMethod='scale'); } 
 .fancybox-ie6 #fancybox-title-float-right { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://sites.google.com/site/fowziey/fancy_title_right.png', sizingMethod='scale'); } 
 .fancybox-ie6 #fancybox-bg-w, .fancybox-ie6 #fancybox-bg-e, .fancybox-ie6 #fancybox-left, .fancybox-ie6 #fancybox-right, #fancybox-hide-sel-frame { 
 height: expression(this.parentNode.clientHeight   "px"); 
 } 
 #fancybox-loading.fancybox-ie6 { 
 position: absolute; margin-top: 0; 
 top: expression( (-20   (document.documentElement.clientHeight ? document.documentElement.clientHeight/2 : document.body.clientHeight/2 )   ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ))   'px'); 
 } 
 #fancybox-loading.fancybox-ie6 div { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://sites.google.com/site/fowziey/fancy_loading.png', sizingMethod='scale'); } 
 /* IE6, IE7, IE8 */ 
 .fancybox-ie .fancybox-bg { background: transparent !important; } 
 .fancybox-ie #fancybox-bg-n { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://sites.google.com/site/fowziey/fancy_shadow_n.png', sizingMethod='scale'); } 
 .fancybox-ie #fancybox-bg-ne { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://sites.google.com/site/fowziey/fancy_shadow_ne.png', sizingMethod='scale'); } 
 .fancybox-ie #fancybox-bg-e { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://sites.google.com/site/fowziey/fancy_shadow_e.png', sizingMethod='scale'); } 
 .fancybox-ie #fancybox-bg-se { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://sites.google.com/site/fowziey/fancy_shadow_se.png', sizingMethod='scale'); } 
 .fancybox-ie #fancybox-bg-s { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://sites.google.com/site/fowziey/fancy_shadow_s.png', sizingMethod='scale'); } 
 .fancybox-ie #fancybox-bg-sw { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://sites.google.com/site/fowziey/fancy_shadow_sw.png', sizingMethod='scale'); } 
 .fancybox-ie #fancybox-bg-w { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://sites.google.com/site/fowziey/fancy_shadow_w.png', sizingMethod='scale'); } 
 .fancybox-ie #fancybox-bg-nw { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://sites.google.com/site/fowziey/fancy_shadow_nw.png', sizingMethod='scale'); }


Это все изменения в шаблоне. Теперь можно создать пост с изображениями и проверить как открываются изображения.

Использованные материалы:
http://www.stylifyyourblog.com/2011/05/adding-fancybox-to-blogger.html
http://stackoverflow.com/questions/9760381/start-fancybox-on-all-anchor-tags-with-image-inside


Подключение шрифтов кириллицы в шаблонах blogger

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