Blogger адаптивный виджет похожие сообщения с картинками

Как в блоггере сделать виджет похожие сообщения

Новый виджет похожие сообщения для блоггера подойдет, как для обычных шаблонов так и для новых тем contempo, soho, emporio, notable.

Плюсы виджета:
  • Написан на чистом скрипте JS.
  • Понятен для поисковых ботов.
  • Не создает ссылки со значением Undefined, если сообщению не задан ярлык, что в свою очередь не допускает создания страниц с ошибкой 404.

Установка виджета для новых тем:

1) Откройте раздел Тема - Изменить HTML
2) Перед закрывающим тегом </head> добавьте код:

<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>


3) Найдите строку ]]></b:skin> перед ней добавьте CSS код:

.post-related { display: inline-block; background: #fff; padding: 10px; width:100%; } .post-box .heading { margin-bottom: 10px; text-align: center; margin-top: 10px; position: relative; } .post-box .heading:after { content: "" ; position: absolute; top: 100%; left: 50%; margin-left: -11px; width: 21px; height: 1px; margin-top: 2px; background: #b565a7; } .item-related { width: 31.6%; display: block; float: left; margin-right: 10px; height: 100%; } .item-related:last-child { margin: 0!important; } .item-related .link {display: block; margin: -1px; margin-bottom: 0;} .item-related img {margin-left:0px !important; display: block; opacity: 1; width: 100%; height: 200px; object-fit: cover; } .item-related h3 { padding: 15px; font-weight: 400; font-size: 14px; line-height: 1.71429; font-family: Muli; text-transform: uppercase; } img.noops-smly { padding: 0 !important; margin-top: -2px !important; width: 19px; display: inline; }

4) Найдите HTML код:

  <div class='post-bottom'>
            <div class='post-footer'>
              <!-- Footer bylines -->
              <b:include name='footerBylines'/>
            </div>
            <b:include cond='data:view.isSingleItem and data:widget.type == &quot;Blog&quot;' data='{ shareButtonClass: &quot;post-share-buttons-bottom&quot;, overridden: true }' name='maybeAddShareButtons'/>
            <b:include cond='data:view.isMultipleItems or data:widget.type == &quot;PopularPosts&quot;' data='post' name='postJumpLink'/>
          </div>

После него добавьте скрипт:

<script id='related-posts' type='text/javascript'> /*<![CDATA[*/ var relatedTitles = new Array(); var relatedTitlesNum = 0; var relatedUrls = new Array(); var thumburl = new Array(); function related_results_labels_thumbs(json) { for (var i = 0; i < json.feed.entry.length; i++) { var entry = json.feed.entry[i]; relatedTitles[relatedTitlesNum] = entry.title.$t; try {thumburl[relatedTitlesNum]=entry.media$thumbnail.url;} catch (error){ s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5); if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) {thumburl[relatedTitlesNum]=d;} else {if(typeof(defaultnoimage) !== 'undefined') thumburl[relatedTitlesNum]=defaultnoimage; else thumburl[relatedTitlesNum]="http://4.bp.blogspot.com/-ZoL4BRpPhkw/U6wnup4_6gI/AAAAAAAAACA/sKpM61pmJPo/s1600/no_pic_available.jpg";} } if(relatedTitles[relatedTitlesNum].length>35) relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0, 35)+"..."; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') { relatedUrls[relatedTitlesNum] = entry.link[k].href; relatedTitlesNum++; } } } } function removeRelatedDuplicates_thumbs() { var tmp = new Array(0); var tmp2 = new Array(0); var tmp3 = new Array(0); for(var i = 0; i < relatedUrls.length; i++) { if(!contains_thumbs(tmp, relatedUrls[i])) { tmp.length += 1; tmp[tmp.length - 1] = relatedUrls[i]; tmp2.length += 1; tmp3.length += 1; tmp2[tmp2.length - 1] = relatedTitles[i]; tmp3[tmp3.length - 1] = thumburl[i]; } } relatedTitles = tmp2; relatedUrls = tmp; thumburl=tmp3; } function contains_thumbs(a, e) { for(var j = 0; j < a.length; j++) if (a[j]==e) return true; return false; } function printRelatedLabels_thumbs(current) { for(var i = 0; i < relatedUrls.length; i++) { if((relatedUrls[i]==current)||(!relatedTitles[i])) { relatedUrls.splice(i,1); relatedTitles.splice(i,1); thumburl.splice(i,1); i--; } } var r = Math.floor((relatedTitles.length - 1) * Math.random()); var i = 0; while (i < relatedTitles.length && i < 20 && i<maxresults) { tmb = thumburl[r].replace('s72-c/','s300-c/'); document.write('<div class="item-related"><a href="' + relatedUrls[r] + '" class="link"><img width="150" height="100" src="'+tmb+'"/></a><h3><a href="' + relatedUrls[r] + '">'+relatedTitles[r]+'</a></h3></div>');i++; if (r < relatedTitles.length - 1) { r++; } else { r = 0; } } relatedUrls.splice(0,relatedUrls.length); thumburl.splice(0,thumburl.length); relatedTitles.splice(0,relatedTitles.length); } function removeHtmlTag(strx, chop) { var s = strx.split("<"); for (var i = 0; i < s.length; i++) { if (s[i].indexOf(">") != -1) { s[i] = s[i].substring(s[i].indexOf(">") + 1, s[i].length) } } s = s.join(""); s = s.substring(0, chop - 1); return s } /*]]>*/ </script>
                  <div class='post-related'>
                    <div class='post-box'>
                      <h4 class='heading common-heading'> <i class="fa fa-th-list" aria-hidden="true"></i> Рекомендуем</h4>
                    </div>
                    <b:loop values='data:post.labels' var='label'>
                      <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/>                             
                    </b:loop> 
                    <script type='text/javascript'>
                      var defaultnoimage=&quot;http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png&quot;;
                      var maxresults=3; // Number Of Posts
                      removeRelatedDuplicates_thumbs();
                      printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
                    </script>
                  </div>    

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

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

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

Так же читайте: Всплывающий виджет похожие посты для Blogger

Устанавливаем новый виджет случайных сообщений для боковой панели


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

Для установки скачайте файл с кодами и следуйте указаниям на видео:



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

Рекомендуем

10 Коммент.

Оставить комментарий
avatar
Opossum
июля 24, 2018

Использую тему emporio, но такого кода, после которого нужно вставить скрипт, просто нет.

более менее похожий кусок (не факт, правда, что форма комментов даст это нормально опубликовать):











ну как-то это не похоже на то где нужно вставить скрипт, да и не срабатывает в разных вариантах.

Ответить
avatar
Марк Корвин
июля 25, 2018

В теме Emporio попробуйте поставить скрипт после <data:post.body/>

Ответить
avatar
Opossum
июля 25, 2018

Ох, спасибо, наконец-то заработало) из множества вариантов это первый

Ответить
avatar
John
января 17, 2019

Здравствуйте. Снова вас беспокою.
В прошлый раз спрашивать по повожу индексации яндекса, в другой статье вашей.
В общем если вас не затруднит ответь, вот вопросы:
1. Возможно ли запретить индексирования стандартного виджета "популярные сообщения" и js "похожие сообщения", взятого из этой темы? Из за этих виджетов, в поиске выдается еще десяток страниц, где берется текст из виджетов. По идеи !--noindex-- можно было бы попробовать прикрыть, но это только для яндекса, хотелось бы универсальный вариант, если такой есть. Убирать виджеты не особо хотелось бы.

2. При поиске сайт+текст, выдает в поиске еще ссылки на другие страницы, где встречается данный текст, в описании других страниц пишется - "титл главной страницы ... название текста, который я ввел". Если ввести популярный сайт+текст, если есть схожий текст на других страницах, в описании пишется - "текст descr ... название текста"
Возможно ли реализовать вариант как на топовых сайтах? Что бы, если выдается в поиске другие страницы, в описание вначале указывался descr ссылающий страницы ... после указывался название текста, который я ввел.

Пока что не смог найти решение данного симбиоза, если выше сказанное можно так обозвать. Заранее благодарен за ответ.

Ответить
avatar
John
января 17, 2019

По поводу второго вопроса, наверное поиск берет с титла текст, как в шапке в изображении лого alt указан такой же как в титле. Как сразу же после титла идет текст из верхнего меню.
Скорее всего так, но не уверен. Есть ли способ, изменить виджет, что бы alt лого можно было менять через дизайн?
Вот нашел код шапки с алт
a expr:href='data:blog.homepageUrl' style='display: inline-block'
img expr:alt='data:title' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' style='display: block'/
/a
-------------------------------------
И чуть ниже код отвечающий за настройку алт через дизайн, точнее титл
b:includable id='title'
b:tag cond='data:blog.url != data:blog.homepageUrl' expr:href='data:blog.homepageUrl' name='a'
data:title/

Ответить
avatar
Марк Корвин
января 19, 2019

Попробуйте в шаблоне обрамить код виджетов noindex.
Для гугла разве что шифровать кода виджетов и то это не хорошая политика.

Ответить
avatar
Марк Корвин
января 19, 2019

Изменить alt лого можно только в редакторе HTML

Ответить
avatar
John
января 19, 2019

Спасибо за ответ.

Ответить
avatar
John
января 19, 2019

По поводу виджетов у меня сложилось двоякое мнение. Если почитать статьи по поводу виджетов "похожие публикации" и "популярные публикации", в них будет сказано о большой пользе использовании их, для тех же поисковиков.
На деле если посмотреть популярные сайты, в моем случае связанные с софтом, у них или виджетов нет выше написанных или есть, но в заголовки виджетов просто в стилях div или p.
Хотя на других не менее популярных сайта, похожие публикации будут в тегах h2 или h3, на одном сайте вообще виджет "похожие публикации" был заголовок h2, а ссылки в нем h3.
По идеи, h1 тег только 1 и должен принадлежат заголовку статьи. Одно я видел на всех этих сайта, h1 не принадлежал названию сайта, но если почитать владельцев многих блогов, у везде написано, что на главной сайта должен h1 принадлежать названию сайта.
По поводу h2-h4 тегах, бытует два мнения, первое что теги эти должны принадлежать только статье на странице, другие пишут что эти теги под хлам, например для виджетов. Ну на главной или в тех же категориях, h2 понятно занимает место для заголовков статей, хотя некоторые писали что делали для h1 тег и поисковики на ура принимали.

Каша какая-то получается. У себя, с главной убрал новости, для заголовки статей сделал h1, в ярлыках можно было сделать h2, но смысла нету, как все равно в роботе они прикрыты, загловки виджетов сделал в стиле dev, но пока не уверен, возможно позже сделаю h3 или h4 их.

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

А что вы думаете по этой всей теме?
Не много не по теме, но не могли вы скинуть свой title для главной и постов, желательно с b:if cond, если вас не затруднит. Заранее спасибо.

Ответить
avatar
Марк Корвин
января 21, 2019

Главное это наличие тега H1 в заголовках блога и публикациях. Не страшно, если заголовок виджета H2 или H3.

Ответить