更新日：2020/02/22

bloggerにカレンダー（calendar）を設置する方法




こちらの

記事を参考にしました。 bloggerにはカレンダーが必要ないのか？過去記事をたどるのは時系列で検索するより、検索単語で探すほうが早いが、日本のブログに関してはカレンダーは日記の記録的な要素から、いまだに必須となっている。しばらくすれば、このカレンダー機能も国内のブログの中でも不要とされるかもしれない。。。設置の仕方を整理してみると自分のテンプレートの中にアーカイブウィジットがあることを確認しておいて、バックアップはとっておきましょう

��　HTMLの編集で、以下のソースの部分を

?
Style - Blue/Black
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'>
 
<b:includable id='main'>
 
<b:if cond='data:title'>
 
<h2><data:title/></h2>
 
</b:if>
 
<div class='widget-content'>
 
<div id='ArchiveList'>
 
<div expr:id='data:widget.instanceId + &quot;_ArchiveList&quot;'>
 
<b:if cond='data:style == &quot;HIERARCHY&quot;'>
 
<b:include data='data' name='interval'/>
 
</b:if>
 
<b:if cond='data:style == &quot;FLAT&quot;'>
 
<b:include data='data' name='flat'/>
 
</b:if>
 
<b:if cond='data:style == &quot;MENU&quot;'>
 
<b:include data='data' name='menu'/>
 
</b:if>
 
</div>
 
</div>
 
<b:include name='quickedit'/>
 
</div>
 
</b:includable>
 
<b:includable id='flat' var='data'>
 
<ul class='flat'>
 
<b:loop values='data:data' var='i'>
 
<li class='archivedate'>
 
<a expr:href='data:i.url'><data:i.name/></a> (<data:i.post-count/>)
 
</li>
 
</b:loop>
 
</ul>
 
</b:includable>
 
<b:includable id='menu' var='data'>
 
<select expr:id='data:widget.instanceId + &quot;_ArchiveMenu&quot;'>
 
<option value=''><data:title/></option>
 
<b:loop values='data:data' var='i'>
 
<option expr:value='data:i.url'><data:i.name/> (<data:i.post-count/>)</option>
 
</b:loop>
 
</select>
 
</b:includable>
 
<b:includable id='interval' var='intervalData'>
 
<b:loop values='data:intervalData' var='i'>
 
<ul class='hierarchy'>
 
<li expr:class='&quot;archivedate &quot; + data:i.expclass'>
 
<b:include data='i' name='toggle'/>
 
<a class='post-count-link' expr:href='data:i.url'><data:i.name/></a>
 
<span class='post-count' dir='ltr'>(<data:i.post-count/>)</span>
 
<b:if cond='data:i.data'>
 
<b:include data='i.data' name='interval'/>
 
</b:if>
 
<b:if cond='data:i.posts'>
 
<b:include data='i.posts' name='posts'/>
 
</b:if>
 
</li>
 
</ul>
 
</b:loop>
 
</b:includable>
 
<b:includable id='toggle' var='interval'>
 
<b:if cond='data:interval.toggleId'>
 
<b:if cond='data:interval.expclass == &quot;expanded&quot;'>
 
<a class='toggle' href='javascript:void(0)'>
 
<span class='zippy toggle-open'>&#9660;&#160;</span>
 
</a>
 
<b:else/>
 
<a class='toggle' href='javascript:void(0)'>
 
<span class='zippy'>
 
<b:if cond='data:blog.languageDirection == &quot;rtl&quot;'>
 
&#9668;&#160;
 
<b:else/>
 
&#9658;&#160;
 
</b:if>
 
</span>
 
</a>
 
</b:if>
 
</b:if>
 
</b:includable>
 
<b:includable id='posts' var='posts'>
 
<ul class='posts'>
 
<b:loop values='data:posts' var='i'>
 
<li><a expr:href='data:i.url'><data:i.title/></a></li>
 
</b:loop>
 
</ul>
 
</b:includable>
 
</b:widget>


これを、以下のように置き換えます。

?
Style - Blue/Black
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'>
 
<b:includable id='main'>
 
<b:if cond='data:title'>
 
<h2><data:title/></h2>
 
</b:if>
 
<div class='widget-content'>
 
<div id='ArchiveList'>
 
<div expr:id='data:widget.instanceId + "_ArchiveList"'>
 
<b:if cond='data:style == "HIERARCHY"'>
 
<b:include data='data' name='interval'/>
 
</b:if>
 
<b:if cond='data:style == "FLAT"'>
 
<b:include data='data' name='flat'/>
 
</b:if>
 
<b:if cond='data:style == "MENU"'>
 
<b:include data='data' name='menu'/>
 
</b:if>
 
</div>
 
</div>
 
<b:include name='quickedit'/>
 
</div>
 
</b:includable>
 
<b:includable id='toggle' var='interval'>
 
<!-- Toggle not needed for Calendar -->
 
</b:includable>
 
<b:includable id='flat' var='data'>
 
<div id='bloggerCalendarList'>
 
<ul>
 
<b:loop values='data:data' var='i'>
 
<li class='archivedate'>
 
<a expr:href='data:i.url'><data:i.name/></a> (<data:i.post-count/>)
 
</li>
 
</b:loop>
 
</ul>
 
</div>
 
<div id='blogger_calendar' style='display:none'>
 
<table id='bcalendar'><caption id='bcaption'>
 
</caption>
 
<!-- Table Header -->
 
<thead id='bcHead'></thead>
 
<!-- Table Footer -->
 
<!-- Table Body -->
 
<tbody><tr><td id='cell1'> </td><td id='cell2'> </td><td id='cell3'> </td><td id='cell4'> </td><td id='cell5'> </td><td id='cell6'> </td><td id='cell7'> </td></tr>
 
<tr><td id='cell8'> </td><td id='cell9'> </td><td id='cell10'> </td><td id='cell11'> </td><td id='cell12'> </td><td id='cell13'> </td><td id='cell14'> </td></tr>
 
<tr><td id='cell15'> </td><td id='cell16'> </td><td id='cell17'> </td><td id='cell18'> </td><td id='cell19'> </td><td id='cell20'> </td><td id='cell21'> </td></tr>
 
<tr><td id='cell22'> </td><td id='cell23'> </td><td id='cell24'> </td><td id='cell25'> </td><td id='cell26'> </td><td id='cell27'> </td><td id='cell28'> </td></tr>
 
<tr><td id='cell29'> </td><td id='cell30'> </td><td id='cell31'> </td><td id='cell32'> </td><td id='cell33'> </td><td id='cell34'> </td><td id='cell35'> </td></tr>
 
<tr id='lastRow'><td id='cell36'> </td><td id='cell37'> </td></tr>
 
</tbody>
 
</table>
 
<table id='bcNavigation'><tr>
 
<td id='bcFootPrev'></td>
 
<td id='bcFootAll'></td>
 
<td id='bcFootNext'></td>
 
</tr></table>
 
<div id='calLoadingStatus' style='display:none; text-align:center;'>
 
<script type='text/javascript'>bcLoadStatus();</script>
 
</div>
 
<div id='calendarDisplay'/>
 
</div>
 
<script type='text/javascript'> initCal();</script>
 
</b:includable>
 
<b:includable id='posts' var='posts'>
 
<!-- posts not needed for Calendar -->
 
</b:includable>
 
<b:includable id='menu' var='data'>
 
Configure your calendar archive widget - Edit archive widget - Flat List - Newest first - Choose any Month/Year Format
 
</b:includable>
 
<b:includable id='interval' var='intervalData'>
 
Configure your calendar archive widget - Edit archive widget - Flat List - Newest first - Choose any Month/Year Format
 
</b:includable>
 
</b:widget>


まずは、コレで、テンプレートを保存します。

��　次に、このコードを探します。

?
検索するコード
1
</head>


このコードの直前に、次のコードを挿入します。

<!-- Start Blogger Archive Calendar -->//STYLE CODE WILL COME HERE - SEE STEP #4 <script src='http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/blogger_archive.js' type='text/javascript'/> <script src='/feeds/posts/summary?max-results=0&amp;alt=json-in-script&amp;callback=timezoneSet'/> <!-- End Blogger Archive Calendar -->


ココで、再び、テンプレートを保存します。

��　ここで、テンプレートのレイアウトのなかのアーカイブウィジットを見てこちら

で紹介させている設定と同じボタン配置にしてみました。




��　最後に、上記２の2行目の //STYLE CODE WILL COME HERE - SEE STEP #4 の部分を下記のスタイルシートに置き換えることで自分のブログのデザインの色合いとマッチするデザインにすること。

?
Style for Dark Templates
1
<link href='http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/dark_theme.css' rel='stylesheet' type='text/css'/>


?
Style - Plain White
1
<link href='http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/plain_white.css' rel='stylesheet' type='text/css'/>


?
Style - Blue/Black
1
<link href='http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/blue_black.css' rel='stylesheet' type='text/css'/>


?
Style - Dusty Blue
1
<link href='http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/dusty_blue.css' rel='stylesheet' type='text/css'/>


このような記事であったので、試してみると、すんなり実装できた。誠にありがとうございます。



0 件のコメント :

コメントを投稿

blogmura_pvcount