К этому времени каждый блоггер использует виджет похожие сообщения чтобы показать читателям больше похожих сообщений. Использование виджета похожие сообщения под каждым постом в блоге очень важно для нескольких случаев. Итак, в этой статье я покажу вам, как добавить виджет похожие сообщения для блога блогера. Я также предоставлю красивый адаптивный виджет похожие сообщения с миниатюрой.
Как я уже говорил, этот пост очень важен по многим причинам. Например:
- Вовлечение пользователей: если вы будете показывать похожие посты под каждым постом в блоге, тогда у пользователя будет возможность получить больше связанных источников на вашем сайте. Пользователь получает возможность посещать больше связанных тем на вашем сайте. Эта деятельность повышает заинтересованность пользователей вашего сайта.
- Увеличение просмотров страниц: если люди нажимают на любой связанный пост, созданный под этим постом, вы получаете дополнительный просмотр страницы для своего сайта.
- Уменьшить показатель отказов. Если вы получаете больше просмотров страниц, это означает, что общий показатель отказов вашего сайта будет уменьшаться. Это очень важно для SEO.
- Внутренняя ссылка: внутренняя ссылка является еще одним важным фактором SEO. Используя виджет похожие сообщения в своем блоге блогера, вы делаете отличные автоматические внутренние ссылки. Что отлично подходит как для читателей, так и для SEO.
Адаптивный виджет похожие сообщения с картинками
Мы уже знали о важности связанных постов. Итак, теперь давайте посмотрим, как добавить его в каждый пост блогера. По умолчанию, блогер не предоставляет виджет похожие сообщения. Вот почему я публикую этот виджет для вас.
Шаг 1. Войдите в панель управления блогером. Нажмите на раздел Тема>. Теперь нажмите кнопку « Изменить HTML », как показано ниже:
( Примечание. Перед редактированием следует сохранить резервную копию шаблона блоггера).
Шаг 2. Теперь найдите тег « </head> ». Вы можете искать код, нажав Ctrl + F. Теперь вставьте скрипт прямо над « </head>».
<!— Related Posts widget with Thumbnails Code Before Head Start—> <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]=’http://4.bp.blogspot.com/-F002tFjL7uc/WBnyVY0GMQI/AAAAAAAAD9k/TOBMkutnQmUw4mQ8qkJrFUAhA2qaWW8nQCLcB/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> <!— Related Posts widget with Thumbnails Code Before Head Ends—>
Шаг 3. Теперь найдите другую строку, которая выглядит как « <div class=’post-footer’> ». Теперь скопируйте приведенный ниже код и вставьте его прямо над этой строкой.
<!— Related Posts widget with Thumbnails Code Before Post Footer Start—> <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> <!— Related Posts widget with Thumbnails Code Before Post Footer Ends—>
Настройка:
Вы можете увеличить или уменьшить выделенное число « 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;}
Вы успешно добавили виджет похожие сообщения в блоге блогера. Если вам нравится этот виджет, то поделитесь им. Если есть какие-либо проблемы с добавлением этого виджета в ваш блог, то дайте мне знать, оставив комментарий. Я вернусь к вам очень скоро.
