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>

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

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 будут отображаться. Для остальных будет видна кнопка Показать больше

Увеличить доход от рекламы Adsense, объявления в фиде и статье

Как увеличить прибыль от рекламы Adsense: Полгода тому назад я, рассказывал, где на сайте лучше размещать рекламные блоки. С тех пор в партнерской программе Адсенс произошло не мало изменений. И сегодня мы поговорим о новых объявлениях, которые специально созданы для отображения в фиде сайта и непосредственно в самых постах. Скажу сразу, если разместить на сайте подобные типы объявлений ваша прибыль приумножится в несколько раз, проверял на своих сайтах.

Объявления в фиде

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

Объявления в статье

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

Как добавить, настроить рекламный блок в фиде и статье?

Вы сможете настроить рекламу под стиль своего сайта благодаря простому конструктору. Перейдите в панель управления Adsense - Контент - Рекламные блоки - Новый рекламный блок.
реклама в фиде adsense выбрать

Тип: Следующим делом вам нужно выбрать тип объявления, в данном случае выбрано в Фиде.
3254345
Формат: После, система предложит выбрать формат объявления, как я уже говорил выше, в соответствии с типом фида вашего сайта.
346546
Настройки: Завершающий этап. Задаем название блоку и дополнительные настройки, если требуется. 
  • Общие настройки
  • Графическое
  • Заголовок
  • Описание
  • URL
  • Кнопка
реклама в фиде adsense настройки

 Проверяем все параметры и кликаем по кнопке Сохранить и получить код.

Добавить на сайт Blogger

Самое сложное это установка кода. Добавить например его в статью не составит труда, но повторюсь для каждой статьи нужно это делать отдельно. Добавитm код в фид сайта тоже непросто. Если нужно решить данный вопрос обращайтесь. Стоимость установки:

В фиде - 10$
В статье - 10$ - для статьи устанавливается код, который автоматически добавляет рекламу в каждую статью, как в уже созданные, так и в новые статьи.