Bloggerで全ラベルの記事リストをメニュー表示する②

使い方

Blogger管理ツールの「レイアウト＞Htmlの編集」で、ガジェットを追加から「Html/Javascript」ガジェットを追加します。適宜タイトルを決め、コードに以下のコードを張り付けます。

<style type="text/css">
.categorymenu li{
  margin: 0 0 0 5em;
 padding-left:30px;
}
.MenuCategory a{
line-height:15px;
 text-shadow: 0px 1px 1px #ddddff; 
 font-size:12px;
 color: #222299;
 text-decoration:none;
 margin: 0 5px 0 0;
 padding:0px;
}
.currentMenuCategory a{
line-height:15px;
 text-shadow: 0px 1px 1px #ddddff; 
 font-size:20px;
 color: #2222ff;
 text-decoration:none;
 margin: 0 5px 0 0;
 padding:0px;
}
.MenuCategory a:hover, .currentMenuCategory a:hover{ 
 font-size:20px;
 font-weight:bold;
 color: #0000ff;
}
.MenuCategory ul{
display:none;
}
.currentMenucategory ul{
 display:block;
}
.MenuEntry a{
 font-size:0.7em;
 color: #992222;
 text-shadow: 0px 0px 0px;
 margin: 0 0 0 0em;
 padding:0px;
 
}
.currentMenuCategory .MenuEntry a{
 font-size:12px;
 color: #992222;
 text-shadow: 0px 0px 0px;
 margin: 0 0 0 0em;
 padding:0px;
 
}
.MenuEntry img{
 src:'http://lh4.ggpht.com/_BdRZoJ1uqRY/S7WIGJDus6I/AAAAAAAABPU/OYizDeJZID0/s128/ico_star1.gif';
}

.MenuEntry a{
 text-decoration:none;
 line-height:10px;
}
.MenuEntry a:hover{
  font-size:15px;
  color:#0000ff;
 font-weight:bold;
}
.MenuEntry a:hover{
  color:#0000ff;
}
</style>


<br />
<div class="menu">
<div class="categorymenu" id="category-menu">
</div>
<script src="http://prg.hyperhands.com/scripts/lebelmenu2.js" type="text/javascript">
</script>
</div>

このままだと、私のサーバに配置したJavascriptのソースとイメージ画像を使うことになってしまいます。
「http://prg.hyperhands.com/scripts/lebelmenu2.js」のファイルをダウンロードし、ご自身のサーバへアップロードして上記コードの「src」属性を修正してご使用下さい。
※　サーバへの負荷が掛かりますので、直リンクでの使用はご遠慮下さい。

スクリプトファイルの内容

カテゴリーとエントリーのアイコン画像は、以下のJavascript内に記載してあります。
これも、ご自身のサーバの画像URLへ変更するか、必要ない場合はカットして未定義にして下さい。
※　画像の著作権は私にありませんので、フリー素材サイトなどで入手すると良いでしょう。


<!--
//-------------------------------------
// Copyright (C) 2010 Hyperhands.com
// This code Created by S.Kobayashi
// License agreement with GNU LGPL
//-------------------------------------

var blogHomeUrl ="/";
var categoryImage = "http://lh3.ggpht.com/_BdRZoJ1uqRY/S7WbC1HiHXI/AAAAAAAABPk/kxBW6GSQJP4/s128/ico_folderc1.gif";
var categoryImageOpen ="http://lh4.ggpht.com/_BdRZoJ1uqRY/S7WbC9X3HMI/AAAAAAAABPo/0aOgzLb6C10/s128/ico_foldero1.gif";
var entryImage = "http://lh4.ggpht.com/_BdRZoJ1uqRY/S7WIGJDus6I/AAAAAAAABPU/OYizDeJZID0/s128/ico_star1.gif";

var maxResults = 5;
var maxFeeds = 500;

var feedQueryUrl = blogHomeUrl + "feeds/posts/summary/";
var labelMenu = document.getElementById("category-menu");
function toggle( id , open ){

    var ul = document.getElementById( id + 'ent' );
    var img = document.getElementById( id + 'img' );
    if( ul.style.display == 'none' || open ){
      ul.style.display="block";
      img.src = categoryImageOpen;
    }else{
      ul.style.display="none";
      img.src = categoryImage;
    }
  }
function startLabelMenuQuery(){
   
  feedQueryUrl = feedQueryUrl + "?orderby=published";
 
  feedQueryUrl += ("&max-results=");
  var srcStr = (feedQueryUrl  + maxFeeds + "&alt=json-in-script&callback=viewLabelMenu");
  var scriptStr = ("<script src='"
                 + srcStr
                 + "' type='text/javascript'>"
                 + "</script>");
   //labelMenu.innerHTML = srcStr
   document.write( scriptStr );

}


function viewLabelMenu( result ){
    var feed = result.feed;
   
   var totalResults = parseInt(feed.openSearch$totalResults.$t, 10);
   var startIndex = parseInt(feed.openSearch$startIndex.$t, 10);
   var itemsPerPage  = parseInt(feed.openSearch$itemsPerPage.$t, 10);
      
   var categories = new Categories();

   for(var i=0;i<feed.entry.length;i++){
    var entry = feed.entry[i];
    if( entry.category != undefined ){
      for( var j=0;j<entry.category.length;j++){
        var category = entry.category[j];
        var categoryName = category.term;

        categories.add( categoryName , entry ) ;
      
      }// j
     }// i
   }
   labelMenu.appendChild( categories.getUl() );
}
function Categories(){
  var items = new Array();
  var index = new Array();

  this.getUl = function(){
    var ul = document.createElement( 'ul' );
    try{ 
       index.sort();
       for( var i=0;i<index.length;i++){
          var categoryName = index[i];
          var li = document.createElement( 'li' );
          if( location.href.indexOf( '/search/label/' + encodeURIComponent( categoryName ) +'?' ) > -1 ){
            li.setAttribute( 'class' , 'currentMenuCategory' );
          }else{
            li.setAttribute( 'class','MenuCategory');
          }
          ul.appendChild( li );

          var id = 'MenuCategory_' + i;
          if( categoryImage != undefined ){
             var img = document.createElement( 'img' );
             img.setAttribute( "id" , id + "img" );
             img.setAttribute( 'onClick',  "toggle('" + id + "');" );
             img.setAttribute( 'src', categoryImage );
             li.appendChild( img );
          }

          var entries = items[ categoryName ];
          var entryCnt = "(" + entries.length + ")";
          var a = document.createElement( 'a' );
          a.setAttribute( 'href',blogHomeUrl + 'search/label/' + encodeURIComponent( categoryName ) + '?orderby=published&max-results=' + maxResults );
 
          a.setAttribute( 'onMouseOver', "toggle('" + id + "',true);" );       
          a.appendChild( document.createTextNode( categoryName + entryCnt ) );
          li.appendChild( a );

          if( entries != undefined ){
            var childUl = entries.getUl();
            childUl.setAttribute( "id" , id + "ent" );
            li.appendChild( childUl );
          }
       }
    }catch(e){
      alert( e );
    }
    return ul;  
  }
 
  this.getItem = function( key ){
    return items[key];
  };
  this.getList = function(){
    var list = index;
    list.sort();
    return list;
  };

  this.lists = function(){ return index.join('\n'); };

  this.contains = function( key ){
    var ret = (items[ key ] != undefined );
    return ret;
  };

  this.add = function( categoryName, entry ){
    var ret = false;
    try{
      if( categoryName != undefined ){
        if ( categoryName != 'Summary') {
          var entries = null;
          if( !this.contains( categoryName )){
            entries = new Entries(categoryName)
            items[ categoryName ] = entries;
            index[ index.length ] = categoryName;
            this.length = index.length;
            ret = true;
          }else{
            entries = items[ categoryName ];
          }
          entries.add( entry.title.$t, entry );
        }
      }
    }catch(e){
      alert( e );
    }
    return ret;
  };

}
//--------------------------------------------------------------------------
function Entries(categoryName){
  var name = categoryName;
  var items = new Array();
  var links = new Array();
  var index = new Array();


  this.getUl = function(){
    var ul = document.createElement( 'ul' );
    try{
      index.sort();
      for( var i=0;i<index.length;i++){
         var li = document.createElement( 'li' );
         if( entryImage != undefined ){
             var img = document.createElement( 'img' );
             img.setAttribute( 'src', entryImage );
             li.appendChild( img );
         }
         var a = document.createElement( 'a' );
         a.setAttribute( 'href', links[ index[ i ] ] );
         li.setAttribute( 'class', 'MenuEntry' );
         a.appendChild( document.createTextNode( index[ i ] ) );
         li.appendChild( a );
         ul.appendChild( li );
      }
    }catch(e){
      alert( e );
    }
    return ul;  
  }

  this.getLink = function(entry){
   
    for(var i=0;i<entry.link.length;i++){
      if( entry.link[i].rel == 'alternate' ){
        return entry.link[i].href;
      }
    }
    return '';
  };

  this.getName = function(){ return name; };
  this.getList = function(){
    var list = index;
    list.sort();
    return list;
  };

  this.lists = function(){ index.sort(); return index.join('\n'); };
  this.contains = function( key ){
    var ret = (items[ key ] != undefined );
    return ret;
  };

  this.add = function( key, entry ){
    var ret = false;
    try{
      if( !this.contains( key )){
        items[ key ] = entry;
        links[ key ] = this.getLink( entry );
        index[ index.length ] = entry.title.$t;
        this.length = index.length;
        ret = true;
      }
    }catch(e){
      alert( e );
    }
    return ret;
  };
  this.get = function( key ){
    var ret = null;
    if( isNumber( key ) ){
      ret = index[ key ];
    }else{
      ret = items[ key ];
    }
    return ret;
  };
}

startLabelMenuQuery();

-->

この記事へのリンク記事を自身のBloggerへ作成する

コメント(0)

コメントを投稿

Blogger

SEO対策

Sitemap

Bloggerで全ラベルの記事リストをメニュー表示する②

使い方

スクリプトファイルの内容

この記事へのリンク記事を自身のBloggerへ作成する

コメント(0)

コメントを投稿

関連記事

Category Menu Ver1.03

考えるコンピュータをつくろう

Html TagEscaper Ver1.01

SiteRoll Links