Ненавижу "карту сайта" для Blogger или Эпопея продолжается...

Возможно, Вы удивитесь такому названию статьи, но эпопея с "картой сайта" для Blogger меня окончательно достала... 
В январе 2014 года я радовалась, как ребенок, обнаружив работающий вариант карты сайта в Интернете. Но радость моя была недолгой. Карта, в очередной раз, перестала работать... 
И вот, следующий (последний???) вариант оглавления всех статей для Блоггера, ссылку на который мне дал друг.


В январской статье (см. выше) я сделала небольшой обзор моей эпопеи с картами сайта. Поэтому сейчас расскажу, как поставить карту сайта для Blogger, работающую на 11.07.2014 г. Карта сайта раскрывающаяся - по принципу выпадающего меню. По тегам (ярлыкам) блога формируется весь список. При нажатии на один из них, выпадает список статей, к которым относится данный ярлык.

Сразу оговорюсь, что в исходном варианте, в источнике, сочетание основных кнопок с названиями ярлыков было серого цвета и голубого. Я заменила серый цвет на насыщенный синий (вернее, 2 цвета - об этом напишу ниже). Голубой цвет оставила.

Итак, делаем "содержание" блога или "карту сайта": 

1. Для начала, как и перед всеми изменениями в шаблоне, делаем резервную копию блога.

2. Заходим в настройки блога: Шаблон ->> Изменить HTML.

3. Ставим курсор внутрь рамки с кодом шаблона. При помощи клавиш Ctrl+F вызываем строку поиска, куда вставляем ]]></b:skin> и нажимаем Enter.

4. Ставим курсор перед найденным кодом. Вставляем пустую строку клавишей Enter. Затем вставляем вот такой код:

/*--------MBT TOC-----*/

.judul-label{

background-color:#E5ECF9;

font-weight:bold;

line-height:1.4em;

margin-bottom:5px;

overflow:hidden;

white-space:nowrap;

vertical-align: baseline;

margin: 0 2px;

outline: none;

cursor: pointer;

text-decoration: none;

font: 14px/100% Arial, Helvetica, sans-serif;

padding: .5em 2em .55em;

text-shadow: 0 1px 1px rgba(0,0,0,.3);

-webkit-border-radius: .5em;

-moz-border-radius: .5em;

border-radius: .5em;

-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);

-moz-box-shadow: 1px 1px 4px #AAAAAA;

box-shadow: 0 1px 2px rgba(0,0,0,.2);

color: #e9e9e9;

border: 2px solid white !important;

background: #6e6e6e;

background: -webkit-gradient(linear, left top, left bottom, from(#2A12B6), to(#4E36D5));

background: -moz-linear-gradient(top,  #2A12B6,  #4E36D5);

filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#2A12B6', endColorstr='#4E36D5');

}

.data-list{

line-height:1.5em;

margin-left:5px;

margin-right:5px;

padding-left:15px;

padding-right:5px;

white-space:nowrap;

text-align:left;

font-family:"Arial",sans-serif;

font-size:12px;

}

.list-ganjil{

background-color:#F6F6F6;

}

.headactive{

    color: #fef4e9;

    border: 2px solid white !important;

    background: #1C8DFF;

    background: -webkit-gradient(linear, left top, left bottom, from(#9dc2e7), to(#438cd2));

    background: -moz-linear-gradient(top,  #9dc2e7,  #438cd2);

    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#9dc2e7', endColorstr='#438cd2');

}

Нажимаем Просмотреть шаблон. Если нормально загрузился - Сохранить шаблон.

5. Сразу напишу, где поменять цвет синей кнопки - если Вам нужно. Если нет - пропускайте этот шаг.

Менять нужно 2 цвета, т.к. здесь градиентная заливка кнопки (сверху вниз). Каждый цвет еще меняем 3 раза - в трех строках:

background: -webkit-gradient(linear, left top, left bottom, from(#2A12B6), to(#4E36D5));

background: -moz-linear-gradient(top,  #2A12B6,  #4E36D5);

filter:  

progid:DXImageTransform.Microsoft.gradient(startColorstr='#2A12B6', endColorstr='#4E36D5');

То есть: from - верхняя часть кнопки, to - нижняя часть кнопки.

6. В настройках блога заходим в Страницы. Далее либо создаем новую страницу, либо изменяем старую страницу с картой сайта.

7. В режиме редактирования страницы HTML вставляем следующий код:

<script src="http://nurulimaminfo.googlecode.com/files/daftarisiv2-pack.js"></script>

<script src="http://samasajt.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>

<script type="text/javascript">

var accToc=true;

</script>

<script src="http://deroc.googlecode.com/files/accordion-pack.js" type="text/javascript"></script>

И заменяем адрес моего блога на свой. 

8. Публикуем страницу.

P.S. И не спрашивайте меня, пожалуйста, сколько времени будет работать этот вариант карты сайта для Blogger!!!