.png)
Blogger用 ラベルメニュー ガジェット版 に機能追加することで記事に付与したラベルに該当する記事のリストを関連記事としてリンク化する事ができるようになりました。
以下のタグでID「ラベル名＋'-recent-post'」が書き出されます。
プログラムがそのラベルメニュー作成時に当該ラベルのIDを発見すると関連記事として、同様のメニューを書き出す仕組みです。
※ ページローディングの高速化（既定の投稿表示数＝１）に対応しています。
実装方法
Blogger管理ツールから「レイアウト＞HTMLの編集」で<data:post.body/>を検索し、その後ろに以下のタグをコピー＆ペーストします。
以下のタグでID「ラベル名＋'-recent-post'」が書き出されます。
プログラムがそのラベルメニュー作成時に当該ラベルのIDを発見すると関連記事として、同様のメニューを書き出す仕組みです。
※ ページローディングの高速化（既定の投稿表示数＝１）に対応しています。
実装方法
Blogger管理ツールから「レイアウト＞HTMLの編集」で<data:post.body/>を検索し、その後ろに以下のタグをコピー＆ペーストします。
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:post.labels'>
<h5 class='label-recent-post-header'>関連記事</h5>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.name'>
<div class='label-recent-post' expr:id='data:label.name + "-recent-post"'>
<data:label.name/>
</div>
</b:if>
</b:loop>
</b:if>
</b:if>
次にサイドバーに表示されているメニューの「Add to Blogger」ボタンを押下して、ご自身のBloggerのガジェットとしてJavascriptのコードを実装します。
ソースコード
<div id="bloggerLabelMenuContentVer103">
<div style='text-align: right'>
<div style="margin-top:5px;">
<a href="javascript:void(0)" onclick="escapeMe_bloggerLabelMenuVer103();">
<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.03</div>
<div style="text-align:center;">
<form method="POST" name="bloggerLabelMenuV103" action="http://www.blogger.com/add-widget">
<input type="hidden" name="widget.title" value="Blogger LabelMenu Ver1.03" />
<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;
}
.label-recent-post .MenuCategory a{
font-size:20px;
}
.label-recent-post .currentMenuCategory a{
font-size:20px;
}
.label-recent-post .MenuEntry a{
font-size:15px;
}
</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 = '';
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=' + '1' );
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 );
var label = document.getElementById( categoryName + '-recent-post' );
if( label != undefined ){
label.innerHTML = li.innerHTML;
}
}
}
}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_bloggerLabelMenuVer103(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_bloggerLabelMenuVer103()
{
labelMenu.innerHTML = "";
var s = document.getElementById('bloggerLabelMenuContentVer103').outerHTML;
document.bloggerLabelMenuV103.elements[1].value = s;
document.bloggerLabelMenuV103.submit();
};
// --></script>
</div>
関連記事
Blogger
SEO対策
ページング
コメント(0)
コメントを投稿