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

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

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

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

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

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

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

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



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



Для каждого ярлыка будут отображаться заголовки последних 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, чтобы адаптировать виджет к нашему макету . При желании вы также можете увеличить статическую страницу, чтобы показать больше контейнеров в одной строке.
Tags: виджеты, blogger, html
ОткрытьЗакрытьКомент
Cancel