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

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

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

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

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

Уменьшить показатель отказов. Если вы получаете больше просмотров страниц, это означает, что общий показатель отказов вашего сайта будет уменьшаться. Это очень важно для 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/AVvXsEjAyaDpojbOZ-LWHRtVk_0PvI4UxOlfMLFJX2njt03iO9xjq3zwQghpT8OWvh3Eh1QqqHtMzlJa_vbDSiiCzfIZLPSQgtgx66QM7NG9LIi5tD7t5tg8lV4fhNE18FhMLp-X0_HrgkSku4hF/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;}

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

Cancel