.png)
@Bloggerで記事に付けたラベルをカテゴリーとして扱いツリー形式のメニューとして表示するガジェットです。
Javascriptのソース版を公開しておりましたが、それをガジェットとして簡単にご自身のBloggerへ追加する事ができるように改造したバージョンです。
※ @Blogger（＆Picasa）以外にホスティングサーバを必要としません。
※ アイコン画像の著作権は、ハイパーハンズに御座いません。
Javascriptのソース版を公開しておりましたが、それをガジェットとして簡単にご自身のBloggerへ追加する事ができるように改造したバージョンです。
※ @Blogger（＆Picasa）以外にホスティングサーバを必要としません。
Blogger LabelMenu Ver1.02
背景は指定していませんので、ご自身のサイドバーウィジェットのCSSに従い表示されます。
また、追加したガジェットは、その他のガジェットと同様Bloggerのレイアウト画面で、ドラッグ＆ドロップによる移動が可能です。
ご注意
フォルダアイコンと記事アイコンは、ハイパーハンズの画像になっていますので、そのまま使用しますと直リンクとなってしまいますので、ガジェット追加後なるべく早めにご自身の所有アイコンに修正してご使用下さい。※ アイコン画像の著作権は、ハイパーハンズに御座いません。
ガジェットのソース
<div id="bloggerLabelMenuContentVer102">
<div style='text-align: right'>
<div style="margin-top:5px;">
<a href="javascript:void(0)" onclick="escapeMe_bloggerLabelMenuVer102();">
<img id="addToBlogger" src="http://www.blogger.com/img/add/add2blogger_sm_b.gif" alt="add Blogger LabelMenu to Blogger" />
</a>
<a href="http://aspnet.hyperhands.com/2010/04/blogger_13.html" target="_blank" alt='help'>
<img src="http://lh5.ggpht.com/_BdRZoJ1uqRY/S63jHm8FMOI/AAAAAAAABNo/y447ThlqhKM/s128/ico_question_06.gif" alt="questionImage" />
</a>
</div>
</div>
<div class='categorymenu' id='category-menu'>Blogger LabelMenu Ver1.00</div>
<div style="text-align:center;">
<form method="POST" name="bloggerLabelMenuV102" action="http://www.blogger.com/add-widget">
<input type="hidden" name="widget.title" value="Blogger LabelMenu Ver1.02" />
<input type="hidden" name="widget.content" value="" />
<input type="hidden" name="widget.template" value="<data:content/>" />
<input type="hidden" name="infoUrl" value="http://aspnet.hyperhands.com/2010/03/html_11.html" />
<input type="hidden" name="logoUrl" value="http://lh4.ggpht.com/_BdRZoJ1uqRY/S5i2UYVSP7I/AAAAAAAABJc/FMaHYJABhq0/s128/Hyperhands_Logo.png" />
</form>
<div style='text-align:right;'>
<span>Powered by</span>
<span style='float:right;'>
<a href="http://www.hyperhands.com/" target="_blank">
<img style="padding-top:5px;height:18px;" src="http://lh4.ggpht.com/_BdRZoJ1uqRY/S5i2UYVSP7I/AAAAAAAABJc/FMaHYJABhq0/s128/Hyperhands_Logo.png" alt="Hyperhands" />
</a>
</span>
</div>
</div>
<style type='text/css'>
.menu{
width: 100%;
}
.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>
<script type='text/javascript'>
<!--
//-------------------------------------
// 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(){
labelMenu.innerHTML = '';
feedQueryUrl = feedQueryUrl + "?orderby=published";
feedQueryUrl += ("&max-results=");
var srcStr = (feedQueryUrl + maxFeeds + "&alt=json-in-script&callback=viewLabelMenu");
var s = document.createElement( 'script' );
s.setAttribute( 'type', 'text/javascript' );
s.setAttribute( 'src', srcStr );
//labelMenu.innerHTML = srcStr
labelMenu.appendChild( s );
}
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 abbr = document.createElement( 'abbr' );
abbr.setAttribute( 'title', 'Clickで開閉できます' );
li.appendChild( abbr );
var img = document.createElement( 'img' );
img.setAttribute( "id" , id + "img" );
img.setAttribute( 'onClick', "toggle('" + id + "');" );
img.setAttribute( 'src', categoryImage );
abbr.appendChild( img );
}
var entries = items[ categoryName ];
var entryCnt = "(" + entries.length + ")";
var abbr2 = document.createElement( 'abbr' );
abbr2.setAttribute( 'title', 'カテゴリーSummaryページを表示します' );
li.appendChild( abbr2 );
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 ) );
abbr2.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 title = index[ i ] ;
var a = document.createElement( 'a' );
a.setAttribute( 'href', links[ title ] );
li.setAttribute( 'class', 'MenuEntry' );
a.appendChild( document.createTextNode( title ) );
var entry = items[ title ];
var commentLink = this.getCommentLink( entry );
if( commentLink != undefined ) a.appendChild( commentLink );
li.appendChild( a );
ul.appendChild( li );
}
}catch(e){
alert( e );
}
return ul;
}
this.getCommentLink = function(entry){
var c;
try{
if( entry != undefined ){
// コメントカウント
for( var j=0; j<entry.link.length; j++){
var link = entry.link[j];
if( link.rel == 'replies' ){
if( link.title.indexOf( ' 件のコメント' ) > -1){
var commentCount = link.title.substring( 0, link.title.indexOf( ' ' ) );
if( commentCount != '0' ){
var c = document.createElement( 'a' );
c.setAttribute( 'class', 'commentCount' );
c.setAttribute( 'href', link.href );
var ab = document.createElement( 'abbr' );
ab.setAttribute( 'title', 'コメントを表示するリンク' );
ab.appendChild( document.createTextNode( '【' + commentCount + '】' ) );
c.appendChild( ab );
}
}
}
}// j loop
}
}catch( e ){
alert( e );
}
return c;
}
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( isInt( key ) ){
ret = index[ key ];
}else{
ret = items[ key ];
}
return ret;
};
}
startLabelMenuQuery();
-->
</script>
<script type="text/javascript"><!--
//-------------------------------------
// Copyright (C) 2010 Hyperhands.com
// This code Created by S.Kobayashi
// License agreement with GNU LGPL
//-------------------------------------
function htmlTagEscape_bloggerLabelMenuVer102(html,reverse)
{
var s;
if( html != undefined ) s = html;
if( reverse ){
s = s.replace( /&/g, '&' );
s = s.replace( /"/g, '"');
s = s.replace( /</g, '<' );
s = s.replace( />/g, '>' );
s = s.replace( /'/g, "'" );
s = s.replace( /'/g, "'" );
}else{
s = s.replace( /&/g, '&' );
s = s.replace( /"/g, '"');
s = s.replace( /</g, '<' );
s = s.replace( />/g, '>' );
s = s.replace( /'/g, ''' );
}
if( html != undefined ) return s;
};
function escapeMe_bloggerLabelMenuVer102()
{
labelMenu.innerHTML = "";
var s = document.getElementById('bloggerLabelMenuContentVer102').outerHTML;
document.bloggerLabelMenuV102.elements[1].value = s;
document.bloggerLabelMenuV102.submit();
};
// --></script>
</div>
関連記事
Blogger
Gadgets
SEO対策
Sitemap
コメント(1)
関連記事の表示に対応し、Ver1.03とリビジョンアップしました。
レイアウトにタグを追記する必要がありますので、修正コードと共に後日記事をアップします。
コメントを投稿