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

Сейчас на сайте, рабочий виджет!!!

https://www.technoblogger.ru/2019/03/blogger-vidzhet-pohozhie-soobshcheniya.html

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

Как я уже говорил, этот пост очень важен по многим причинам. Например:

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

Увеличение просмотров страниц: если люди нажимают на любой связанный пост, созданный под этим постом, вы получаете дополнительный просмотр страницы для своего сайта.

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

Внутренняя ссылка: внутренняя ссылка является еще одним важным фактором SEO. Используя виджет похожие сообщения в своем блоге блоггера, вы делаете отличные автоматические внутренние ссылки. Что отлично подходит как для читателей, так и для SEO.

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

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

Шаг 1. Войдите в панель управления блоггером. Нажмите на раздел Тема>. Теперь нажмите кнопку « Изменить HTML », как показано ниже:

( Примечание. Перед редактированием следует сохранить резервную копию шаблона блоггера).

Шаг 2. Теперь найдите тег « </head> ». Вы можете искать код, нажав Ctrl + F. Теперь вставьте скрипт прямо над « </head> ».

Код:

<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
//<![CDATA[
var borelatedTitles=new Array();var rboTitlesNum=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];borelatedTitles[rboTitlesNum]=entry.title.$t;try{thumburl[rboTitlesNum]=entry.gform_foot.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[rboTitlesNum]=d}else thumburl[rboTitlesNum]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbMHGH-bJImDVVADSz1nlW_h9-5Ol3Dti12-UmlJKaYoUxANfRgp49kaIbs-GPvWop1BjSeBkYooo2yvnbXwd4RvyLJed_kMrc95wHaXI90Zvjacpjnu3ZJ-9mgzQEYONGHwl3nRIkfPRY/s1600/bo-related-post-no-thumbnail.png'}if(borelatedTitles[rboTitlesNum].length>35)borelatedTitles[rboTitlesNum]=borelatedTitles[rboTitlesNum].substring(0,45)+"...";for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){relatedUrls[rboTitlesNum]=entry.link[k].href;rboTitlesNum++}}}}function removeDuplicate_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]=borelatedTitles[i];tmp3[tmp3.length-1]=thumburl[i]}}borelatedTitles=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 printRelatedLabel_thumbs(){for(var i=0;i<relatedUrls.length;i++){if((relatedUrls[i]==findcurrentposturl)||(!(borelatedTitles[i]))){relatedUrls.splice(i,1);borelatedTitles.splice(i,1);thumburl.splice(i,1);i--}}var r=Math.floor((borelatedTitles.length-1)*Math.random());var i=0;if(borelatedTitles.length>0)document.write('<h4><span>'+titleofrelatedpost+'</span></h4>');document.write('<sl class="related-posts-list">');while(i<borelatedTitles.length&&i<20&&i<maxpost){document.write('<ci><a href="'+relatedUrls[r]+'"><span class="rthumb"><img class="related_img" src="'+thumburl[r]+'"/></span><p><span class="related-title">'+borelatedTitles[r]+'</span></p></a></ci>');if(r<borelatedTitles.length-1){r++}else{r=0}i++}document.write('</sl>');relatedUrls.splice(0,relatedUrls.length);thumburl.splice(0,thumburl.length);borelatedTitles.splice(0,borelatedTitles.length)}//]]></script>
</b:if>

Шаг 3. Теперь найдите другую строку, которая выглядит как « <div class='post-footer'> ». Теперь скопируйте приведенный ниже код и вставьте его прямо над этой строкой.

Код:

<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=7"' type='text/javascript'/>
</b:loop>
<script type='text/javascript'>
var findcurrentposturl="<data:post.url/>";
var maxpost=6;
var titleofrelatedpost="<b>Related Posts</b>";
removeDuplicate_thumbs();
printRelatedLabel_thumbs();
</script>
</div>
</b:if>

Настройка:

Вы можете увеличить или уменьшить выделенное число « 6 », чтобы контролировать количество связанных сообщений, которые будут отображаться под вашим сообщением в блоге.
Вы можете переименовать заголовок виджета соответствующей записи, переименовав выделенную « Related Post запись ».

Добавление CSS-кода виджета похожие сообщения:

Шаг 4. Вы добавили соответствующий виджет поста для своего блога блоггера. Теперь пришло время настроить его. Найдите CSS-часть шаблона блоггера. Код будет выглядеть так:

<b:skin>…. </b:skin>

Нажмите на черную стрелку, чтобы развернуть CSS. Скопируйте приведенный ниже код и вставьте его прямо над « ]]></b:skin> ». Все сделано. Теперь нажмите кнопку « Сохранить шаблон », как показано на скриншоте.

Код:

/* CSS For related post widget
----------------------------------------------- */
#related-posts {float:left;width:101%;}
#related-posts sl{margin:0 !important;padding:0 !important;}
#related-posts h4{text-align:center;margin:10px 0px 20px;font:18px Oswald;color:#696868;text-transform:uppercase}
.related-posts-list ci{background-color:#fff;box-shadow:0 0 4px rgba(180, 180, 180, 0.55);width:27%;float:left;position:relative;margin:0 3% 3% 0;padding:2%;}
.related-posts-list ci:nth-child(3n){margin-right:0 !important;}
#related-posts a{color:#696868;font:400 12px 'Oswald',sans-serif;text-decoration:none;}
#related-posts sl ci p{margin-bottom:0;padding-top:1px;}
#related-posts .related_img{height:64px;margin-bottom:0;width:64px;object-fit:cover;}
.related-title{text-align:center;padding:5px 0px;}.rthumb{float:left;margin-right:10px;}

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

СРИПТЫ ДЛЯ БЛОГЕРА - blogger.com

Страницы

четверг, 21 марта 2019 г.