В последние дни я получил несколько вопросов о том, как показывать посты данного ярлыка на статической странице Blogger. Целью такой работы было бы создание меню с элементами, самых важных ярлыки нашего блога в Blogger.
Таким образом, посетитель сможет прокручивать миниатюры и заголовки постов, к которым мы добавили определённый ярлык. Код будет работать и с более старыми темами Blogger, так и с новыми темами blogger . Код javascript виджета, адаптирован для этой цели.
Сообщения с ярлыком на странице Blogger
Прежде чем перейти к иллюстрации кода, нам нужно сосредоточиться на том, как работают ярлыки Blogger. В Blogger вы можете создавать ярлыки, из двух или более слов, строчными буквами, заглавными буквами, ударениями и даже апострофами. Это чувствительные к регистру элементы в том смысле, что, например, метка Blogger будет отличаться от метки блогера. который в свою очередь будет отличаться от BLOGGER.
Нажав на название ярлыка, в нижнем колонтитуле блога или в соответствующем виджете ярлыков, откроется страница с адресом, имеющим такую структуру nomeblog.blogspot.com/search/label/etichetta.
Если ярлык состоит из одного слова без специальных символов, он останется неизменным, но если бы он состоял из двух слов, его адрес стал бы таким
nomeblog.blogspot.com/search/label/due%20parole
в то время как если бы ярлык имел апостроф, например l’articolo, его URL стал бы
nomeblog.blogspot.com/search/label/l%27articolo
В основном пробелы заменяются строкой %20, а апострофы из %27. Для правильного функционирования гаджета, вставляемого в статическую страницу, хорошо избегать акцентированных гласных и специальных символов, потому что вы не можете заранее сказать, будет ли работать JavaScript или нет. Скриншот теста связан с темой Contempo.
Тем не менее, перейдите в панель управления Blogger в Страницы -> Новая страница и в HTML вставьте этот код.
<style>#contenitore{border:1px solid #666;width:100%;margin:0 auto}#el_box{margin:0px}.elementi{border:1px solid #ccc;margin:5px 0;padding:5px;height:79px}.elementi img{background:#aaa;padding:4px;float:left;height:70px;margin-right:8px;width:70px}.elementi h6,.elementi h6 a{font-size:14px!important;margin:0;color:#111}.elementi:hover{background-color:#afe5f3;}.elementi p{font:12px Georgia; text-align:justify;color:#555;line-height:14px;margin:5px 0}#caricamento{color:#888;font-family:Georgia;font-size:100px;letter-spacing:-10px;text-align:center;text-shadow:-5px 0 1px #444;background:#262626 url(https://lh5.googleusercontent.com/-0dKuTXHaBgU/Uyn6y4kXYjI/AAAAAAAAmVU/qW-_OdYVqF0/s300-no/ajax_loader.gif)) no-repeat 50% 50%;height:950px;border:1px solid #afe5f3;}#navigazione{border:1px solid #d4d4d4;color:#bbb;font-family:Georgia;font-size:12px;text-align:center;margin:0px}#navigazione:hover{background-color:#d4d4d4;}#navigazione a{color:#262626!important;font-family:Georgia!important;font-size:12px!important;font-weight:400!important;display:block;padding:5px 10px}#navigazione span{padding:5px 10px}#navigazione .next{float:right}#navigazione .previous{float:left}#navigazione .home{text-align:center}#navigazione a:hover,#navigazione span.noactived{color:transparant!important}</style><script type=’text/javascript’>//<![CDATA[var numfeed = 10;var startfeed = 0;var urlblog = «https://www.technoblogger.ru/»;var characnumber = 200;var urlprevious, urlnext;function maskolisfeed(johny,banget){var showfeed = johny.split(«<«);for(var i=0;i<showfeed.length;i++){if(showfeed[i].indexOf(«>»)!=-1){showfeed[i] = showfeed[i].substring(showfeed[i].indexOf(«>»)+1,showfeed[i].length);}}showfeed = showfeed.join(«»);showfeed = showfeed.substring(0,banget-1);return showfeed;}function mostrapost(json) {var entry, posttitle, posturl, postimg, postcontent;var showblogfeed = «»;urlprevious = «»;urlnext = «»;for (var k = 0; k < json.feed.link.length; k++) {if (json.feed.link[k].rel == ‘previous’) {urlprevious = json.feed.link[k].href;}if (json.feed.link[k].rel == ‘next’) {urlnext = json.feed.link[k].href;}}for (var i = 0; i < numfeed; i++) {if (i == json.feed.entry.length) { break; }entry = json.feed.entry[i];posttitle = entry.title.$t;for (var k = 0; k < entry.link.length; k++) {if (entry.link[k].rel == ‘alternate’) {posturl = entry.link[k].href;break;}}if («content» in entry) {postcontent = entry.content.$t;} else if («summary» in entry) {postcontent = entry.summary.$t;} else {postcontent = «»;}if («media$thumbnail» in entry) {postimg = entry.media$thumbnail.url;} else {postimg = «https://lh5.googleusercontent.com/-CQ9_FmDG2nY/UynxZ68NKBI/AAAAAAAAmVA/WF03wZqixTY/s300-no/no-immagini.jpg»;}showblogfeed += «<div class=’elementi’>»;showblogfeed += «<a href='» + posturl + «‘ target=’_blank’><img src='» + postimg + «‘ /></a>»;showblogfeed += «<h6><a href='» + posturl + «‘>» + posttitle + «</a></h6>»;showblogfeed += «<p>» + maskolisfeed(postcontent,characnumber) + «…</p>»;showblogfeed += «</div>»;}document.getElementById(«el_box»).innerHTML = showblogfeed;showblogfeed = «»;if(urlprevious) {showblogfeed += «<a href=’javascript:feed_nav(-1);’ class=’previous’> Предыдущие</a>»;} else {showblogfeed += «<span class=’noactived previous’> Предыдущие </span>»;}if(urlnext) {showblogfeed += «<a href=’javascript:feed_nav(1);’ class=’next’>Следующие</a>»;} else {showblogfeed += «<span class=’noactived next’>Следующие </span>»;}showblogfeed += «<a href=’javascript:feed_nav(0);’ class=’home’>В начало</a>»;document.getElementById(«navigazione»).innerHTML = showblogfeed;}function feed_nav(url){var p, parameter;if(url==-1) {p = urlprevious.indexOf(«?»);parameter = urlprevious.substring(p);} else if (url==1) {p = urlnext.indexOf(«?»);parameter = urlnext.substring(p);} else {parameter = «?start-index=1&max-results=» + numfeed + «&orderby=published&alt=json-in-script»}parameter += «&callback=mostrapost»;incluirscript(parameter);}function incluirscript(parameter) {if(startfeed==1) {removerscript();}document.getElementById(«el_box»).innerHTML = «<div id=’caricamento’></div>»;document.getElementById(«navigazione»).innerHTML = «»;var archievefeed = urlblog + «/feeds/posts/default/-/виджеты»+ parameter;var el_box = document.createElement(‘script’);el_box.setAttribute(‘type’, ‘text/javascript’);el_box.setAttribute(‘src’, archievefeed);el_box.setAttribute(‘id’, ‘Ip_etichette’);document.getElementsByTagName(‘head’)[0].appendChild(el_box);startfeed = 1;}function removerscript() {var elemen = document.getElementById(«Ip_etichette»);var parent = elemen.parentNode;parent.removeChild(elemen);}onload=function() { feed_nav(0); }//]]></script><div id=»el_box»></div><div id=»navigazione»></div>
Затем перейдите к публикации, не возвращаясь к записи, чтобы предотвратить вставку Blogger ссылок, которые могут поставить под угрозу код JavaScript.
Посмотрите видео для правильной вставке и настройке кода
Вот список наиболее важных изменений, которые нужно добавить в код:
- Предыдущие, Следующие и В начало могут быть заменены другими выражениями.
- Цветовые коды можно адаптировать к вашему стилю макета. Помните, что #afe5f3 — это цвет фона одного блока, когда на него указывает курсор
- Семейство шрифтов Georgia может быть изменено на одно или все его вхождения
- Существует два URL diretti di immagini, относящихся к GIF -загрузке и адресу изображения по умолчанию, которое отображается, когда в сообщении его нет. Вы можете заменить их другими URL-адресами.
- Миниатюре пост имеет размеры высота: 70 px и ширина: 70 px, которые могут быть изменены
- var numfeed = 10 ; определяет количество сообщений для отображения на странице
- var urlblog = «https://www.technoblogger.ru/« — это URL-адрес блога, который должен быть вставлен и который также может отличаться от URL-адреса блога, на котором опубликована эта статическая страница.
- var characnumber = 200; определяет количество символов для отображения во фрагменте
- height:950px; это высота рамки, и она была установлена для 10 элементов, которая остается неизменной при нажатии на Предыдущие или Следующие. Если вы хотите, чтобы показать более или менее 10 элементов следует увеличить или уменьшить значение высоты гаджета.
- Наконец, вместо виджеты введите название ярлыка, с которым мы хотим показать все сообщения. В случае ярлыка, состоящего из двух слов или специальных символов, прочитайте еще раз первую часть поста.
Я советую вам вставить код, как он есть на странице Blogger. Если вы скопируете и правильно вставите код, это должно работать. Вносить изменения в код можно только после проверки его работоспособности и совместимости с вашей темой.
