【Blogger(ブロガー)、Vaster2】で人気記事を全期間・月別・週別で全てタブで切り替え表示できるようにカスタマイズしてみた

【Blogger(ブロガー)、Vaster2】で人気記事を全期間・月別・週別で全てタブで切り替え表示できるようにカスタマイズしてみた

<!-- 人気の投稿-期間変更 START -->
<script type='text/javascript'>
    //<![CDATA[
    <!--
(function(){function k(b){function c(b,a,c){var d=document.createElement("a");d.setAttribute("href","javascript:void(0);");d.innerHTML=c;a&&d.setAttribute("style","background-color:#ffffcc;");d.onclick=function(){if(e!=b){var a=document.getElementById(e),c=document.getElementById(b);a.style.display="none";c.style.display="block";a=document.getElementById(l);a.innerHTML="";a.appendChild(k(b));e=b}};return d}function f(a,b,e,d){a.appendChild(c(e,b==e,d))}var a=document.createElement("span");f(a,b,g.id,
g.name);a.appendChild(document.createTextNode(" | "));f(a,b,m.id,m.name);a.appendChild(document.createTextNode(" | "));f(a,b,h.id,h.name);return a}var g={id:"PopularPosts1",name:"全期間"},m={id:"PopularPosts3",name:"過去 30 日間"},h={id:"PopularPosts2",name:"過去 7 日間"},p=g.id,n=h.id,l="change-popular-post-navi",e=n;setTimeout(function(){var b=document.getElementById(p),c=document.createElement("div");c.setAttribute("id",l);c.appendChild(k(n));b.parentNode.insertBefore(c,b)},0)})();
    //-->
    //]]>
</script>
<!-- 人気の投稿-期間変更 END -->

次にテーマ→カスタマイズ→上級者向け→CSSを追加の箇所に
下記のコードを貼り付け。

#change-popular-post-navi {
font-size: 18px;
}

/* 切り替えのために使用する人気の投稿データは非表示にする */
#PopularPosts1 {
display:none;
}
#PopularPosts3 {
display:none;
}

すると、どうでしょうか？

まとめ