Blogger стильный виджет популярные сообщения

Blogger виджет популярные сообщения

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

Настройка виджета популярные сообщения

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

Оптимизация гаджета популярные сообщения в новых темах

Теперь я предлагаю тем из вас, кто пользуются новыми темами Contempo, Soho, Notable и Emporio оптимизировать виджет поскольку в этих шаблонах он перенасыщен тегами H3. Чтобы исправить это замените код своего виджета на оптимизированный:
<b:widget id='PopularPosts1' locked='false' title='Популярное' type='PopularPosts' version='1'>
      <b:widget-settings>
        <b:widget-setting name='numItemsToShow'>10</b:widget-setting>
        <b:widget-setting name='showThumbnails'>true</b:widget-setting>
        <b:widget-setting name='showSnippets'>false</b:widget-setting>
        <b:widget-setting name='timeRange'>LAST_WEEK</b:widget-setting>
      </b:widget-settings>
      <b:includable id='main'>
  <b:if cond='data:title != &quot;&quot;'><h4><data:title/></h4></b:if>
  <div class='widget-content popular-posts'>
    <ul>
      <b:loop values='data:posts' var='post'>
      <li>
        <b:if cond='!data:showThumbnails'>
          <b:if cond='!data:showSnippets'>
            <!-- (1) No snippet/thumbnail -->
            <a expr:href='data:post.href'><data:post.title/></a>
          <b:else/>
            <!-- (2) Show only snippets -->
            <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            <div class='item-snippet'><data:post.snippet/></div>
          </b:if>
        <b:else/>
          <!-- (3) Show only thumbnails or (4) Snippets and thumbnails. -->
          <div expr:class='data:showSnippets ? &quot;item-content&quot; : &quot;item-thumbnail-only&quot;'>
            <b:if cond='data:post.featuredImage.isResizable or data:post.thumbnail'>
              <div class='item-thumbnail'>
                <a expr:href='data:post.href' target='_blank'>
                  <b:with value='data:post.featuredImage.isResizable                                  ? resizeImage(data:post.featuredImage, 172, &quot;1:1&quot;)                                  : data:post.thumbnail' var='image'>
                    <img alt='' border='0' expr:src='data:image'/>
                  </b:with>
                </a>
              </div>
            </b:if>
            <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            <b:if cond='data:showSnippets'>
              <div class='item-snippet'><data:post.snippet/></div>
            </b:if>
          </div>
          <div style='clear: both;'/>
        </b:if>
      </li>
      </b:loop>
    </ul>
    <b:include name='quickedit'/>
  </div>
</b:includable>
    </b:widget>



Стилизация виджета популярные сообщения

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

В панели управления зайти в раздел Шаблон - Изменить HTML здесь ищем CSS код нашей стандартной версии виджета популярных сообщений, для этого жмете клавиши CTRL+F в поисковом окошке пишите Popular post и найденный код написанный синим цветом естественно относящийся к виджету удаляете. Затем ищем код ]]></b:skin> перед которым вставляем следующий код:

/* Popular Posts */
.PopularPosts .item-thumbnail{float:none;margin:0 0 10px}
.PopularPosts .item-title{background:rgba(0,0,0,0.5);position:absolute;display:block;clear:both;z-index:50;top:0;left:0;right:0;bottom:0;padding:15px;transition:all .4s;}
.PopularPosts .item-title:hover{background:rgba(0,0,0,.2)}
.PopularPosts .item-title a{color:rgba(255,255,255,0);font-weight:700;font-size:100%;text-shadow:0 0 5px rgba(0,0,0,0)}
.PopularPosts .item-title:hover a,.PopularPosts .item-title a:hover{color:rgba(255,255,255,1);text-shadow:0 0 5px rgba(0,0,0,.3)}
.PopularPosts .widget-content ul li img{translate(0,0) scale(1.0);transition:all .8s linear}
.PopularPosts .widget-content ul li:hover img{transform:translate(0,-20px) scale(1.05);transition:all 3.6s linear;}
.PopularPosts img{display:block;height:auto;width:100%;padding:0;backface-visibility:hidden;}
.PopularPosts .item-snippet{display:none;}
.PopularPosts ul li .item-content{position:relative;overflow:hidden;}
.PopularPosts ul{padding:0;line-height:normal;counter-reset:count;}
.PopularPosts .widget-content ul li{position:relative;padding:10px 0;overflow:hidden;max-height:100px;transition:all .4s;}
.PopularPosts .widget-content ul li:before{color:#fff;counter-increment:count;content:counter(count);position:absolute;right:-15px;top:-5px;font:bold 80px/1 Sans-Serif;z-index:51;transition:all .4s;}
.PopularPosts .widget-content ul li:hover:before{right:-55px;}
.PopularPosts ul li:nth-child(1) .item-title {background:rgba(221,25,29,0.5);}
.PopularPosts ul li:nth-child(2) .item-title {background:rgba(141,187,144,0.5);}
.PopularPosts ul li:nth-child(3) .item-title {background:rgba(39,169,255,0.5);}
.PopularPosts ul li:nth-child(4) .item-title {background:rgba(192,202,51,0.5);}
.PopularPosts ul li:nth-child(5) .item-title {background:rgba(26,35,126,0.5);}
.PopularPosts ul li:nth-child(6) .item-title {background:rgba(0,188,212,0.5);}
.PopularPosts ul li:nth-child(1) .item-title:hover,.PopularPosts ul li:nth-child(2) .item-title:hover,.PopularPosts ul li:nth-child(3) .item-title:hover,.PopularPosts ul li:nth-child(4) .item-title:hover,.PopularPosts ul li:nth-child(5) .item-title:hover,.PopularPosts ul li:nth-child(6) .item-title:hover{background:rgba(0,0,0,0.2);}

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

Дальше ищем код </body> перед которым нужно вставить следующий код:

<script type='text/javascript'>
// Popular Post Thumb
$(document).ready(function() {$(&#39;.PopularPosts img&#39;).attr(&#39;src&#39;, function(i, src) {return src.replace( &#39;s72-c&#39;, &#39;s400&#39; );});});
//<![CDATA[
// Custom Popular Post
$(".popular-posts ul li .item-snippet").each(function(){var t=$(this).text().substr(0,120),s=t.lastIndexOf(" ");s>10&&$(this).text(t.substr(0,s).replace(/[?,!\.-:;]*$/,"..."))});
//]]>
</script>

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



Поделиться в социальных сетях:
Facebook Twitter Vkontakte

Рекомендуем

8 Коммент.

Оставить комментарий
avatar
Стас Денежный
октября 20, 2015

Шикарно смотрится. Спасибо

Ответить
avatar
Шаблоны для Blogger
октября 20, 2015

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

Ответить
avatar
Трисс
декабря 10, 2015

Подскажите, установил этот виджет, но картинки на нем почему то размытые, что нужно сделать?

Ответить
avatar
Шаблоны для Blogger
декабря 10, 2015

Трисс, размытые они из-за того что, второй код Javascript был поставлен некорректно. Если Вы все сделали так, как указано в описании, в таком случае попробуйте второй код разместить перед </head>

Ответить
avatar
Трисс
декабря 10, 2015

Всё получилось, спасибо!

Ответить
avatar
Шаблоны для Blogger
декабря 10, 2015

Не за что, всегда рад помочь, обращайтесь.

Ответить
avatar
Ольга Чикурова
ноября 13, 2016

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

Ответить
avatar
Шаблоны для Blogger
ноября 13, 2016

Демо вариант можете просмотреть на этом блоге - demo.bloggertheme9.com/2015/11/blue-theme.html

Ответить