Показаны сообщения с ярлыком blogger. Показать все сообщения

Галерея фото из 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

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

 

 demo more info


Mega Shop

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


 demo more info


Storemag Online Shop Blogger Template

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



 demo more info


Sora Store Blogger Template

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


 demo more info




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

Подключение 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)

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

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

Шаблоны для blogger

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

Многоязычный блог

Так уж сложилось, что в blogger нет поддержки нескольких языков. В других cms есть, а здесь разработчики почему-то посчитали, что пользователям не нужно делать блог одновременно на разных языках. Это, безусловно, очень плохо, и пользователям приходится искать обходные пути.

Использование условных тегов в Blogger

Условные теги позволяют отображать элементы только на определённых веб-страницах, не задействовав весь блог в целом. И в отличии от свойства display: none;, не просто их скрывают, а удаляют из исходного кода.
Для того, чтобы понять что такое условные теги, я приведу простой пример 
<b:if cond='погода == дождливая'>
  я остаюсь дома
<b:else/>
  иду гулять
</b:if>
Что можно интерпретировать как: "Если (b:if cond) погода дождливая, то я остаюсь дома, иначе (b:else) иду гулять".

Когда мы вместо равенства указываем !=, то получается наоборот: 
<b:if cond='погода != дождливая'>
  я остаюсь дома
<b:else/>
  иду гулять
</b:if>
"Если погода недождливая, то я остаюсь дома, иначе иду гулять".

Может быть как больше ситуаций (несколько раз употребляться b:else), так и только одна: 
<b:if cond='погода == дождливая'>
  я остаюсь дома
</b:if>
Обязательно должно присутствовать окончание условия </b:if>.

Наиболее полезные условия Blogger

Для Blogger есть много разных условий, но наиболее интересными является тип групп страниц (data:blog.pageType). Он может принимать пять значений:
  • Cтраницы 
    <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
  • Сообщения 
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
  • архив 
    <b:if cond='data:blog.pageType == "archive"'>
  • 404 ошибка 
    <b:if cond='data:blog.pageType == &quot;error_page&quot;'>
  • остальные страницы, в том числе Главная, ярлыки и навигация 
    <b:if cond='data:blog.pageType == "index"'>
    • отдельно для ярлыков 
      <b:if cond="data:blog.searchLabel" >
    • отдельно для Главной 
      <b:if cond='data:blog.url == data:blog.homepageUrl'>
Чтобы задать условие одной конкретной странице используем data:blog.url: 
<b:if cond='data:blog.url == "http://адрес_вашей_строницы/"'>
При этом http://адрес_вашей_строницы/ должен быть с доменом .com (см. про региональные домены в Blogger): 
http://zarabotokiinternet.blogspot.ru/2011/02/uslovnye-tegi-v-blogger.html
http://zarabotokiinternet.blogspot.com/2011/02/uslovnye-tegi-v-blogger.html
Другие более сложные выражения (+, -, <, >, <=, >= и b:elseif, b:switch, b:case, b:eval и b:with) не так часто имеют место быть, но более функциональны. Если вы справитесь и с ними, то можно смело изучать JavaScript :)

Разный фон на разных страницах

Рассмотрим как сделать фон статистических страниц отличный от основного.
В шаблоне перед </head> добавляем: 
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<style>
body {
background: url(адрес_изображения); 
}

.body-fauxcolumns .cap-top {
background: transparent;
}

.widget ul li, .widget #ArchiveList ul.flat li {
border-top: none;
}
</style>
</b:if>
Строку .widget ul li, .widget #ArchiveList ul.flat li {border-top: none;} нужно указывать не для всех шаблонов, а только для тех, у кого есть пунктирные линии - разделители в гаджетах.

Как убрать с Главной конкретную страницу в Blogspot

Каждое сообщение имеет свой id. Его можно узнать на странице публикации поста в строке браузера
id сообщения blogger
В шаблоне есть такой участок кода:
<b:includable id='post' var='post'>
........содержание........
</b:includable>
его мы заменяем на
<b:includable id='post' var='post'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:post.id != &quot;1873004851645451173&quot;'>
........содержание........
</b:if>
<b:else/>
........содержание........
</b:if>
</b:includable>
1873004851645451173 - это id из скриншота выше.
Поскольку мы поставили условие data:blog.url == data:blog.homepageUrl, то страница, уйдя с Главной, будет видна по ссылке "Предыдущие". Если определить условие как data:blog.pageType == "index", то мы не увидим сообщение ни на Главной, ни по ссылке "Предыдущие", ни на страницах ярлыка, таких как http://shpargalkablog.ru/search/label/feed. А если — data:blog.pageType != "item", то пост найдём лишь по его адресу, например, http://shpargalkablog.ru/2011/02/uslovnye-tegi-v-blogger.html.


Источник: http://shpargalkablog.ru/2011/02/uslovnye-tegi-v-blogger.html

Полезные ссылки:

Шаблоны для blogger. Коллекция 2015

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



Как использовать шаблон в своем блоге


В интернете можно найти множество дизайнов (шаблонов) для сайтов. Есть шаблоны платные, есть бесплатные, и много попадается шаблонов, достойных внимания. О том, как такие шаблоны использовать в блоге, созданном с использованием технологии blogger, читем в этом посте.
Подписаться на: Сообщения (Atom)