Ах, тази карта на блога...Епопеята продължава

Ах, тази карта на блога…Епопеята продължава. Мразя тази "карта на блога" за Blogger. Може би ще бъдете изненадани от това заглавие на публикацията ми, но епопеята "Карта на блога" за Blogger най-накрая и окончателно ми омръзна.

За неработещите вече кодове на картата на блога

През 2016-та бях щастлива като дете, откривайки работеща версия на картата на блога в Интернет, и то в няколко варианта. Това ме накара да споделя с вас, приятели, всички работещи кодове, които съм открила. Но радостта ми се оказа краткотрайна. Голяма част от кодовете на картите сега, в момента, спряха да работят. Това ме накара да направя корекции във вече публикуваните за тях материали. И да пристъпя към продължителната, почти една седмица, работа, по съвета на моя приятелка. Ръчно да нанасям на статичната страница имената и адресите на всичко, което е вече публикувано в блога ми. Ще побързам, докато броят на публикациите ми не е станал триста. Много трудоемка работа.
А вие, приятели, ако имате в блоговете си работещи кодове на карта на блога, съдържание, или както там го наричаме, бихте ли ги споделили с мен?
Благодаря за отзивчивостта ви. Ще чакам да ми пишете. А сега ето и два работещи в момента кода за карта на блога.

Динамическа карта на блога

Много интересен способ за инсталиране карта на блога, предложен от виетнамски програмист. Този способ се основава на използването на кода от един динамически шаблон на Blogger заедно с тага Iframe. 

Код:

<center>

<style type="text/css">

.sbis {

overflow: hidden;

position: relative;

height: 565px;

margin: 20px 0 40px 0;

}

.sbis iframe {

display: block;

width: 100%;

height: 680px;

margin-top: -115px;

margin-left: -10px;

padding-right: 10px;

}

</style>

<div class="sbis">

<iframe src="https://####/view/flipcard"></iframe>

</div>

</center>

За да имате такава карта копирайте кода, създайте статична страница и в режим на HTML редакция впишете кода в нея. После намерете в кода реда

<iframe src="####/view/flipcard"></iframe>

➤И вместо решетката впишете URL адреса на вашия блог;

➤Освен това значението flipcart можете да замените с едно от следните значения: timeslide, classic, sidebar, magazine, mosaic или snapshot.

➤Публикувайте;

Вижте я тук. Експериментирайте.

Карта на блога тип „Акордеон“

Тази карта на блога вижте в „Библиотека Пъстри халища“ тук.

Важно!

Ако промените нещо в кода, дори да е само цвета на фона, скрипта спира да работи. Но пробвайте.

Код:

<style scoped="" type="text/css">

.table-of-content{background-color:#fff;color:#444;font-family:Verdana,Geneva,Tahoma,Arial,Sans-serif;font-size:13px;font-weight:400;overflow:hidden;border-radius:4px;box-shadow:0 0 10px rgba(0,0,0,.2)}

.table-of-content .toc-header{color:#444;font-family:inherit;font-weight:400;font-size:14px;background-color:#fff;margin:0;padding:15px;overflow:hidden;cursor:pointer;border-bottom:1px solid #ccc;transition:initial}

.table-of-content .toc-header:hover{background-color:#fdfdfd}

.table-of-content .toc-header:before{content:'';width:0;height:0;position:absolute;top:22px;right:15px;border:5px solid transparent;border-color:#aaa transparent transparent;transition:all .3s ease}

.table-of-content .toc-header.active{color:#fc4f3f}

.table-of-content .toc-header.active:before{border-color:#666 transparent transparent;top:16px;-webkit-transform:rotate(-180deg);-moz-transform:rotate(-180deg);-ms-transform:rotate(-180deg);-o-transform:rotate(-180deg);transform:rotate(-180deg)}

.table-of-content .loading{display:block;padding:15px;text-decoration:blink}

.table-of-content ol{margin:0;padding:0;list-style:none;transition:initial}

.table-of-content li{line-height:normal!important;margin:0!important;padding:8px 8px 8px 15px!important;white-space:nowrap;text-align:left;overflow:hidden;background:#444359!important;transition:initial}

.table-of-content a{color:#d9d9d9!important;text-decoration:none;font-size:86%;transition:initial}

.table-of-content a:visited{color:#a2a2a9;transition:initial}

.table-of-content a:hover,.table-of-content a:visited:hover{color:#ffc937!important;text-decoration:none;transition:initial}

.post ol li:before{display:none}

</style>

<div class="table-of-content" id="table-of-content">

<span class="loading">Загрузка...</span></div>

<script>

var toc_config = {

url: "https://"+window.location.hostname,

containerId: 'table-of-content',

showNew: 15,

newText: ' <strong style="font-weight:normal;font-style:normal;color:#fff;font-size:11px;background:#5c5a78;padding:1px 6px 3px 6px;line-height:normal;float:right;border-radius:3px;">New</strong>',

sortAlphabetically: {

thePanel: true,

theList: true

},

maxResults: 9999,

activePanel: 1,

slideSpeed: {

down: 400,

up: 400

},

slideEasing: {

down: null,

up: null

},

slideCallback: {

down: function() {},

up: function() {}

},

clickCallback: function() {},

jsonCallback: '_toc',

delayLoading: 0

};

</script>

<script>

!function(e,o){var t=o.getElementById(toc_config.containerId),c=o.getElementsByTagName("head")[0],n=[];e[toc_config.jsonCallback]=function(e){for(var o,c,i=e.feed.entry,a=e.feed.category,l="",s=0,d=a.length;d>s;++s)n.push(a[s].term);for(var r=0,f=i.length;f>r;++r)(toc_config.showNew||toc_config.showNew>0)&&r<toc_config.showNew+1&&(i[r].title.$t+=" %new%");i=toc_config.sortAlphabetically.theList?i.sort(function(e,o){return e.title.$t.localeCompare(o.title.$t)}):i,toc_config.sortAlphabetically.thePanel&&n.sort();for(var g=0,h=n.length;h>g;++g){l+='<h3 class="toc-header">'+n[g]+"</h3>",l+='<div class="toc-content"><ol>';for(var _=0,p=i.length;p>_;++_){o=i[_].title.$t;for(var w=0,u=i[_].link.length;u>w;++w)if("alternate"==i[_].link[w].rel){c=i[_].link[w].href;break}for(var v=0,m=i[_].category.length;m>v;++v)n[g]==i[_].category[v].term&&(l+='<li><a href="'+c+'">'+o.replace(/ \%new\%$/,"")+"</a>"+(o.match(/\%new\%/)?" "+toc_config.newText:"")+"</li>")}l+="</ol></div>"}t.innerHTML=l,"undefined"!=typeof jQuery&&($("#"+toc_config.containerId+" .toc-content").hide(),$("#"+toc_config.containerId+" .toc-header").click(function(){$(this).hasClass("active")||(toc_config.clickCallback(this),$("#"+toc_config.containerId+" .toc-header").removeClass("active").next().slideUp(toc_config.slideSpeed.up,toc_config.slideEasing.up,toc_config.slideCallback.up),$(this).addClass("active").next().slideDown(toc_config.slideSpeed.down,toc_config.slideEasing.down,toc_config.slideCallback.down))}).eq(toc_config.activePanel-1).addClass("active").next().slideDown(toc_config.slideSpeed.down,toc_config.slideEasing.down,toc_config.slideCallback.down))};var i=o.createElement("script");i.src=toc_config.url.replace(/\/$/,"")+"/feeds/posts/summary?alt=json-in-script&max-results="+toc_config.maxResults+"&callback="+toc_config.jsonCallback,"onload"==toc_config.delayLoading?e.onload=function(){c.appendChild(i)}:e.setTimeout(function(){c.appendChild(i)},toc_config.delayLoading)}(window,document);

</script>

Освен това "Библиотека Пъстри халища" е вече на протокол HTTPS, което според мен също има значение за работата на скриптовете.

P.S.

Мой приятел сподели, че без проблем използва този скрипт:

<script type="text/javascript">

var numposts = 100;

var standardstyling = true;

function showrecentposts(json) {

for (var i = 0; i < numposts; i++) {

var entry = json.feed.entry[i];

var posttitle = entry.title.$t;

var posturl;

if (i == json.feed.entry.length) break;

for (var k = 0; k < entry.link.length; k++) {

if (entry.link[k].rel == 'alternate') {

posturl = entry.link[k].href;

break;

}}

posttitle = posttitle.link(posturl);

if (standardstyling) document.write('<li>');

document.write(posttitle);}

if (standardstyling) document.write('</li>');

}

</script>

<ul>

<script src="https://Url на вашия блог/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts&amp;max-results=999"></script>

</ul>

Но подозирам, че ако имате повече от 100 публикации в блога си, всяка следваща ще измества по-стара и така винаги ще имате само 100 на брой публикации, изписани в този тип карта. Но може да пробвате.

Доскоро!

Здраве за всички вас! Не забравяйте да правите добро на други хора!

Ще съм благодарна да оцените моя труд и кликнете върху звездичките по-долу. Или гласувайте за блога на: