Шаблоны для интернет-магазина на 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

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




Как добавить Facebook Open Graph мета теги к блогу

При попытке поделиться постом блоггера в фейсбуке обычно не правильно отображается информация, а именно: не подгружается картинка и не добавляется описание сайта. Чтобы исправить это, необходимо добавить в исходный код страницы метатеги, необходимые для соц.сетей. Ниже описано как именно это сделать. 

В оригинале статьи (http://www.technohalf.com/2015/01/how-to-add-facebook-open-graph-to-blogger-blog.html) описаны некоторые особенности, а также то, где брать ID для вашего приложения. Я же здесь привожу не всю статью целиком, а только ее часть.


Для facebook существуют специальные open-graph мета теги, которые должны быть размещены на странице между тегами <head> </head>. Эти теги позволяют задать заголовок, описание и изображение для сообщения, которым вы собираетесь поделиться в социальной сети.
Базовые Open Graph теги включают:
  • og:title = заголовок, например, "Как добавить Facebook Open Graph мета теги к блогу"
  • og:url = URL сообщения, например, "http://it.nata.cv.ua/2016/04/how-to-add-facebook-open-graph-to.html"
  • og:description =  описание сообщения
  • og:image = URL изображения размером минимум 200×200 пикселей
  • og:type = article (если не указывать, то по умолчанию будет “веб-сайт”)
Чтобы задать параметры мета тегов выполните следующие шаги:
1. Откройте меню Blogger > Dashboard > Template > Edit HTML
2. В редакторе в самом верху найдите следующий код, начинающийся с html xmlns:
<html xmlns='http://www.w3.org/1999/xhtml'
xmlns:b='http://www.google.com/2005/gml/b'
xmlns:data='http://www.google.com/2005/gml/data' 
xmlns:expr='http://www.google.com/2005/gml/expr'>
3. Добавьте xmlns:og='http://ogp.me/ns#' перед закрытием этого тега. Если нужных строк вы не нашли, то просто вставьте следующий код после <head>:
<html xmlns='http://www.w3.org/1999/xhtml'
xmlns:b='http://www.google.com/2005/gml/b'
xmlns:data='http://www.google.com/2005/gml/data'
xmlns:expr='http://www.google.com/2005/gml/expr'
xmlns:og='http://ogp.me/ns#'>
4. На предыдущем шаге вы добавили тег протокола фейсбука, который необходим для дальнейшего добавления Open Graph мета тегов в блог. Найдите тег <head> и добавьте после него следующий код:
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<meta content='article' property='og:type'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<meta property='og:image:width' content='1200'/>
<meta property='og:image:height' content='630'/>
<b:else/>
<meta content='logo-link' property='og:image'/>
</b:if>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' name='og:description'/>
<b:else/>
<meta expr:content='data:post.snippet' name='og:description'/>
</b:if>
<meta content='app_id' property='fb:app_id'/>
<meta content='fb_admins' property='fb:admins'/>
5. В коде вы должны заменить "logo-link" на путь к изображению, представляющему логотип вашего блога. Изображение должно быть размерами минимум 200 х 200 пикселей, максимальным сжатием 3:1, формата PNG, JPEG или GIF. Кроме этого необходимо в коде заменить параметры app_id и fb_admins на значения, которые предоставляет фейсбук при создании приложения. Как именно создавать в фейсбуке приложение описано в оригинале статьи.

Некоторые мои замечания:
- мета тег fb_admins я в код вообще не добавляла,
- не добавляла также и теги для размера картинки (og:image:width и og:image:height)