使い方
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
SEO対策
Sitemap
コメント(0)
コメントを投稿