Шаблоны blogger ограничения и ошибки поисковой индексации

Один из посетителей задал интересный вопрос: Имеют ли шаблоны blogger, которые он подобрал для своего сайта (подмечу, что это бесплатные темы сторонних вебдизайнеров) ограничения на поисковую индексацию. Что подразумевает данный вопрос, например будут ли появляться новые статьи в поиске, если да, то на высоких или низких позициях, что-то в этом роде.

Ответ можете посмотреть на видео.

ExGpress 1.2 бесплатный шаблон для blogger на русском

ExGpress 1.2 шаблон для blogger

ExGpress 1.2 бесплатная тема для Blogger (blogspot): Те, кто уже знаком с первой версией шаблона ExGpress, теперь могут оценить работу версии 1.2

Основные изменения: Добавлен слайдер избранных сообщений, Новое окно поиска, Установлена нумерованная постраничная навигация вместо Infinite Scroll.

Демо
Скачать бесплатную версию
Приобрести шаблон полная SEO версию

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/> и после нее добавить код из второго пункта по установке виджета в новых темах. Если не будет срабатывать попробуйте разместить скрипт после следующих строк:  <div class='post-footer'> или <div class='post-footer-line post-footer-line-1'></div>

Иконки font awesome css как подключить. Видео

Иконки font awesome css как подключить
Иконки font awesome css как подключить? Именно так звучит название темы, которую мы с вами постараемся разобрать, как можно подробней. С уверенностью этот материал можно отнести к разделу "Инструменты для сайта" смотрите в правой панели сайта, возможно найдете еще, что-нибудь интересное для себя.

Что такое font awesome (перевод с анг. - крутой или клевый шрифт) - это вспомогательный инструмент (иконка), который помогает выделить определенный элемент на сайте или блоге.

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

Что же можно выделить с помощью иконок font awesome? Допустим на моем сайте есть главное меню, которое разбито на несколько категорий: WordPress, Joomla, Blogger и т.д. так вот для более презентабельного вида можно каждой из этих ячеек задать соответствующею иконку.
иконки font awesome пример для главного меню
Правда в базе Font Awesome на все случаи жизни иконок не найдется, но это пока что, ведь с каждым месяцем количество иконок заметно прибавляется.

Так же можно выделять некоторые заголовки или подзаголовки в постах:
иконки font awesome пример для текста в постах

Очень полезны иконки font awesome для такого типа сайта, как Landing Page. Сейчас просто невозможно представить презентацию одностраничника без данного инструмента.
иконки font awesome пример для landing page

В общем, как вы уже поняли иконкой можно отметить любой элемент сайта. Стоит упомянуть, что отображение иконок достигается за счет использования языка CSS, что есть очень хорошо поскольку CSS код является самым легким для загрузки сайта. По крайней мере создатель инструмента font awesome хорошо постарался, чтобы не создавать дополнительной нагрузки на сайт при подключении своего творения.

Как подключить иконки Font Awesome

Вот мы с вами и добрались к самой важной части. Подключить иконки font awesome проще простого. Для этого вам нужно открыть HTML редактор своего сайта и в промежутке между тегами <head> ... </head> вставить тег, который подключит ваш сайт к базе font awesome:

<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>

Сохраните изменения.

Теперь дело осталось за малым, вам нужно выбрать нужную иконку на сайте Font Awesome скопировать ее HTML код:
иконки font awesome пример HTML код
и вставить его перед тем элементом, который хотите выделить.

Еще можно вставить иконку возле нужного элемента при помощи CSS, но это чуть сложнее. Каждая иконка имеет свой собственный Unicode, который и используется в данном случае.

ionMag бесплатная тема для WordPress

ionMag бесплатная тема для WordPress

ionMag бесплатная тема WordPress: Журнальный - новостной стиль, 5 колонтитулов, Топбар, Выпадающее мегаменю, Плагины избранных постов, Нумерованная постраничная навигация, Хлебные крошки, Выпадающее окно поиска, Плавающий сайдбар, Плавная загрузка картинок, Следующий предыдущий пост, Плагин об авторе статьи, Кнопки шаринга, Похожие посты, Форма комментариев WordPress, Адаптивный дизайн, Светло-голубые тона.

Демо
Скачать шаблон

Как вести блог, каким должен быть сайт наглядный пример

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

Так же читайте по теме - Как вести блог начинающим блоггерам

Добиться успеха в продвижении блога, в Яндексе и Гугле не самое простое задание, еще более сложное задание сделать это в обеих системах. Так думают многие, после прочтения нескольких публикаций касающихся темы продвижения сайта. И это действительно так, процесс в самом деле непрост. Спустя некоторое время пускай будет 3 - 4 месяца не ощутив ожидаемого результата это большинство уже мыслит иначе, теперь "сложное" переросло в "нереальное", а дальше блог прекращает существование. Почему нет результата? На этот вопрос у меня есть несколько ответов:
  
  • Банально не составляется список ключевых слов, даже для отдельно взятого заголовка статьи.
  • Разная тематика - не дает сайту развиться в полной мере, правда это еще не самое страшное.
  • Вялый старт - если взялись за блог, то занимайтесь наполнением каждый день.

Это только малая часть ответов, более расширенные ответы смотрите в видео ролике.

Пример хорошего блога: В качестве примера хочу показать вам блог одного из своих клиентов. В свое время проводил настройки по оптимизации и установке дополнительных виджетов в шаблоне этого блога - you-lady.net

В первую очередь обратите внимание на структуру блога, это главное меню, боковая панель. В главном меню отображены основные рубрики, остальные категории находятся в правой панели, виджет "Рубрики журнала". Подробней по структуре смотрите в видео материале.

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

В общих чертах все красиво, аккуратно, а главное удобно и понятно (темы раскрыты). Хотите достичь успеха в продвижении блога берите пример.

Новая кнопка скроллинга вверх для сайта - блога.


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

Кнопка вверх для обычных тем blogger

Примечание! Данная кнопка не будет работать в новых темах blogger. Итак приступаем к установке нового виджета. Переходим в раздел Тема - Изменить HTML

 1). Здесь после тега <head> вставьте код:

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"/>

2). Ищем строку ]]></b:skin>  перед, которой вставляем этот CSS код:



/* Back to top */

#easy-top{background:rgba(0,0,0,.5);text-align:center;position:fixed;bottom:15px;right:15px;cursor:pointer;width:38px;height:38px;line-height:38px;border-radius:4px;padding:4px;display:none;-webkit-transform:translateZ(0);box-sizing:initial;transition:all .3s ease-out}#easy-top:hover{background:rgba(0,0,0,.9)}#easy-top:before,#easy-top:after{-webkit-backface-visibility:hidden;box-sizing:initial;}#easy-top:before{content:'';height:8px;width:8px;display:block;border:3px solid #fff;border-left-width:0;border-bottom-width:0;transform:rotate(-45deg);-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);-ms-transform:rotate(-45deg);position:absolute;top:15px;left:18px}#easy-top:after{content:'';height:16px;width:3px;display:block;background:#fff;position:absolute;top:17px;left:22px}#easy-top:hover:after{border-color:transparent transparent rgba(0,0,0,.9)transparent}

3). Теперь приступаем к установке скрипта.

3.1). Первый вариант кнопки вверх с плавным завершением поднятия страницы. Найдите строку </body> и перед ней вставьте следующий код:

<div id='easy-top'/>

<script type='text/javascript'>

//<![CDATA[

$(function(){$(window).scroll(function(){$(this).scrollTop()>600?$("#easy-top").fadeIn(100):$("#easy-top").fadeOut(0)}),$("#easy-top").click(function(){$("html, body").animate({scrollTop:0},{duration:2e3,easing:"easeOutQuint"})})});

//]]>

</script>

<script src='https://cdn.rawgit.com/Arlina-Design/redvision/master/easing.js' type='text/javascript'/>
Сохраняете шаблон и проверяете работу нового виджета.

3.2). Теперь код для второй кнопки с эффектом ударения и отскока страницы сайта. Все в том же месте перед строкой </body> вставляете следующий код:


<div id='easy-top'/>

<script type='text/javascript'>

//<![CDATA[

$(function(){$(window).scroll(function(){$(this).scrollTop()>600?$("#easy-top").fadeIn(100):$("#easy-top").fadeOut(0)}),$("#easy-top").click(function(){$("html, body").animate({scrollTop:0},{duration:2e3,easing:"easeOutBounce"})})});

//]]>

</script>

<script src='https://cdn.rawgit.com/Arlina-Design/redvision/master/easing.js' type='text/javascript'/>

Сохраняем шаблон смотрим на работу второго варианта.

Кнопка вверх для новых тем blogger

1). Проделываем тоже самое, что указано в первом пункте по установке кнопки для обычных тем.

2). Ищем строку ]]></b:skin>  перед, которой вставляем этот CSS код:

.smoothscroll-top {
    position:fixed;
    opacity:0;
    visibility:hidden;
    overflow:hidden;
    text-align:center;
    z-index:99;
    background-color:#2ba6e1;
    color:#fff;
    width:47px;
    height:44px;
    line-height:44px;
    right:25px;
    bottom:-25px;
    padding-top:2px;
    border-radius:5px;
    transition:all 0.5s ease-in-out;
    transition-delay:0.2s;
}
.smoothscroll-top:hover {
    background-color:#3eb2ea;
    color:#fff;
    transition:all 0.2s ease-in-out;
    transition-delay:0s;
}
.smoothscroll-top.show {
    visibility:visible;
    cursor:pointer;
    opacity:1;
    bottom:25px;
}
.smoothscroll-top i.fa {
    line-height:inherit;
}



3). Теперь приступаем к установке скрипта. Находите код </body> и перед ним вставляете  следующий код:

3.1). Кнопка с обычным эффектом:
<div class="smoothscroll-top">
    <span class="scroll-top-inner">
        <i class="fa fa-2x fa-arrow-circle-up"></i>
    </span>
</div>
<script type='text/javascript'>
//<![CDATA[
$(function(){
 
    $(document).on( 'scroll', function(){
 
        if ($(window).scrollTop() > 100) {
            $('.smoothscroll-top').addClass('show');
        } else {
            $('.smoothscroll-top').removeClass('show');
        }
    });
 
    $('.smoothscroll-top').on('click', scrollToTop);
});
 
function scrollToTop() {
    verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0;
    element = $('body');
    offset = element.offset();
    offsetTop = offset.top;
    $('html, body').animate({scrollTop: offsetTop}, 600, 'linear');
}
//]]>
</script>


3.2). Кнопка с эффектом ударения:
<div class="smoothscroll-top">
    <span class="scroll-top-inner">
        <i class="fa fa-2x fa-arrow-circle-up"></i>
    </span>
</div>
<script type='text/javascript'>
//<![CDATA[
$(function(){
 
    $(document).on( 'scroll', function(){
 
        if ($(window).scrollTop() > 100) {
            $('.smoothscroll-top').addClass('show');
        } else {
            $('.smoothscroll-top').removeClass('show');
        }
    });
 
    $('.smoothscroll-top').on('click', scrollToTop);
});
 
function scrollToTop() {
    verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0;
    element = $('body');
    offset = element.offset();
    offsetTop = offset.top;
    $('html, body').animate({scrollTop: offsetTop}, 600, 'linear').animate({scrollTop:25},200).animate({scrollTop:0},150) .animate({scrollTop:0},50);
}
//]]>
</script>

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