Не знаю

Подумать на тему выделения ярлыка другим способом... хотя может и не круто.
Но Цвет текста в общем возможно лучше менять.

    newText: " - <em style='color: white;padding: 1px 5px;border-radius: 20px;background-color: #F00;'>New!</em>" // HTML/CSS for
//the "New!" text

    newText: " - <em style='color:red;'>New!</em>" // HTML for the "New!" text



.toc-tabs li - ярлыки
toc .panel li - панель содержания

Просто текст.

<div dir="ltr" style="text-align: left;" trbidi="on">
<div id="tabbed-toc">
<span class="loading">Загрузка, подождите минуту...</span></div>
<script type="text/javascript">
var tabbedTOC = {
    blogUrl: "http://5trenirovka.blogspot.ru/", // Enter your blog URL
    containerId: "tabbed-toc", // Container ID
    activeTab: 1, // The default active tab index (default: the first tab)
    showDates: true, // `true` to show the post date
    showSummaries: false, // `true` to show the posts summaries
    numChars: 200, // Number of summary chars
    showThumbnails: false, // `true` to show the posts thumbnails (Not recommended)
    thumbSize: 40, // Default thumbnail size
    noThumb: "", // A "no thumbnail" URL
    monthNames: [ // Array of month names
        "Января",
        "Февраля",
        "Марта",
        "Апреля",
        "Мая",
        "Июня",
        "Июля",
        "Августа",
        "Сентября",
        "Октября",
        "Ноября",
        "Декабря"
    ],
    newTabLink: true, // Open link in new window. `false` to open in same window
    maxResults: 99999, // Maximum post results
    preload: 0, // Load the feed after 0 seconds (option => time in milliseconds || "onload")
    sortAlphabetically: true, // `false` to sort posts by published date
    showNew: 7, // `false` to hide the "New!" mark in most recent posts or
 //define how many recent posts are to be marked by changing the number
    newText: " - <em style='color: white;padding: 1px 5px;border-radius: 20px;background-color: #3979DD;'>New!</em>" // HTML/CSS for
//the "Новая!" text
};
<!-- ЦВЕТ ВОКРУГ нОВАЯ БЫЛ КРАСНЫЙ, ТЕПЕРЬ СИНИЙ. А ТЕКСТ БЕЛЫЙ. ПОДУМАТЬ!!! -->
</script>
<script src="https://googledrive.com/host/0B_PLgWpOK_wTazVMekZ3TTBiY2M/" type="text/javascript"></script>
<style>
/*Sitemap  */
#tabbed-toc {
 width: 99%;
 margin: 0 auto;
 overflow: hidden !important;
 position: relative;
 color: #1764DB;
 border: 0;
 border-top: 5px solid #B4EEB4;
 background-color: #AE34A8;
 -webkit-transition: all 0.4s ease-in-out;
}
 <!-- ЦВЕТ СИНИЙ ПОТЕМНЕЕ, хз, НЕ ПОНЯТНО, ВЛИЯЕТ НА ЦВЕТ ЗАГОЛОВКА ВИДИМО-->
 <!-- САЛАТОВЫЙ - ЦВЕТ ПОЛОСЫ СВЕРХУ, ГДЕ ПОДОЖДИТЕ ПОЖАЛУЙСТА... -->
 <!-- ФИОЛЕТОВЫЙ ХЗ ЧТО ЭТО, НЕ ВЛИЯЕТ ПОХОЖЕ -->
#tabbed-toc .loading {
 display:block;
 padding:5px 15px;
 font:normal bold 11px Arial,Sans-Serif;
 color:#851E1E;
}
 <!-- БЫЛ БЕЛЫЙ, СТАЛ ТЁМНО КРАСНЫЙ, цВЕТ ТЕКСТА "зАГРУЗКА ПОДОЖДИТЕ МИНУТУ! -->
#tabbed-toc ul,
#tabbed-toc ol,
#tabbed-toc li {
 margin:0;
 padding:0;
 list-style:none;
 }
#tabbed-toc .toc-tabs {
 width: 24.8%;
 float: left !important;
}
#tabbed-toc .toc-tabs li a {
 display:block;
 font:normal bold 10px/28px Arial,Sans-Serif;
 height:28px;
 overflow:hidden;
 text-overflow:ellipsis;
 color:#f9a057;
 text-transform:uppercase;
 text-decoration:none;
 padding:0 12px;
 cursor:pointer;
  -webkit-transition: all 0.3s ease-in-out;
}
<!-- бЫЛ СЕРЫЙ, СТАЛ ОРАНЖЕВЫЙ! ЦВЕТ БУКВ ЯРЛЫКА, КОГДА ОНИ НЕ ВЫДЕЛЕНЫ -->
#tabbed-toc .toc-tabs li a:hover {
 background-color: #78f9ef;
 color: #fd6b89;
 }
 <!-- БЫЛ ТЁМНО СЕРЫЙ, СТАЛ ЛАЗУРНЫЙ, ФОН ЯРЛЫКА, КОГДА НА НЕГО НАВОДЯТ МЫШЬЮ -->
 <!-- бЫЛ БЕЛЫЙ, СТАЛ рОЗОВЫЙ!!! ХЗ НА ЧТО ВЛИЯЕТ -->
#tabbed-toc .toc-tabs li a.active-tab {
 background-color: #aeac21; <!-- бЫЛ ЯРКО ЖЁЛТЫЙ, СТАЛ ТЁМНО ЖЁЛТЫЙ, ЦВЕТ ЯРЛЫКА, КОГДА ОН ВЫБРАН -->
 color: #8d1616; <!-- бЫЛ ЧЁРНЫЙ, СТАЛ ТЁМНО-КРАСНЫЙ, ХЗ ЧТО ЭТО -->
 position: relative;
 z-index: 5;
 margin: 0 -2px 0 0;
}
#tabbed-toc .toc-content,
#tabbed-toc .divider-layer {
 width: 75%;
 float: right !important;
 background-color: #ffffff;
 border-left: 5px solid #FFFC03;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
 -webkit-transition: all 0.3s ease-in-out;
}
 <!-- Был белый-ОСТАВИТЬ БЕЛЫЙ!!!!, стал СВЕТЛО-СИНИЙ, ЭТО ПЕРВАЯ СТРОКА СОДЕРЖАНИЯ И ТАКЖЕ ЗАПОЛНЯЕТ ПУСТОТЫ ЕСЛИ СТРОКА ТОЛЬКО ОДНА!!! -->
 <!-- ЖЁЛТЫЙ, ВЕРТИКАЛЬНАЯ ПОЛОСА ОТДЕЛЯЮЩАЯ ЯРЛЫКИ ОТ НАЗВАНИЙ, ПОЧЕМУ-ТО ПЕРЕКРЫВАЕТСЯ, ЕСЛИ В СТРОКЕ ВЫШЕ НЕ БЕЛЫЙ ЦВЕТ... -->
#tabbed-toc .divider-layer {
 float:none;
 display:block;
 position:absolute;
 top:0; right:0; bottom:0;
}
#tabbed-toc .panel {
 position:relative;
 z-index:5;
 font:normal normal 10px Arial,Sans-Serif;
}
#tabbed-toc .panel li a {
 display: block;
 position: relative;
 font-weight: bold;
 font-size: 11px;
 color: #64f07b;
 line-height: 2.8em;
 height: 30px;
 padding: 0 10px;
 text-decoration: none;
 outline: none;
 overflow: hidden;
 -webkit-transition: all 0.3s ease-in-out;
}
 <!-- бЫЛ ЧЁРНЫЙ, СТАЛ САЛАТОВЫЙ, оСТАВИТЬ ЧЁРНЫЙ, ЦВЕТ ТЕКСТА В ПАНЕЛИ СОДЕРЖАНИЯ -->
#tabbed-toc .panel li time {
 display:block;
 font-style:italic;
 font-weight:400;
 font-size:10px;
 color:#666;
 float:right;
}
<!-- БЫЛ СЕРЫЙ, СТАЛ БЕЖЕВЫЙ, ЦВЕТ ТЕКСТА ДАТЫ СТАТЬИ -->
#tabbed-toc .panel li .summary {
 display:block;
 padding:10px 12px;
 font-style:italic;
 border-bottom:4px solid #A8BCA8;
 overflow:hidden;
}
<!-- тЁМНО ЗЕЛЁНЫЙ ЗАМЕНЁН НА СВЕТЛО-ЗЕЛЁНЫЙ -->
#tabbed-toc .panel li .summary img.thumbnail {
 float:left;
 display:block;
 margin:0 8px 0 0;
 padding:4px;
 width:72px;
 height:72px;
 border:1px solid #bebebe;
 background-color:#ffffff;
}
<!-- ПЕРВЫЙ СЕРЫЙ ЗАМЕНИЛ НА ЖЁЛТЫЙ НЕЯРКИЙ, ВТОРОЙ - ОСТАВИТЬ БЕЛЫМ!!! вТОРАЯ СТРОЧКА СОДЕРЖАНИЯ! ИНАЧЕ ПОГЛОЩАЕТСЯ БЕЛЫЙ НА ОТТЕНОК СИНЕГО ГРЯЗНОВАТОГО -->
#tabbed-toc .panel li:nth-child(even) {
 background-color: #DBDBDB;
 font-size: 10px;
}
<!-- СЕРЫЙ, ХЗ ЧТО ЭТО -->
#tabbed-toc .panel li a:hover,
#tabbed-toc .panel li a:focus,
#tabbed-toc .panel li a:hover time,
#tabbed-toc .panel li.bold a {
 background-color:#f06e6e;
 color:#FFF;
 outline:none;
 -webkit-transition: all 0.3s ease-in-out;
}
<!-- Вот оно! красноватый оттенок теперь вместо чёрного. определяет цвет содержания при наведении -->
#tabbed-toc .panel li.bold a:hover,
#tabbed-toc .panel li.bold a:hover time {
 background-color:#228124;
}
<!-- чЁРНЫЙ НА ТЕМНО ЗЕЛЁНЫЙ, ХЗ ЧТО ЭТО -->
@media (max-width:700px) {
#tabbed-toc {
 background-color:#fff;
 border:0 solid #228124;
}
<!-- Заменил на тёмно-зелёный. ХЗ ЧТО ЭТО -->
#tabbed-toc .toc-tabs,
#tabbed-toc .toc-content {
 overflow:hidden;
 width:auto;
 float:none !important;
 display:block;
}
#tabbed-toc .toc-tabs li {
 display:inline;
 float:left !important;
}
#tabbed-toc .toc-tabs li a,
#tabbed-toc .toc-tabs li a.active-tab {
 background-color:#228124;
 color:#228124;
}
<!-- ЧЁРНЫЙ НА ТЁМНО-ЗЕЛЁНЫЙ. вторую тоже. ХЗ ЧТО ЭТО -->
#tabbed-toc .toc-tabs li a.active-tab {
 color:#228124;
}
<!-- чЁРНЫЙ НА ТЁМНО ЗЕЛЁНЫЙ. ХЗ ЧТО ЭТО -->
#tabbed-toc .toc-content {
 border:none;
}
#tabbed-toc .divider-layer,
#tabbed-toc .panel li time {
 display:none;
}
}
</style></div>

Что делать со светлым фоном?

Осталось выбрать светлый фон:

Сейчас светлый (сейчас светлее не надо!!!):
#a4d3ee - лайт скайблю2 - супер светлый! - как светлый

1) #b2dfee - или лайт блю 2 или просто  - получше! - ИСПОЛЬЗУЮ ЕГО!!!
2) #add8e6 лайт блю!!! ???? - не вижу разницы
3) #87ceeb илиSkyBlue - не уверен
4) #7ec0ee или SkyBlue2 - точно хуже


В качестве тёмного:
#4f94cd - стил блю 3 - новый тёмный, думаю будет лучше!

Старые цвета
#436eee
#6495ed

Карта сайта 3

Загрузка, подождите минуту...

Карта сайта 2

Загрузка, подождите минуту...

Второе

тектс 1


т2

Черновик 2

Черновик 2

Черновик 3

Черновик 3