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 код:

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 код:

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>

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

JS<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

Всплывающий виджет похожие сообщения (related posts)

Blogger - blogspot устанавливаем на сайт - блог всплывающий виджет похожие сообщения (related posts).

День добрый друзья, наконец то настала долгожданная суббота, можно отдохнуть и взяться за улучшение своих сайтов и блогов. Сегодня у нас нечто особенное в программе, мы покажем, как установить на сайт - блог крутейший виджет похожих сообщений. Он существенно отличается от своих старших братьев. К примеру он всплывает на странице сообщения после прокрутки страницы вниз, если вернуть страницу в исходное состояние виджет прячется обратно. Так же он имеет несколько других замечательных функций: его можно свернуть или закрыть, как страницу браузера и естественно в нем присутствует функция отзывчивого дизайна (responsive design). Еще к плюсам можно отнести его легкость, то есть он не так нагружает страницу, как предыдущие версии. Пример виджета смотрим на тестовом блоге.

Для установки нужно перейти в раздел Шаблон - Изменить HTML ищем код ]]></b:skin> и перед ним вставляем:


/* Recommended Widget */
#chslidingbox{background:#fff;width:100%;max-width:355px;height:305px;position:fixed;overflow:hidden;border:none;right:-360px;z-index:99;text-align:left;box-shadow:0 1px 0 0 rgba(0,0,0,0.03);transition:all .4s ease-out;}
.chslidingbox-title{background:#9eb2c0;color:#fff;display:block;height:45px;line-height:45px;width:100%;font-size:14px;text-transform:capitalize;font-weight:700;letter-spacing:.5px}
.chslidingbox-title span a{font-family:initial;float:right;height:40px;margin:0 0 0 15px;text-align:center;color:#fff;font-size:20px}a#chslidingbox-close, a#chslidingbox-close {margin-right:15px;}
.chslidingbox-title > span > h2{font-size:20px!important;font-weight:normal!important;}.chslidingbox-container{border:none;float:left;width:100%;height:auto;margin:3px}.chslidingbox-container > div{border:none;margin:3px 0;padding:10px 0}
.chslidingbox-container > div > span {font-size:14px;}.show{bottom:84px;}
.hide{bottom:-145px;}
.related-post{font-size:70%}
.related-post h4 {font-size:150%;margin:0 0 .5em;}
.related-post-style-2{margin-top:-20px;padding-top:15px;list-style:none}.related-post-style-2 li {padding:0 10px 10px 10px;overflow:hidden;}.related-post-style-2 li:first-child {border-top:none}.related-post-style-2 
.related-post-item-thumbnail{width:45px;height:45px;max-width:none;max-height:none;border:0;padding:0;border-radius:3px;float:left;margin:2px 10px 0 0}.related-post-style-2 .related-post-item-title{font-weight:700;font-size:130%;line-height:normal}
a.related-post-item-title {color:#95a5a6;transition:all .4s ease-out;}
a:hover.related-post-item-title {color:#2ecc71;text-decoration:none;}.related-post-style-2 .related-post-item-summary {display:block;overflow:hidden;}

Затем ищем код <data:post.body/> которых в шаблоне может быть два, нам нужен второй по счету и после него выкладываем следующий код:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='show' id='chslidingbox'>
    <div class='chslidingbox-title chslidingbox-www'>
      <span style='float:left;margin:0 15px;'>Рекомендуем </span>
        <span><a href='javascript:void(0);' id='chslidingbox-close' title='close'>&#215;</a></span>
        <span><a href='javascript:void(0);' id='chslidingbox-minimize' title='minimize'>&#8722;</a></span>
        <span><a href='javascript:void(0);' id='chslidingbox-maximize' title='maximize'>+</a></span>
    </div>
    <div class='chslidingbox-container'>
<div class='related-post' id='sliding-tab'/>
<script type='text/javascript'>
var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
&quot;<data:label.name/>&quot;<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
</b:loop></b:if>];
var relatedPostConfig = {homePage: &quot;<data:blog.homepageUrl/>&quot;,widgetTitle: &quot;&lt;h4&gt;&lt;/h4&gt;&quot;,numPosts: 4,summaryLength: 0,
titleLength: &quot;auto&quot;,thumbnailSize: 45,noImage: &quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC&quot;,containerId: &quot;sliding-tab&quot;,newTabLink: true,moreText: &quot;&quot;,widgetStyle: 2,callBack: function() {}};
</script>
<script src='https://cdn.rawgit.com/Indzign/theme/master/recommended.js' type='text/javascript'/>         
</div>
</div>
</b:if>

И последний шаг, находим код </body> и перед ним добавляем код:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
$(window).scroll(function(){$("#chslidingbox").css($(this).scrollTop()>400?{right:"0px"}:{right:"-360px"})}),$(document).ready(function(){var i=$("#chslidingbox"),s=$("#chslidingbox-close"),o=$("#chslidingbox-minimize"),l=$("#chslidingbox-maximize");l.hide(),s.click(function(){i.css({right:"-350px"}),i.fadeOut("slow")}),o.click(function(){i.toggleClass("hide"),$(this).hide(),l.show()}),l.click(function(){i.toggleClass("hide"),$(this).hide(),o.show()})});
//]]>
</script>
</b:if>

Сохраняете свой шаблон и проверяете, что в итоге получилось.

Обычный вариант виджета

Blogger - blogspot, как установить (добавить) на сайт или блог виджет похожие сообщения (статьи, посты) - related posts.

На сегодняшний день любому вебмастеру или блоггеру сложно представить себе сайт или блог без виджета схожих между собой постов. К сожалению стандартные шаблоны blogger не имеют в своем репертуаре подобного виджета. Поэтому владельцу веб-ресурса нужно устанавливать его самому. И сегодня мы с вами разберем, как это делается, но прежде поговорим о его пользе.

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

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

1.) Для установки первого варианта перейдите в раздел Шаблон - Изменить HTML ищем код ]]></b:skin> и перед ним вставляем код:

CSS/* MBL Thumbnail Related Posts With ToolTips --- */

    #related-posts h2 {
    font: 18px Oswald;
    color: #999;
    text-transform: uppercase;
    padding: 10px;
    text-align: center;
    }

    .related-post .post-thumbnail {
     z-index: 1;
     position: relative;
     width: 98px;
     height: 98px;
     margin: 0;
     display: block;
     border-right: 1px solid #fff;
     border-bottom: 1px solid #fff;
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
     border-radius: 5px;
     -webkit-box-shadow: inset 2px 2px 5px #444;
     -moz-box-shadow: inset 2px 2px 5px #444;
     box-shadow: inset 2px 2px 5px #555;
    }
    .related-post {
     float: left;
     position: relative;
     width: 98px;
     height: 98px;
     margin: 0 10px 10px 0;
     background: #F6F6F6;
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
     border-radius: 5px;
     }
    .related-post .related-post-title {
     display: none;
     float: left;
     background: #000;
     color: #fff;
     text-shadow: none;
     font-weight: bold;
     padding: 10px;
     position: absolute;
     top: -20px;
     left: 40px;
     z-index: 2;
     width: 200px;
     -webkit-box-shadow: 0 0 2px #444;
     -moz-box-shadow: 0 0 2px #444;
     box-shadow: 0 0 2px #444;
    }
    .related-post:hover .related-post-title {display: block;}

После ищем код <div class='post-footer'> их в шаблоне может быть два, нам нужно найти второй и сразу после него вставить следующий код:

JS
 <div id='related-posts'>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <script type='text/javascript'>//<![CDATA[
      var ry='<h2>Рекомендуем:</h2>';rn='<h3>&nbsp;&nbsp;&nbsp;No related post available</h3>';rcomment='comments';rdisable='disable comments';commentYN='no';
    var dw='';titles=new Array();titlesNum=0;urls=new Array();timeR=new Array();thumb=new Array();commentsNum=new Array();comments=new Array();function related_results_labels(c){for(var b=0;b<c.feed.entry.length;b++){var d=c.feed.entry[b];titles[titlesNum]=d.title.$t;for(var a=0;a<d.link.length;a++){if('thr$total' in d){commentsNum[titlesNum]=d.thr$total.$t+' '+rcomment}else{commentsNum[titlesNum]=rdisable};if(d.link[a].rel=="alternate"){urls[titlesNum]=d.link[a].href;timeR[titlesNum]=d.published.$t;if('media$thumbnail' in d){thumb[titlesNum]=d.media$thumbnail.url}else{thumb[titlesNum]='http://lh3.ggpht.com/--Z8SVBQZ4X8/TdDxPVMl_sI/AAAAAAAAAAA/jhAgjCpZtRQ/no-image.png'};titlesNum++;break}}}}function removeRelatedDuplicates(){var b=new Array(0);c=new Array(0);e=new Array(0);f=new Array(0);g=new Array(0);for(var a=0;a<urls.length;a++){if(!contains(b,urls[a])){b.length+=1;b[b.length-1]=urls[a];c.length+=1;c[c.length-1]=titles[a];e.length+=1;e[e.length-1]=timeR[a];f.length+=1;f[f.length-1]=thumb[a];g.length+=1;g[g.length-1]=commentsNum[a]}}urls=b;titles=c;timeR=e;thumb=f;commentsNum=g}function contains(b,d){for(var c=0;c<b.length;c++){if(b[c]==d){return true}}return false}function printRelatedLabels(a){var y=a.indexOf('?m=0');if(y!=-1){a=a.replace(/\?m=0/g,'')}for(var b=0;b<urls.length;b++){if(urls[b]==a){urls.splice(b,1);titles.splice(b,1);timeR.splice(b,1);thumb.splice(b,1);commentsNum.splice(b,1)}}var c=Math.floor((titles.length-1)*Math.random());var b=0;if(titles.length==0){dw+=rn}else{dw+=ry;dw+='<div class="clear"/></div><ul>';while(b<titles.length&&b<20&&b<maxresults){if(y!=-1){urls[c]=urls[c]+'?m=0'}if(commentYN=='yes'){comments[c]=' - '+commentsNum[c]}else{comments[c]=''};dw+='<div class="related-post"><div class="related-post-title">'+titles[c]+'</div><a href="'+urls[c]+'" rel="nofollow"><img border="0" class="post-thumbnail" alt="'+titles[c]+'" src="'+thumb[c]+'"/></a></div></div>';if(c<titles.length-1){c++}else{c=0}b++}dw+='</ul>'};urls.splice(0,urls.length);titles.splice(0,titles.length);document.getElementById('related-posts').innerHTML=dw};
    //]]></script>
    <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&quot;' type='text/javascript'/>
    </b:loop>
    <script type='text/javascript'>var maxresults=6;removeRelatedDuplicates();printRelatedLabels(&#39;<data:post.url/>&#39;);</script>
    </b:if>
    </div>
    <div class='clear'/>

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

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

HTML<!--Related Posts with thumbnails Scripts and Styles Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts{float:left;width:auto;padding:10px;}
#related-posts a{border-right: 1px dotted #eaeaea;}
#related-posts a:hover{background: #EEEEEE;}
#related-posts h2{margin-top: 10px;background:none;font:18px Oswald;padding:3px;color:#999999; text-transform:uppercase;}
#related-posts .related_img {margin:5px;border:2px solid #f2f2f2;object-fit: cover;width:110px;height:100px;transition:all 300ms ease-in-out;-webkit-transition:all 300ms ease-in-out;-moz-transition:all 300ms ease-in-out;-o-transition:all 300ms ease-in-out;-ms-transition:all 300ms ease-in-out;-webkit-border-radius: 5px;  -moz-border-radius: 5px; border-radius: 5px; }
#related-title {color:#666;text-align:center;padding: 0px 5px 10px;font-size:12px;width:110px; height: 40px;}
#related-posts .related_img:hover{border:2px solid #E8E8E8;opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7}</style>
<script type='text/javascript' src='http://helplogger.googlecode.com/svn/trunk/relatedposts.js' />
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

После, как и в первом варианте находим код <div class='post-footer'> помним, что их может быть два, нам же нужен второй и после него выкладываем следующий код:

JS<!-- Related Posts with Thumbnails Code Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<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=25&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle=&quot;<b>Рекомендуем:</b>&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</b:if>
<!-- Related Posts with Thumbnails Code End-->

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

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

Mark Korvin 2/12/2019 31 Коммент.

31 Коммент.

Оставить комментарий

Opossum

июля 24, 2018

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

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

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

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

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

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

Рекомендуемые Сообщения между абзацами

Видео инструкция:

Всплывающий виджет похожие сообщения (related posts)

Blogger - blogspot устанавливаем на сайт - блог всплывающий виджет похожие сообщения (related posts).

Обычный вариант виджета

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

Рекомендуем

31 Коммент.

Рекомендуемые публикации

Видео

Последние публикации

Вопросы, Ответы, Отзывы