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

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

Сегодня мы собираемся научиться установить раздел / виджет похожих сообщений в блог на платформе Google Blogger. Этот раздел появится в нижней части поста на отдельных страницах поста. После его интеграции вы наверняка станете свидетелями увеличения количества просмотров страниц. Перед попыткой интеграции сделайте резервную копию вашего шаблона Blogger. Лучшая стратегия будет сначала проверить это на демо блоге.

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

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

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

Добавьте основной CSS и JavaScript.

Сделав резервную копию шаблона, откройте его HTML-код на панели инструментов Blogger. Перейдите в раздел Тема → Изменить HTML, чтобы открыть код шаблона.

Все приведенные ниже фрагменты кода должны быть включены непосредственно перед </head> тегом в шаблоне. Включение должно быть в том порядке, в котором они указаны ниже.

Прежде всего, добавьте следующие правила CSS, которые применяют базовые стили к разделу похожие сообщения

<style>
#related-posts{
    float:center;
    text-transform:none;
    height:100%;
    padding-top:20px;
    padding-left:5px;
    font-size:15px;
    border-top:1px solid #ddd;
    margin-top:25px
}
#related-posts h2{
    font-size:25px;
    text-transform:none;
    letter-spacing:0em;
    color:#555;
    font-family:Georgia,sans-serif;
    margin-bottom:.7em;
    margin-top:0em;
    padding-top:0em
}
#related-posts a{
    font-family:Georgia,serif;
    text-align:center;
    border-right:1px dotted #DDD;
    color:#2361A1;
    padding:10px 10px 0 10px!important;
    min-height:250px
}
#related-posts a:hover{
    background-color:#E5E5E5
}
</style>

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

И прямо под этими правилами CSS добавьте следующий код JavaScript. Это основной код раздела похожих сообщений, необходимый для его функционирования.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
/*<![CDATA[*/
var post_thumbnail_width = 180;var post_thumbnail_height = 120;var max_related_entries = 6;
function escapeRegExp(string){return string.replace(/[.*+?^${}()|[\]\\]/g,"\\$&")}function replaceAll(str,term,replacement){return str.replace(new RegExp(escapeRegExp(term),"g"),replacement)}function display_related_posts(json_feed){for(var defaultnoimage="https://i.ibb.co/yS6JvBh/no-image.jpg",post_titles=new Array,title_num=0,post_urls=new Array,post_thumbnail_url=new Array,relatedpoststitle=(window.location.href,"You might also like:"),border_color="#DDDDDD",i=0;i<json_feed.feed.entry.length;i++){var feed_entry=json_feed.feed.entry[i];post_titles[title_num]=feed_entry.title.$t;try{post_thumbnail_url[title_num]=feed_entry.media$thumbnail.url}catch(error){s=feed_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),-1!=a&&-1!=b&&-1!=c&&""!=d?post_thumbnail_url[title_num]=d:"undefined"!=typeof defaultnoimage?post_thumbnail_url[title_num]=defaultnoimage:post_thumbnail_url[title_num]="https://i.ibb.co/yS6JvBh/no-image.jpg"}for(var k=0;k<feed_entry.link.length;k++)"alternate"==feed_entry.link[k].rel&&(post_urls[title_num]=feed_entry.link[k].href,title_num++)}var random_entry=Math.floor((post_titles.length-1)*Math.random()),iteration=0;if(post_titles.length>0){var rp_heading=document.createElement("h2"),textnode=document.createTextNode(relatedpoststitle);rp_heading.appendChild(textnode),document.getElementById("related-posts").appendChild(rp_heading);var rp_container=document.createElement("div");rp_container.setAttribute("style","clear: both;"),rp_container.setAttribute("id","rp-container"),document.getElementById("related-posts").appendChild(rp_container)}for(;iteration<post_titles.length&&20>iteration&&max_related_entries>iteration;)if(post_urls[random_entry]!=currentURL){var rp_anchor=document.createElement("a");0!=iteration?rp_anchor.setAttribute("style","text-decoration:none;padding:10px;float:left;border-left: none "+border_color+";"):rp_anchor.setAttribute("style","text-decoration:none;padding:10px;float:left;"),rp_anchor.setAttribute("id","rp-anchor-"+iteration),rp_anchor.setAttribute("href",post_urls[random_entry]),document.getElementById("rp-container").appendChild(rp_anchor);var rp_img=document.createElement("img");rp_img.setAttribute("style","width:"+post_thumbnail_width+"px;height:"+post_thumbnail_height+"px; border:1px solid #CCCCCC;"),rp_img.setAttribute("id","rp-img-"+iteration);var pin=String(post_thumbnail_url[random_entry].match(/\/s72-c\//));post_thumbnail_url[random_entry]=replaceAll(post_thumbnail_url[random_entry],pin,"/w"+post_thumbnail_width+"-h"+post_thumbnail_height+"-p/"),rp_img.setAttribute("src",post_thumbnail_url[random_entry]),rp_img.setAttribute("alt","Matched post excerpt thumbnail in the post footer."),document.getElementById("rp-anchor-"+iteration).appendChild(rp_img);var rp_para=document.createElement("div");rp_para.setAttribute("style","width:"+post_thumbnail_width+"px; height:"+post_thumbnail_height+"px;border: 0pt none ; margin: auto; padding-top: 18px; line-height:1.6;"),rp_para.setAttribute("id","rp-para-"+iteration);var textnode=document.createTextNode(post_titles[random_entry]);rp_para.appendChild(textnode),document.getElementById("rp-anchor-"+iteration).appendChild(rp_para),iteration++,random_entry<post_titles.length-1?random_entry++:random_entry=0}else iteration++,random_entry<post_titles.length-1?random_entry++:random_entry=0;post_urls.splice(0,post_urls.length),post_thumbnail_url.splice(0,post_thumbnail_url.length),post_titles.splice(0,post_titles.length)}
/*]]>*/
</script>
</b:if>

Теперь вам нужно обратить внимание на 3 важные переменные, которые вы можете увидеть в начале кода JavaScript. Все 3 из них помогут вам изменить важные атрибуты раздела похожие сообщения.

Каждая запись в разделе похожие сообщения включает в себя миниатюрное изображение, выбранное из поста, а также заголовок поста. Эскизное изображение обычно является первым изображением, включенным в сообщение.

Числовые значения присваиваются переменным post_thumbnail_widthи, post_thumbnail_height управляют шириной и высотой миниатюрного изображения. Эти числовые значения используются в качестве значений пикселей в коде. Вы можете изменить эти числовые значения в соответствии с вашими потребностями.

Совет для профессионалов: для достижения наилучших результатов либо сохраняйте одинаковые значения миниатюр ширины и высоты, либо ширину на 20–30% больше, чем высота.

В зависимости от ширины раздела содержимого вашей темы вам может потребоваться настроить размер эскиза с помощью обеих этих переменных. Не стесняйтесь экспериментировать с размером миниатюры в своем блоге. Третья переменная контролирует максимальное количество записей, которые вы хотите в этом разделе. Значение по умолчанию гарантирует, что в этом разделе можно получить максимум 6 похожих сообщений. Вы можете увеличить или уменьшить это значение в соответствии с вашими требованиями. Вот как может выглядеть пример раздела связанных постов. Здесь максимальное количество записей, разрешенных в этом разделе, равно 6, а ширина миниатюрного изображения больше высоты. В этот же раздел могут также входить уменьшенные и квадратные миниатюрные изображения и до 8 записей по 4 из них - на строку.

Все зависит от того, как вы используете доступные 3 переменные в своем блоге.
Теперь, когда мы интегрировали основные CSS и JavaScript для раздела связанных постов, пришло время завершить последний и самый важный шаг.

Вставить код рендеринга раздела 

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

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

<div class='post-footer'> или <data:post.body/>

Код <div class='post-footer'> будет встречаться несколько раз, на нужен последний. Код должен быть расположен прямо под этой строкой, как и в случае с кодом <data:post.body/> он встречается один раз. Вопрос в том, какую строку выбрать в вашем шаблоне? 

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

Если это не так, удалите код под строкой и вставьте его поверх строки. Еще раз обновите веб-страницу и посмотрите расположение раздела похожие сообщения. И вот последний фрагмент кода, который нужно вставить ниже / выше строки, упомянутой выше.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop index='labelcount' values='data:post.labels' var='label'>
<script>
  var currentURL = &#39;<data:blog.url/>&#39;;
</script>
<b:if cond='data:labelcount &lt; 1'>
<script async='async' expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=display_related_posts&quot;' type='text/javascript'/></b:if></b:loop>
</div><div style='clear:both'/>
</b:if>

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

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

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