Blogger установить виджет следующее предыдущее с миниатюрами

Blogger виджет следующее предыдущее с миниатюрами
Виджет: Следующий - предыдущий пост

Описание: Отображает заголовки постов, Превъю картинок к постам.

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

Установить виджет для новых тем Contempo Soho Emporio Notable


1). В разделе Тема - Изменить HTML перед закрывающим тегом </head> добавьте строку:

 <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js'/>

2). Найдите строку ]]></b:skin> перед ней вставьте код:
/* Phone : 480px */ 
@media only screen and (max-width: 767px) and (min-width: 480px){ 
.mbt-pager li.previous a{padding-right:0px;}
.mbt-pager li a{padding:0px;}
.mbt-pager li{width:100%;}
.mbt-pager li.next{margin-bottom: 15px;}
.mbt-pager .next a strong,.mbt-pager .next a span{text-align:left;}
.mbt-pager li.next a{padding-left:0}
}

/* Phone : 320px */ 
@media only screen and (max-width:479px){
.mbt-pager li.next{margin-bottom: 15px!important;}
.mbt-pager li.next a{padding-left:0} 
.mbt-pager li{width:100%;}
.mbt-pager .next a strong,.mbt-pager .next a span{text-align:left;}
.mbt-pager li.next{float:none;width:100%;}
.mbt-pager li.previous{width:100%;}
 .item-related{width:100% !important} .item-related img { width: 100% !important; }
} 
ul.mbt-pager {padding: 20px;}
.odd-pager{  display:block;}
.mbt-pager {  margin-bottom: 10px;   overflow:hidden; padding:0px;}
.mbt-pager li.next { float: right; padding:0px; background:none; margin:0px;}
.mbt-pager li.next a { padding-left: 24px; }
.mbt-pager li.previous { margin:0px -2px 0px 0px; float: left;padding:0px; background:none;}
.mbt-pager li.previous a { padding-right: 24px;  }
.mbt-pager li.next:hover, .mbt-pager li.previous:hover  {color:#333333; }
.mbt-pager li { width: 50%; display: inline; float: left; text-align: center; }
.mbt-pager li a { position: relative;
/* min-height: 77px; */
display: block;
/* padding: 15px 46px 15px; */
outline: none;
text-decoration: none;
}
.mbt-pager li i { color: #000; font-size: 12px; }
.mbt-pager li a strong { display: block; font-size: 14px; color: #000; letter-spacing: 0.5px; font-weight:400;}
.mbt-pager li a span {    letter-spacing: 0px;display:block;  color: #666;  font:$(body.font); margin:0px;}
.mbt-pager li a:hover strong {
color: #E94141;
}
.mbt-pager li a:hover span {
color: #E94141;
}
.mbt-pager .previous a span{text-align:left;color: #1bbc9b;}
.mbt-pager .next a span{text-align:right;color: #1bbc9b;}
.mbt-pager .previous div {
display: block;
padding-left: 130px;
}
.mbt-pager .next div {
display: block;
padding-right: 130px;
}
.fa-chevron-right {padding-right:0px;}

.mbt-pager .previous a img {
float: left;
}
.mbt-pager .previous a {
display: block;
}
.mbt-pager .next a img {
float: right;
}
.mbt-pager .next a {
display: block;
}
.mbt-pager .previous a strong{text-align:left;}
.mbt-pager .next a strong{text-align:right;}

3). Найдите код:
<div class='post-bottom'><div class='post-footer float-container'><b:include name='footerBylines'/><b:include cond='data:widget.type == &quot;Blog&quot;' data='post' name='postFooterAuthorProfile'/></div> <b:if cond='data:view.isSingleItem'> <b:include data='{ shareButtonClass: &quot;post-share-buttons-bottom invisible&quot;, overridden: true }' name='maybeAddShareButtons'/><b:else/><b:include data='post' name='postFooterJumpLink'/></b:if></div>

встречается 3 - 4 раза в зависимости от темы, отсчитайте 3 и после него вставьте следующий код:

<b:if cond='data:blog.pageType != &quot;index&quot;'>
<span class='odd-pager'><ul class='mbt-pager'>
        <li class='next'> 
<b:if cond='data:olderPageUrl'> 
<a class='newer-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;'/> 
<b:else/> 
<a><strong/> <span>Последний пост</span></a> 
</b:if> 
</li>
    <li class='previous'> 
<b:if cond='data:newerPageUrl'> 
<a class='older-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;'/> 
<b:else/> 
<a><strong/> <span>Первый пост</span></a> 
</b:if> 
</li>
    </ul>

  </span>
<script type='text/javascript'> 
//<![CDATA[ 
(function($){    
    var newerLink = $('a.newer-link'); 
    var olderLink = $('a.older-link');
    
    $.get(newerLink.attr('href'), function (data) { 

      var thumb=$(data).find('.post-body img:first').length>=1?"<img src='"+$(data).find('.post-body img:first').attr('src').replace(/s\B\d{2,4}/,'s' + 120)+" class=''/>":"";

     newerLink.html(thumb+'<div><strong>Следующий пост</strong> <span>'+$(data).find('.post .entry-title').text()+'</span></div>');    
    },"html"); 
    $.get(olderLink.attr('href'), function (data2) { 
      var thumb2=$(data2).find('.post-body img:first').length>=1?"<img src='"+$(data2).find('.post-body img:first').attr('src').replace(/s\B\d{2,4}/,'s' + 120)+" class=''/>":"";
     olderLink.html(thumb2+'<div><strong>Предыдущий пост</strong> <span>'+$(data2).find('.post .entry-title').text()+'</span></div>');    
    },"html");

})(jQuery); 
//]]> 
</script>
</b:if>

4). Сохраните тему, проверьте работу виджета.

Установка виджета для обычных шаблонов

Для обычных шаблонов blogger будет сложнее, потому как нужно найти место куда вставить код виджета и в каждом другом шаблоне эти места могут отличаться.

Сперва попробуйте найти строку <data:post.body/> и после нее добавить код из 3 пункта по установке виджета в новых темах. Если не будет срабатывать попробуйте разместить скрипт после следующих строк:  <div class='post-footer'> или <div class='post-footer-line post-footer-line-1'></div>

Blogger Soho Contempo Notable Emporio сделать ярлыки развернутыми

Blogger Soho Contempo Notable Emporio сделать ярлыки развернутыми
Совсем недавно читал в одной статье, что Google терпеть не может скрытый контент. Речь идет именно о спойлерах и других похожих инструментах. Несмотря на это, в новых темах blogger есть несколько виджетов скрывающих контент, например ярлыки и архивы. Для них внедрен код Collapsible material, который скрывает контент и отображает его (открывается, как гармошка) после клика по заголовку. Этот элемент был придуман, чтобы скрывать от пользователей неосновной контент. Сегодня я покажу вам, как деактивировать эту функцию в ярлыках.

Soho Contempo Notable Emporio сделать ярлыки открытыми

Чтобы сделать ярлыки раскрытыми, перейдите в раздел Тема - Изменить HTML, найдите в шаблоне код виджета "Ярлыки" (жмите клавиши CTRL+F в поисковом окне впишите Ярлыки, или название, которое вы ему задали при создании, нажмите энтер) чуть ниже, левее увидите черные треугольники, первый после строки Ярлыки пропустите кликните по второму, раскроется новый код, в нем удалите строку: data:view.isLabelSearch сохраните тему.

После этого ярлыки будут раскрытыми, вернее их часть, если у вас больше 10 ярлыков, тогда первые 10 будут отображаться. Для остальных будет видна кнопка Показать больше

Goomagz бесплатный шаблон для blogger

goomagz бесплатный шаблон для blogger

Goomagz шаблон для blogger: Плавающее меню, Виджеты избранных сообщений на главной странице, Постраничная навигация, Окно поиска, Иконки социальных сетей, Рекламные секции, Подписка по email, Кнопки шаринга, Похожие сообщения, Зеленый цвет, Кнопка обратно вверх, Комментарии Facebook, Адаптивный дизайн

Демо
Скачать

Blogger как продвигать блог на бесплатном домене blogspot

Blogger как продвигать блог на бесплатном домене blogspot
Напомню, что примерно в конце 2013 года продвижение блогов на платформе Blogger с бесплатным доменом blogspot несколько усугубилось. Произошло это из-за введения регионального перенаправления. В данных условиях стало намного тяжелей продвигать блог, в основном в поисковой системе Yandex, потому, как поискового бота яндекса при переходе на блог с доменом blogspot.com перенаправляет на blogspot.ru, fi, in, и другие, из-за этого продвигать блог под доменом blogspot.com в Яндексе на сегодняшний день нереально. Гугл же решает эту проблему с помощью тега cannonical, но даже при этом в поиск проскакивают страницы с другими доменными зонами.

Blogger, как продвигать блог на бесплатном домене blogspot в Яндексе

Решить проблему с продвижением в Яндексе можно, правда кому, как повезет. Единственный вариант это продвигать блог под доменной зоной ru, то есть АДРЕССАЙТА.blogspot.ru. При добавлении блога - сайта в поиск Яндекса регистрируйте его только под зоной ru. Это для пользователей, которые не проживают в России и хотят раскрутить проект в Yandex. У пользователей из России по другому и быть не может, ведь для них блог всегда открывается в зоне ru только, если в шаблоне не стоит скрипт, который перекидывает его обратно на зону com.

Дальше создайте сообщество или группу в любой соцсети по той же теме, что и блог. После каждой опубликованной статьи вкидывайте в свою группу ссылку на эту статью с окоченением .ru это ускорит попадание страниц и немного улучшит видимость самого блога в поиске Яндекса. Чем больше соцсетей (Вконтакте, Facebook и т.д.) тем лучше.

Blogger, продвижение в Google

Для Гугла в основном ничего менять не нужно, потому что он индексирует основной домен blogger blogspot.com. По-этому, когда вы добавляете сайт в Google Webmster Tools убедитесь, что домен заканчивается на com, а не на ru, by и т.д. В данном случае так же не помешает распространять ссылки на статьи сайта через соцсети.

Итог: В Яндексе продвигаем blogspot.ru, в Google blogspot.com. Задействуем социальные сети, в них можно постить по две ссылки с разными доменными окончаниями (ru, com) в одном и том же посте.

Так же не забываем про оптимизацию шаблона.

На этом все, если возникли вопросы, спрашивайте.


Читайте по теме:
Как раскрутить блог на blogger и других платформах

Blogger Soho, Notable заменить надпись Поделиться на иконку

Blogger Soho Notable заменить надпись Поделиться на иконку
Blogger Soho, Notable заменить надпись Поделиться на иконку.

Если хотите заменить слово "Поделиться" иконкой, сперва подключите иконки font awesome. После подключения, откройте редактор Изменить HTML выведите окно поиска CTRL+F вставьте строку: sharingButtonContent нажмите энтер. Браузер выделит ее в редакторе, раскройте ее нажатием на черный треугольник, расположен с левой стороны
blogger323445
после чего должен появиться такой код:

Soho
 <b:includable id='sharingButtonContent'>
          <b:message name='messages.share'/>
        </b:includable>
Notable
<b:includable id='sharingButtonContent'>
          <b:comment>Mark parent byline element as a flat-button.</b:comment>
          <b:class name='flat-button ripple'/>
          <b:message name='messages.share'/>
        </b:includable><>
Код повторяется несколько раз, вам нужно для каждого проделать следующее, вместо строки:
<b:message name='messages.share'/> напишите свою надпись (название), а для иконки вставьте следующий код:
<i class="fa fa-share-alt" aria-hidden="true"></i> 
Сохраните тему. 

Blogger Contempo поменять фоновую картинку Michael Elkan

Blogger Contempo поменять фоновую картинку Michael Elkan

Blogger Contempo поменять фоновую картинку: Откройте панель управления - Тема - Изменить HTML - нажмите клавиши CTRL+F - в поисковом окне вставьте строку:
https://themes.googleusercontent.com/image?id=L1lcAxxz0CLgsDzixEprHJ2F38TyEjCyE3RSAjynQDks0lT1BDc1OxXKaTEdLc89HPvdB11X9FDw жмите энтер, браузер найдет ее. После замените эту строку (ссылку) на ссылку своей картинки, сохраните тему.

Пример ссылки новой картинки //1.bp.blogspot.com/-SqPev3l6pw4/VhY-es7jRhI/AAAAAAAAA38/6RGptvZGKpI/s640/%25D0%259F%25D1%2583%25D1%2582%25D0%25B5%25D1%2588%25D0%25B5%25D1%2581%25D1%2582%25D0%25B2%25D0%25B8%25D0%25B5.jpg
Картинка будет выглядеть темнее, чтобы регулировать яркость найдите строку:
 background: rgba(0, 0, 0, 0.26); Можете удалить ее или задать новое значения, сделать ее тем самым ярче или темнее. Для это задавайте значение либо больше 26, либо меньше.

Так же читайте, как убрать надпись технологии blogger и Michael Elkan

Шаблоны для blogger, более 6 бесплатных тем для blogger с переводом на русский

Шаблоны для blogger, более 6 бесплатных тем для blogger с переводом: Новостные, Журнальные, Спортивные, Женские, Кулинарные, Путешествия, Туризм, Мода, Стиль, Ремонт, Строительство домов, Природа, Рыбалка, Охота, Животные.

Название тем: Lifa and Fashion, TechNews, Cheerup, Gravity, Newcon  

Описание: Мы подготовили для вас выборку из пяти тем для блоггер, которую вы можете скачать абсолютно бесплатно. Стоит добавить, что каждая из них была переведена на русский язык, плюс убраны некоторые баги. SEO оптимизация на том же уровне, который был изначально, в этом плане ничего не менялось.

Более 6 новых, адаптивных шаблонов для blogger

Newcon
newcon-шаблоны и темы для blogger-2017
Одна из новинок 2017 года.


Dream Line
DreamLine шаблон для Blogger
Классический блоггеровский стиль отображения постов на главной с увеличением картинки при наведении курсора. В правой панели вмонтирован переключатель виджетов. Был один баг со страницей 404. Когда пользователь попадал на эту страницу, его автоматически перенаправляло на сайт верстальщика шаблона, исправлено.  


Moveone
moveone тема
Классический блог с динамической подгрузкой блоков. Особенности: исправлена ошибка в футере, удалены ссылки на блоги автора.


Life & Fashion
life and fashion бесплатные шаблоны и темы для blogger
Lifa and Fashion уже есть в одном из наших разделов за 2016 год. Теперь добавляем ее уже на русском, плюс исправлен виджет популярных сообщений, расшифрованы некоторые скрипты для полного перевода и более быстрой работы блога. Размытие картинок в виджете популярных сообщений легко устраняется.


TechNews
Tech News шаблоны и темы для Blogger 2107


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


Gravity
gravity бесплатные темы для blogger 2017
Структура собщений на подобии социальной сети pinterest и google plus. На главной странице отсутствует сайд бар, при этом он отображается на всех остальных страничках. Главного меню, как такого нет, есть виджет статических страниц. Здесь произошли некоторые изменения. Автор изменил его внешний вид по-этому при просмотре демо будет отображаться именно измененная версия в красных цветах.


Изменить ширину боковой колонки Contempo Soho Notable Emporio


Изменить ширину боковой колонки Contempo Soho Notable Emporio:

Contempo:

1) Панель управления - Тема - Изменить HTML
2) Откройте окно поиска (CTRL+F) впишите код:
.sidebar-container .sidebar_bottom
3) Нажмите энтер, браузер отобразит нужную часть кода, весь код целиком выглядит:
   .sidebar-container .sidebar_bottom {
    max-width: $(sidebar.width);
    width: $(sidebar.width);
  }

4) Вместо $(sidebar.width) пропишите значение в пикселях, например 350px

5) Сохраните тему.


Soho:

1) Найдите в теме код: max-width: $(sidebar.width);
2) Смотрите 4 пункт темы Contempo.


Видео: