Красивое оглавление Blogger

• Убрать боковую панель со страницы блога Blogspot
• Почему блог на Blogger плохо выглядит в Internet Explorer
• Как убрать "Показаны сообщения с ярлыком..."
• Как определить внешний вид только для определённого ярлыка
• Содержание, которое не будет индексироваться
• зафиксировать панель

Внешне другая реализация оформления "Содержания блога": ОБРАЗЕЦ. "Подготовительный этап" и "Оптимизация title" будут полностью идентичными, немного изменим лишь код.

исходный кодитоговый код

        <b:if cond='data:blog.searchLabel'>
        <b:loop values='data:posts' var='post'>
         <b:if cond='data:post.thumbnailUrl'>
           <a class='post-miniature' expr:href='data:post.url' expr:style='&quot;background: url(&quot; + data:post.thumbnailUrl + &quot;) no-repeat 50% 50%; color: rgba(0,0,0,0);&quot;'><span><data:post.title/></span></a>
         <b:else/>
           <a class='post-miniature' expr:href='data:post.url'><span><data:post.title/></span></a>
         </b:if>
      </b:loop>
      <b:else/>      <b:loop values='data:posts' var='post'>
        <b:if cond='data:post.isDateStart'>
          <b:if cond='data:post.isFirstPost == &quot;false&quot;'>
            &lt;/div&gt;&lt;/div&gt;
          </b:if>
        </b:if>
        <b:if cond='data:post.isDateStart'>
          &lt;div class=&quot;date-outer&quot;&gt;
        </b:if>
        <b:if cond='data:post.dateHeader'>
          <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
        </b:if>
        <b:if cond='data:post.isDateStart'>
          &lt;div class=&quot;date-posts&quot;&gt;
        </b:if>
        <div class='post-outer'>
        <b:include data='post' name='post'/>
        <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
          <b:include data='post' name='comment_picker'/>
        </b:if>
        <b:if cond='data:blog.pageType == &quot;item&quot;'>
          <b:include data='post' name='comment_picker'/>
        </b:if>
        </div>
        <b:if cond='data:post.includeAd'>
          <b:if cond='data:post.isFirstPost'>
            <data:defaultAdEnd/>
          <b:else/>
            <data:adEnd/>
          </b:if>
          <div class='inline-ad'>
            <data:adCode/>
          </div>
          <data:adStart/>
        </b:if>
      </b:loop>
      <b:if cond='data:numPosts != 0'>
        &lt;/div&gt;&lt;/div&gt;
      </b:if>      </b:if>

CSS стиль и малюсенький JavaScript

До </head> внести

<b:if cond='data:blog.searchLabel'>
<style>
a.post-miniature {
 position: relative;
 overflow: hidden;
 display: inline-block;
 width: 32%;  /* для того, чтобы увеличить количество блоков, расположенных на одной линии, уменьшите значение, например, 19% для 4-х блоков */
 padding-top: 32%;
 background: rgba(100,100,100,.5);
 box-shadow: 0 0 0 1px rgba(0,0,0,.1) inset;
 text-align: center;
 text-decoration: none;
 transition: .5s;
}
a.post-miniature span {
 display: block;
 position: absolute;
 top: 50%;
 left: 50%;
 width: 100%;
 max-height: 100%;
 transform: translate(-50%, -50%);
}
a.post-miniature:hover {
 background: rgb(100,100,100) no-repeat 50% 50% !important;
 color: #fff !important;
}
</style>
<script>
function soderzhanie() {
  document.getElementById(&#39;Blog1&#39;).innerHTML = document.getElementById(&#39;Blog1&#39;).innerHTML.replace(/s72-c/g, &#39;s&#39;+document.querySelector(".post-miniature").offsetWidth+&#39;-c&#39;);
}
document.addEventListener( &quot;DOMContentLoaded&quot;, soderzhanie, false );
</script>
</b:if>