Виджет Популярные ярлыки Blogger на статической странице

На сайтах платформы Blogger статьи можно упорядочить по дате публикации и по ярлыкам. Нет никаких категорий, как это происходит в WordPress для создания иерархии между родительскими категориями и дочерними категориями. Этот тип хранилища порождает официальные виджеты Blogger, которые называются соответственно Labels и BlogArchive .

Blogger теги называются ярлыками а не теги, как это делается на WordPress. Гаджет Labels имеет идентификатор #Label1, если был добавлен только один. Вместо этого, если мы установим еще один, он будет иметь идентификатор #Label2 .

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

Ярлыки Blogger на статической странице

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

nomeblog.blogspot.com/search/label/nome-etichetta

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

Для каждого ярлыка будут отображаться заголовки последних 4 опубликованных сообщений, а также миниатюра первого изображения в статье. Если щелкнуть поле сообщения, откроется новая вкладка. Вместо этого, щелкнув ссылку «Дополнительно» , расположенную в конце каждого ярлыка, откроется классическая страница этого ярлыка с настраиваемым номером сообщения

Перейдите в Панель управления -> Страницы -> Новая страница и выберите HTML вместо Создать и вставьте этот код:

<style type=»text/css» scoped=»scoped»>#feed-list-container{margin-top:0px}.list-entries{background:white;border:1px solid #d8d8d8;}.list-entries ul,.list-entries li{margin:0;padding:0;list-style:none;}.list-entries li{padding:1em;border-bottom:1px solid #ddd;}.list-entries .main-title{padding:0;}.list-entries .main-title h4{display:block;font:inherit;font-weight:bold;padding:.5em 1em;background-color:#4f93c5;color:#fff;margin:0;line-height:normal;font-size:14px;margin-top:0 !important;}.list-entries .title a{font-weight:500;font-size:12px;text-decoration:none;text-align:justify;line-height:.4em;color:#222;}.list-entries .title a:hover{text-decoration:underline;color:#5886a7;}.list-entries img,.list-entries .fake-img{border:none;background-color:#333;margin:0 1em 0 0;padding:0;float:left}.list-entries .summary{overflow:hidden;color:#999;}.list-entries .more-link{border-bottom:none;}.list-entries .more-link a{display:block;line-height:2em;height:2em;overflow:hidden;text-decoration:none;background-color:#82b965;padding:.5em 1em;position:relative;font-weight:300;color:white}.list-entries .more-link a:after{content:»»;width:0;height:0;position:absolute;top:50%;right:.3em;border:4px solid transparent;border-left-color:white;margin-top:-4px}.list-entries .more-link a:hover{background-color:#71a555}.list-entries {margin:5px;width:260px; /* Larghezza dei post */float:left;font-size:9px;text-align:justify;font-weight:200;}</style><div id=»feed-list-container»><script type=»text/javascript»>var multiFeed = {feedsUri: [{name: «BLOGGER»,url: «https://tekhnologiya.blogspot.com/»,tag: «blogger» }, {name: «WIDGET»,url: «https://tekhnologiya.blogspot.com/»,tag: «widget» }, {name: «IMMAGINI»,url: «https://tekhnologiya.blogspot.com/»,tag: «immagini» }, {name: «SLIDESHOW»,url: «https://tekhnologiya.blogspot.com/»,tag: «slideshow» },{name: «YOUTUBE»,url: «https://tekhnologiya.blogspot.com/»,tag: «youtube» }, {name: «GOOGLE»,url: «https://tekhnologiya.blogspot.com/»,tag: «google» }, {name: «TEMPLATE»,url: «https://tekhnologiya.blogspot.com/»,tag: «modello» }, {name: «FACEBOOK»,url: «https://tekhnologiya.blogspot.com/»,
tag: «facebook» }, {
name: «TWITTER»,
url: «https://tekhnologiya.blogspot.com/»,
tag: «twitter» },{
name: «ANDROID»,
url: «https://tekhnologiya.blogspot.com/»,
tag: «android» }tag: «facebook» }, {name: «TWITTER»,url: «https://tekhnologiya.blogspot.com/»,tag: «twitter» },{name: «ANDROID»,url: «https://tekhnologiya.blogspot.com/»,tag: «android» } ],numPost: 4,showThumbnail: true,showSummary: true,summaryLength: 80,titleLength: «auto»,thumbSize: 64,containerId: «feed-list-container»,readMore: {text: «More«,endParam: «?max-results=20» }};var mf_defaults={feedsUri:[{name:»Posting JQuery»,url:»»,tag:»JQuery»},{name:»Posting CSS»,url:»»,tag:»CSS»},{name:»Widget-Widget Blogger»,url:»»,tag:»Widget»}],numPost:4,showThumbnail:true,showSummary:true,summaryLength:80,titleLength:»auto»,thumbSize:72,newTabLink:false,containerId:»feed-list-container»,listClass:»list-entries»,readMore:{text:»More»,endParam:»?max-results=20″},autoHeight:false,current:0,onLoadFeed:function(a){},onLoadComplete:function(){},loadFeed:function(c){var d=document.getElementsByTagName(«head»)[0],a=document.getElementById(this.containerId),b=document.createElement(«script»);b.type=»text/javascript»;b.src=this.feedsUri[c].url+»/feeds/posts/summary»+(this.feedsUri[c].tag?»/-/»+this.feedsUri[c].tag:»»)+»?alt=json-in-script&max-results=»+this.numPost+»&callback=listEntries»;d.appendChild(b)}};for(var i in mf_defaults){mf_defaults[i]=(typeof(multiFeed[i])!==undefined&&typeof(multiFeed[i])!==»undefined»)?multiFeed[i]:mf_defaults[i]}function listEntries(q){var p=q.feed.entry,c=mf_defaults,h=document.getElementById(c.containerId),a=document.createElement(«div»),d=»<ul>»,l=c.feedsUri.length,n,k,m,g;for(var f=0;f<c.numPost;f++){if(f==p.length){break}n=(c.titleLength!==»auto»)?p[f].title.$t.substring(0,c.titleLength)+(c.titleLength<p[f].title.$t.length?»&hellip;»:»»):p[f].title.$t;m=(«summary» in p[f])?p[f].summary.$t.replace(/<br ?\/?>/g,» «).replace(/<.*?>/g,»»).replace(/[<>]/g,»»):»»;m=(c.summaryLength<m.length)?m.substring(0,c.summaryLength)+»&hellip;»:m;g=(«media$thumbnail» in p[f])?'<img src=»‘+p[f].media$thumbnail.url.replace(/\/s72(\-c)?\//,»/s»+c.thumbSize+»-c/»)+'» style=»width:’+c.thumbSize+»px;height:»+c.thumbSize+’px;»>’:'<span class=»fake-img» style=»width:’+c.thumbSize+»px;height:»+c.thumbSize+’px;»></span>’;for(var e=0,b=p[f].link.length;e<b;e++){k=(p[f].link[e].rel==»alternate»)?p[f].link[e].href:»#»}d+='<li><div class=»inner»‘+(!c.autoHeight?’ style=»height:’+c.thumbSize+’px;overflow:hidden;»‘:»»)+»>»;d+=(c.showThumbnail)?g:»»;d+='<div class=»title»><a href=»‘+k+'»‘+(c.newTabLink?’ target=»_blank»‘:»»)+»>»+n+»</a></div>»;d+='<div class=»summary»>’;d+=»<span»+(!c.showSummary?’ style=»display:none;»‘:»»)+»>»;d+=(c.showSummary)?m:»»;d+=»</span></div>»;d+='<span style=»display:block;clear:both;»></span></div></li>’}d+=»</ul>»;d+='<div class=»more-link»><a href=»‘+c.feedsUri[c.current].url.replace(/\/$/,»»)+»/search/label/»+c.feedsUri[c.current].tag+c.readMore.endParam+'»‘+(c.newTabLink?’ target=»_blank»‘:»»)+»>»+c.readMore.text+»</a></div>»;a.className=c.listClass;a.innerHTML='<div class=»main-title»><h4>’+c.feedsUri[c.current].name+»</h4></div>»+d;h.appendChild(a);c.onLoadFeed(c.current);if((c.current+1)<l){c.loadFeed(c.current+1)}if((c.current+1)==l){c.onLoadComplete()}c.current++}mf_defaults.loadFeed(0);</script></div>

Он, как обычно, публикуется в режиме HTML, а не в Создать. Самые важные настройки следующие:

 

1. Стиль границ — 1px solid #d8d8d8; и 1px solid #ddd;
2. Цвет фона, цвет текста с цветовыми кодами
3. Высота межстрочного интервала — высота строки
4. Размер шрифта — размер шрифта — ярлык, название и Incipit
5. Ширина контейнеров — 260 пикселей
6. Вес — начертание шрифт — наибольшее число = ближе к жирному шрифту
7. Количество постов для показа в контейнере — 4 предложенных
8. summaryLength: 80 , — количество символов в строке
9. thumbSize: 64, размер миниатюр в пикселях
10. text: «More», — текст для отображения в ссылке в конце контейнера
11. «? max-results = 20»— Количество сообщений для отображения на странице ярлыка

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

{
name: «NOME VISUALIZZATO NEL CONTAINER«,
url: «URL_DELLA_HOME_DEL_BLOG«,
tag: «NOME_ETICHETTA» },

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

Наконец, вы можете выбрать количество столбцов для каждой строки в зависимости от ширины области публикации вашей модели Blogger. Если ширина контейнеров равна 260 пикселям, ширина области публикации должна составлять не менее 800 пикселей, чтобы отображать три в одной строке. Вы можете изменить число 260, чтобы адаптировать виджет к нашему макету . При желании вы также можете увеличить статическую страницу, чтобы показать больше контейнеров в одной строке.